原生js

一、节点操作

获取节点

document.getElementById();　　通过id获取节点，获取到单个节点

document.getElementsByClassName();　　通过class获取节点，获取到节点集合

document.getElementsByTagName();　　通过标签名获取节点，获取到节点集合

document.getElementsByName();　　通过name名获取节点，获取到节点集合

document.forms();　　通过form标签名获取节点，获取到节点集合

document.querySelector();　　通过选择器获取节点（class,id,tag…），获取到第一个节点

document.querySelectorAll();　　通过选择器获取节点（class,id,tag…），获取到所有节点

 

获取父节点

element.parentNode　　获取父节点

element.parentElement　　获取父节点

 

获取子节点

element.children    获取所有子节点（都是元素节点）

element.childNodes    获取所有子节点（包含文本节点等）

element.firstElementChild/element.lastElementChild    获取第一个/最后一个子节点（都是元素节点）

element.firstChild/element.lastChild    获取第一个/最后一个子节点（包含文本节点等）

 

获取兄弟节点

element.previousSibling/element.nextSibling    获取前一个/后一个节点（包含文本节点等）

element.previousElementSibling/element.nextElementSibling    获取前一个/后一个节点（都是元素节点）

 

节点操作

document.createElement();    创建节点

parent.removeChild(element);    删除节点

element.cloneNode(true);    克隆节点

parent.appendChild(newElement);    后插入节点

parent.insertBefore(newElement,targetElement);    前插入节点

 

二、样式操作

style

element.style.color    设置/获取单个样式

element.style.cssText    设置/获取多个样式

 

class

element.classList.add()    增加类

element.classList.remove()    删除类

element.classList.toggle()    切换类

element.classList.contains()    是否包含类

 

三、属性操作

element.setAttribute(name,value);    设置属性

element.getAttribute(name);    获取属性

element.removeAttribute(name);    删除属性

element.dataset.name    设置/获取data属性

 

四、html操作

element.innerHTML    设置/获取html（包含html标签）

element.innerText/element.textContent    设置/获取文本（只包含文本标签）