获取 DOM 元素的几种方式

获取 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 元素，类似 aindex

ƒ 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 中的所有直接子级的元素节点:

hello

world cookieParse()

用 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：布尔值，表示是否需要扩展实体引用