通过DOM API 查找节点

而常见的DOM 选取方法有下列这些：

// 根据传入的值，找到 DOM 中 id 为 "xxx" 的元素。
document.getElementById("xxx");

// 针对给定的 tag 名称，返回所有符合条件的 NodeList 对象(节点的集合)
document.getElementsByTagName("xxx");

// 针对给定的 class 名称，返回所有符合条件的节点集合
document.getElementsByClassName("xxx");

// 针对给定的 Selector 条件，返回第一个 或 所有符合条件的节点集合
document.querySelector("xxx"); 
document.querySelectorAll("xxx");

DOM 常用的节点类型有下面几种：

可以通过节点类型常数或是对应数值来判断：

document.nodeType === Node.DOCUMENT_NODE;   //true
document.nodeType === 9;   //true

其他不常用或是已经废弃的部分可以参考：MDN Node.nodeType一节。

由于DOM 节点有分层的概念，于是节点与节点之间的关系，我们大致上可以分成以下两种：

父子关系：除了document之外，每一个节点都会有个上层的节点，我们通常称之为「父节点」 (Parent node)，而相对地，从属于自己下层的节点，就会称为「子节点」 (Child node)。

兄弟关系：有同一个「父节点」的节点，那么他们彼此之间就是「兄弟节点」(Siblings node)。

而隔层的节点基本上没有直接关系。

上图中水平方向的邻层节点为父子关系，垂直方向的同层节点为兄弟关系。

Node.childNodes

所有的DOM节点对象都有childNodes属性，且此种属性无法修改。

我们可以通过Node.hasChildNodes()来检查某个DOM节点是否有子节点。

var node = document.querySelector("#hello");

// 如果 node 內有子元素
if( node.hasChildNodes() ) {
    
    // 可以通过 node.childNodes[n] (n 为数字索引) 取得对应的节点
    // 注意，NodeList 对象內容为即时更新的集合
    for (var i = 0; i < node.childNodes[i].length; i++) {
       // ...     
    }; 
}

Node.childNodes返回的可能会有这几种：

HTML 元素节点(element nodes)

文字节点(text nodes)，包含空格

注释节点(comment nodes)

Node.firstChild

Node.firstChild可以取得Node节点的第一个子节点，如果没有子节点则返回null。

要注意的是，子节点包括空白节点，如下面例子：

<p>
  <span>span 1span>
  <span>span 2span>
  <span>span 3span>
p>

<script>
  var p = document.querySelector("p");    
  
  // tagName 属性可以取得 node 的标签名称
  console.log(p.firstChild.tagName);      // undefined
script>

因为取得的是

与第一个中间的换行字元，所以p.firstChild.tagName会得到undefined。所以改成这样：

<p><span>span 1span><span>span 2span><span>span 3span>p>

<script>
  var p = document.querySelector("p");    

  // tagName 属性可以取得 node 的标签名称
  console.log(p.firstChild.tagName);      // "SPAN"
script>

把中间的换行与空白移除，就会得到预期中的"SPAN"了。

Node.lastChild

Node.lastChild可以取得Node节点的最后一个子节点，如果没有子节点则返回null。

与Node.firstChild一样的是，子节点也包括空白节点，所以像这样：

<p>
  <span>span 1span>
  <span>span 2span>
  <span>span 3span>
p>

<script>
  var p = document.querySelector("p");    
  
  // textContent 属性可以取得节点内的文字内容
  console.log(p.lastChild.textContent);      // "" (换行字元)
script>

得到的会是一个换行字元的空字符串。

移除节点之间多余的空白后：

<p><span>span 1span><span>span 2span><span>span 3span>p>

<script>
  var p = document.querySelector("p");    
  // textContent 属性可以取得节点内的文字内容
  console.log(p.lastChild.textContent);      // "span 3"
script>

输出的就会是正确的"span 3" 啦。

Node.parentNode

那么相较于Child系列，parentNode就单纯一些。

通过Node.parentNode可以用来取得父元素，返回值可能会是一个元素节点(Element node)、根节点(Document node)或DocumentFragment节点。

<p><span>span 1span><span>span 2span><span>span 3span>p>

<script>
  var el = document.querySelector("span");   
  console.log( el.parentNode.nodeName );    // "P"
script>

Node.previousSibling

看完了DOM父与子之后，接着来看看兄弟节点。

通过Node.previousSibling可以取得同层之间的前一个节点，如果node已经是第一个节点且前面无节点，则返回null。

<p><span>span 1span><span>span 2span><span>span 3span>p>

<script>
  var el = document.querySelector("span");   
  console.log( el.previousSibling );    // null

  // document.querySelectorAll 会取得所有符合条件的集合，
  // 而 document.querySelectorAll("span")[2] 指的是「第三个」符合条件的元素。
  var el2 = document.querySelectorAll("span")[2];   
  console.log( el2.previousSibling.textContent );    // "span 2"
script>

Node.nextSibling

与Node.previousSibling类似，通过Node.nextSibling可以取得同层之间的下一个节点，如果node已经是最后一个节点，则返回null。

<p><span>span 1span><span>span 2span><span>span 3span>p>

<script>

  // document.querySelector 会取得第一个符合条件的元素
  var el = document.querySelector("span");

  console.log( el.nextSibling.textContent );    // "span 2"
script>

document.getElementsBy*与document.querySelector/ document.querySelectorAll的差异

今天分享了很多关于DOM的选取以及查找遍历的方式，其中，像是document.getElementById以及document.querySelector因为取得的一定只会有一个元素/节点，所以不会有index与length属性。

而document.getElementsBy**(注意，这里有个s)以及document.querySelectorAll则分别返回HTMLCollection与NodeList。

这两者其实是有点差别的，HTMLCollection只收集HTML element 节点，而NodeList除了HTML element 节点，也包含文字节点、属性节点等。当然两者也有类似的地方，虽然不能使用数组的method，但这两种都可以用数组索引的方式来存取内容，也就是伪数组。

另一个需要注意的地方是，HTMLCollection/NodeList在大部分情况下是即时更新的，但通过document.querySelector/document.querySelectorAll取得的NodeList是静态的。

啥意思呢？举个例子：

<div id="outer">
  <div id="inner">innerdiv>
div>

<script>

  // 

  var outerDiv = document.getElementById("outer");    
  
  // 所有的 
 标签
  var allDivs = document.getElementsByTagName("div");    
  
  console.log(allDivs.length);    // 2

  // 清空 
 下的节点   
  outerDiv.innerHTML = "";    

  // 因为清空了
 下的节点，所以只剩下 outer
  console.log(allDivs.length);    // 1
script>

如果改成document.querySelector的写法：

<div id="outer">
  <div id="inner">innerdiv>
div>

<script>

  // 

  var outerDiv = document.getElementById("outer");    

  // 所有的 
 标签
  var allDivs = document.querySelectorAll("div");    

  console.log(allDivs.length);    // 2

  // 清空 
 下的节点   
  outerDiv.innerHTML = "";    

  // document.querySelector 返回的是静态的 NodeList，不受 outerDiv 更新影响
  console.log(allDivs.length);    // 2
script>

那么以上就是今天所要介绍的内容啦。

在后续的文章会再继续说明DOM API新增/删除/修改节点的部分，欢迎持续关注。

如果觉得文章对你有些许帮助，欢迎在我的GitHub博客点赞和关注，感激不尽！