【JS】常用DOM操作

1.获取元素dom节点
通过元素的ID名获取元素：document.getElementById('#id');
通过元素的Class名获取元素集合：document.getElementsByClassName('.class');
通过元素的标签名获取元素集合：document.getElementsByTagName('tagName');
通过元素的name名获取元素集合：document.getElementsByName('name');

2.创建和插入节点
创建一个元素节点：document.createElement('tagName');
创建一个文本节点：document.createTextNode('data');
插入元素节点：oldnode.appendChild（newnode）;
在已有的子节点前插入一个新的子节点：parentnode.insertBefore(newnode,node);

3.元素属性操作
获取元素属性值：node.getAttribute(name)
给元素设置属性：node.setAttribute(name，value);
移除属性：node.removeAttribute(属性名);
返回属性的集合：node.attributes；

4.文本内容操作
获取或设置HTML内容：node.innerHTML;
获取或设置元素的文本：node.innerText;

5.节点操作（父，子）
获取节点的子节点集合：elementNode.childNodes;
移除子节点：node.removeChild('childnode');
替换子节点：node.replaceChild(newold，oldnode);
获取子节点第一项：node.firstChild
获取子节点最后一项：node.lastChild
返回父节点：node.parentNode;
返回下一个节点：node.nextSibling;
返回同级上一个节点：ndoe.proviousSibling;
获取节点的子元素节点集合：node.children;

6.节点属性
返回节点名：nodeName;

元素节点的 nodeName 与标签名相同  
属性节点的 nodeName 是属性的名称  
文本节点的 nodeName 永远是 #text  
文档节点的 nodeName 永远是 #document  

返回节点值：nodeValue;

 元素节点的 nodeValue 是 undefined 或 null
 文本节点的 nodeValue 是文本自身
 属性节点的 nodeValue 是属性的值

返回节点类型:nodeType;

元素类型    节点类型
  元素          1
  属性          2
  文本          3
  注释          8
  文档          9