JavaScript笔记——常见DOM知识

摘要：前言本篇文章以介绍常见的节点知识元素操作方法为目的，其中也对一些比较容易忽略的问题进行简要说明。此外，还有一些方式可以获得相关的元素节点。利用字符串拼接使用字符串拼接的方法插入元素是效率最高的。

本篇文章以介绍常见的DOM节点知识、DOM元素操作方法为目的，其中也对一些比较容易忽略的问题进行简要说明。才疏学浅，如有纰漏之处或建议欢迎留下评论。

首先，简单看看Node节点。有三个属性个人认为比较需要注意，nodeType、nodeName、nodeValue。

nodeType——节点类型
返回的是一个整数，表面节点的类型。包括元素节点(1)、文本节点(3)、注释节点(8)等。详见Node.nodeType

nodeName——节点名称
返回节点名称。
元素节点的 nodeName 与标签名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
详见Node.nodeName

nodeValue——节点值
元素节点的 nodeValue 是 null
文本节点的 nodeValue 是文本本身
详见Node.nodeValue

这个图是来自《Javascript高级程序设计》一书中的Node节点间的关系图谱，比较清晰地介绍了节点之间的关系。

parentNode: 父节点

childNodes: 所有子节点

firstNode: 第一个子节点

lastNode: 最后一个子节点

previousSibling: 前一个兄弟节点

nextSibling: 下一个兄弟节点

特别注意上述属性获取的并不只是元素节点，也会包含文本节点等。所以进行操作时需要进行元素类型判断过滤。
此外，还有一些方式可以获得相关的元素节点。

Node.parentElement

ParentNode.children(IE6-8返回的元素可能会包含注释节点)

ParentNode.childElemnetCount

ParentNode.firstElementChild

ParentNode.lastElementChild

NonDocumentTypeChildNode.previousElementSibling

NonDocumentTypeChildNode.nextElementSibling

特别注意：querySelectorAll()与其他方法获取的DOM元素是不同的，它返回的是静态的
NodeList 对象，其他返回的是动态的 HTMLCollection 对象。静态意味着不会随着DOM结构的变换而改变。举例如下：

// html

  
1
  
2
  
3
  
4
  
5
  
6


//js
let list = document.getElementById("list"),
    child1 = document.getElementsByTagName("li"),
    child2 = document.querySelectorAll("li")
console.log(child1.length) // 6
console.log(child2.length) // 6
let ele = document.createElement("li")
ele.innerHTML = 7
list.appendChild(ele)
console.log(child1.length) // 7
console.log(child2.length) // 6

所以，在使用getElementsByTagName、getElementsByClassName、getElementsByName方法时要特别注意循环处理DOM节点的情况。

createElement() 创建一个元素节点
createTextNode() 创建一个文本节点
createAttribute() 创建一个属性节点（用setAttribute方法更加方便）
createDocumentFragment() 创建一个文档片段（适合在批量操作DOM元素时使用，详见后面章节的例子）

元素内容的获取
这里有几个容易混淆的属性，innerHTML、outerHTML、innerText、outerText、textContent，都是可以获取元素内容。区别如下：