js常见的DOM操作

查找元素：

document.getElementById()  // 根据ID来查找元素，区分大小写，如果有多个，只返回第一个；

document.getElementsByClassName()  // 根据类名来查找元素，多个类名用空格分隔，返回一个HTMLCollection （类数据对象），可以在任意元素上调用该方法，返回的是以当前元素为根节点，所有指定类名的子元素。支持IE9

document.getElementsByName()  // 根据给定的name返回节点列表集合。 (IE容错能力较强，会得到一个数组，其中包括id等于name值的)

document.getElementsByTagName()  // 根据标签来查找元素，* 表示查询所有标签，返回一个HTMLCollection。

document.querySelector() // 根据指定选择器查找匹配的第一个HTMLElement对象，找不到返回null（匹配使用的是深度优先遍历）

document.querySelectorAll() // 根据指定的选择器组查找匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是NodeList 

创建新节点：

createDocumentFragment() //创建一个DOM片段

创建一个具体的元素

createElement创建元素

var div1 = document.createElement('div');
div1.className = 'test';
div1.innerText = 'hello';
document.body.appendChild(div1);

注：通过createElement创建的元素并不属于document对象，它只是创建出来并未添加到HTM文档中，还需要调用appendChild或insertBefore 等方法将其添加到HTML文档中。

创建一个文本节点

createTextNode创建文本节点

var node = document.createTextNode("文本节点");
document.body.appendChild(node);

添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //在已有的子节点前插入一个新的子节点

insertBefore

语法：

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

• insertedNode 被插入节点(newNode)
• parentNode 新插入节点的父节点
• newNode 用于插入的节点
• referenceNode newNode 将要插在这个节点之前

如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾。(referenceNode 引用节点是必需参数，必须显式传入一个Node或者null)

返回值：函数返回被插入过的子节点；当 newNode 是 DocumentFragment 时，返回空 DocumentFragment。