DOM 元素的循环遍历

博客地址：https://ainyi.com/89

获取 DOM 元素的几种方式

get 方式：

getElementById
getElementsByTagName
getElementsByClassName
getElementsByName

返回类型 HTMLCollection[]

query 方式：

querySelector
querySelectorAll

返回类型 NodeList[]

获取 dom 元素的详细介绍：https://ainyi.com/31

获取元素

首先用两种方式获取元素

let a = document.getElementsByClassName('title')

let b = document.querySelectorAll('.title')

一般循环

get 方式

get 方式获取的 dom 元素，仅可使用for-in、for-of、for循环

for(let key in a) {

  console.log(a[key])

}

// dom

// ...（每个dom元素）

// length（集合长度）

// ƒ item() { [native code] }

// ƒ namedItem() { [native code] }

其中：

ƒ item() { [native code] }

可通过 a.item(index) 获取 dom 元素，类似 a[index]

ƒ namedItem() { [native code] }

可通过 a.namedItem('popo') 获取 name 属性为 'popo' 的 dom 元素（若多个元素有相同的 name 属性，返回第一个）

for-of、for 循环可获取每个 dom 元素：

for(let val of a) {

  console.log(val)

}

// dom

// ...（每个dom元素）

for(let i = 0; i < a.length; i++) {

  console.log(a[i])

}

// dom

// ...（每个dom元素）

query 方式

query 方式获取的 dom 元素，可使用forEach、for-in、for-of、for循环

forEach、for-of、for 循环的结果无差别

但 for-in 相比 get 方式的 for-in，循环得出的结果稍有不同

for(let key in b) {

  console.log(b[key])

}

// dom

// ...（每个dom元素）

// length（集合长度）

// ƒ item() { [native code] }

// ƒ entries() { [native code] }

// ƒ forEach() { [native code] }

// ƒ keys() { [native code] }

// ƒ values() { [native code] }

与 get 方式的 for-in 相比，少了 ƒ namedItem() { [native code] }，多了 Object 的几个方法

这说明，query 方式获取的 dom 元素集合，可执行 Object 对应的方法，但没有 namedItem() 方法

ES6 转换普通数组

ES6 提供了 Array.from() 方法可将这些集合转换成普通数组，这样就可以享用数组的各种方法了

let array = Array.from(a)

深度遍历

节点树的几个属性

childElementCount：返回子元素（不包括文本节点和注释）的数量
parentNode：ele 的父节点
childNodes：ele 的所有的直接子节点
nextSibling：ele 的下一个同辈节点
previousSibling：ele 的上一个同辈节点

因为 childNodes 包含看不见的空格文本，还有注释等内容，所以使用起来不是太方便

因此，js 又重新引入了元素树的概念。这个在我们实际应用中，用的比较普遍

元素树：仅仅包含元素节点的树结构，不是一颗新树，尽是节点数的子集

为元素新增了下面几个属性：

parentElement：节点的父元素
children：返回节点的所有子元素
firstElementChild：第一个直接子元素
lastElementChild：最后一个直接子元素
previousElementSibling：ele 的前一个兄弟元素
nextElementSibling：ele 的下个兄弟元素

一般来说，区别元素节点，属性节点，文本节点的通用方式是判断该节点的 nodeType

常见的几种 nodeType:

元素节点：1，

属性节点：2，

文本节点：3，

注释节点：8，

...

遍历直接子级元素

假设 html 如下，要遍历出 div 中的所有直接子级的元素节点:

<div id="list">

  <p>hello</p>

  <span>world</span>

  <em>cookieParse()</em>

</div>

用 firstChild，lastChild 进行元素遍历

let list = document.getElementById('list')

let child = list.firstChild

console.log(list.nextSibling)

while(child != list.lastChild) {

  if(child.nodeType === 1) {

    console.log( child )

  }

  child = child.nextSibling

}

使用 firstElementChild，nextElementSibling

let list = document.getElementById('list')

let child = list.firstElementChild

while(child) {

  console.log( child )

  child = child.nextElementSibling

}

深度优先遍历

遍历所有节点

深度优先遍历：当同时有兄弟节点和子节点的时候，总是优先遍历子节点

function getChildren(parent) {

  // 如果当前节点是元素节点，输出当前元素

  parent.nodeType === 1 && console.log(parent);

  // 获得父节点的所有直接子节点

  let children = parent.childNodes

  // 遍历 children 中每个节点

  for(let i = 0, len = children.length; i<len; i++) {

    // 对当前子节点递归

    getChildren(children[i])

  }

}

getChildren(document.body)

需要注意的是：递归的运行效率没有迭代的运行效率高，一般都需要把递归的循环优化成迭代的循环

所以上面递归算法可以进一步优化

优化深度优先遍历

使用 NodeIterator 对象，可以对 DOM 树进行深度优先的搜索

创建 NodeIterator 对象，需要使用 document 对象的 createNodeIterator 方法，该方法接收四个参数：

root：搜索开始的节点
whatToShow：一个数值代码，表示哪些节点需要搜索
filter：NodeFilter 对象，决定忽略哪些节点
entityReferenceExpansion：布尔值，表示是否需要扩展实体引用

whatToShow 参数：

参数	意义
NodeFilter.SHOW_ALL	显示所有类型的节点
NodeFilter.SHOW_ELEMENT	显示元素节点
NodeFilter.SHOW_ATTRIBUTE	显示特性节点
NodeFilter.SHOW_TEXT	显示文本节点
NodeFilter.SHOW_CDATA_SECTION	显示CDATA节点。对HTML页面无用
NodeFilter.SHOW_ENTITY_REFERENCE	显示实体引用节点
NodeFilter.SHOW_ENTITYE	显示实体节点
NodeFilter.SHOW_PROCESSING_INSTRUCTION	显示处理指令节点
NodeFilter.SHOW_COMMENT	显示注释节点
NodeFilter.SHOW_DOCUMENT	显示元档节点
NodeFilter.SHOW_DOCUMENT_TYPE	显示文档类型节点
NodeFilter.SHOW_DOCUMENT_FRAGMENT	显示文档片段节点
NodeFilter.SHOW_SHOW_NOTATION	显示符号节点
NodeFilter.SHOW_DOCUMENT_TYPE	显示文档类型节点

优化如下：

function getChildren(parent){

  // 获取 NodeIterator 对象

  let t = document.createNodeIterator(parent, NodeFilter.SHOW_ELEMENT, null, false)

  // 循环遍历对象的下一个节点

  let currNode = null

  while((currNode = t.nextNode()) !== null) {

    // 节点不为空，就一直循环遍历下去；直到为 null，才中断循环

    console.log(currNode)

  }

}

getChildren(document.body)

博客地址：https://ainyi.com/89