JavaScript DOM元素节点操作方法总结

对DOM的操作主要是围绕元素节点和属性节点的增删改查。

---

（1）查：对DOM进行增删改之前，首先要找到对应的元素。
具体的查找方法如下：

getElementById()  // 查找指定id属性值的对象，返回所查找到的一个对象 
getElementsByTagName() // 查找指定的标签对象,返回所查找到的节点数组NodeList
getElementsByName() //查找指定name属性的对象，返回所查找到的节点数组NodeList
getElementsByClassName() //查找指定class属性的对象，返回所查找到的节点数组NodeList

同时还可以利用元素节点的属性获取它的父子节点和文本节点：
子节点:
Node.childNodes  //获取子节点列表NodeList; 注意换行在浏览器中被算作了text节点，如果用这种方式获取节点列表，需要进行过滤
Node.firstChild  //返回第一个子节点
Node.lastChild  //返回最后一个子节点

父节点:
Node.parentNode // 返回父节点
Node.ownerDocument //返回祖先节点（整个document）

同胞节点:
Node.previousSibling // 返回前一个节点，如果没有则返回null
Node.nextSibling // 返回后一个节点

（2）增：新增节点首先要创建节点，然后将新建的节点插入DOM中。
具体方法如下：

创建节点:
createElement() //按照指定的标签名创建一个新的元素节点

创建代码片段:（为避免频繁刷新DOM，可以先创造代码片段，完成所有节点操作之后统一添加到DOM中）
createDocumentFragment()

复制节点:
cloneNode(boolean) //只有一个参数，传入一个布尔值，true表示复制该节点下的所有子节点；false表示只复制该节点

插入节点:
appendChild(childNode) //将childNode节点追加到子节点列表的末尾
insertBefore(newNode, targetNode) //将newNode插入targetNode之前

（3）替换：

replaceChild(newNode, targetNode) //使用newNode替换targetNode

（4）删除：

removeChild(childNode) //移除childNode节点
node.parentNode.removeChild(node) //在不清楚父节点的情况下使用

注释：
1>节点列表是一个节点数组，我们可以通过下标号访问这些节点，下标号从 0 开始；
2>length 属性定义节点列表中节点的数量，我们可以使用 length 属性来循环节点列表；
3>有两个特殊的属性，可以访问全部文档：
document.documentElement - 全部文档
document.body - 文档的主体

---

参考：
【1】JavaScript DOM节点操作方法总结.