遍历DOM元素

时间 2019-11-09

标签遍历 dom 元素栏目 HTML 繁體版

原文原文链接

前置知识

快速获取html元素方法：html

document.documentElement

// js高级程序设计一书中有段这样的代码：
let html = document.documentElement; //取得对<html>的引用
html === document.childNodes[0]; //true
html === document.firstChild; //true

// 实测新版Chrome浏览器（版本 75.0.3770.100 64位）
html === document.childNodes[1]; // true
document.childNodes[0] === document.firstChild // true
document.doctype === document.childNodes[0]; // true

复制代码

快速获取body元素方法：node

document.body
复制代码

ParentNode.children 和 Node.childNodes 区别浏览器

node.children：返回一个 Node 的子元素的集合，类型是 HTMLCollection（即html元素的集合）。
node.childNodes：返回一个 node 子节点的集合，类型是 NodeList，该集合包含有更多的信息，好比元素与元素之间的换行符，页面中的注释等。

若是咱们想遍历元素的话，选择 ParentNode.children 应该是会更方便一些以上两个属性返回的元素集合都是实时的，所以不用担忧因为js脚本修改dom致使须要从新获取元素信息。dom

代码

function ergodicDom(elem) {
    let domTreeObj = {}; //使用对象来展示dom树
    !function innerFun(elem, obj, i) {
        if (elem.nodeName === 'SCRIPT' || elem.nodeName === 'STYLE') {
            return;
        }
        let name = i ? elem.nodeName + i : elem.nodeName;
        obj[name] = {};
        if (elem.children.length > 0) {
            [].forEach.call(elem.children, (element, i)=>{
                innerFun(element, obj[name], i)
            })
        }

    }(elem, domTreeObj)
    return domTreeObj;
}
复制代码

随手写的，发现用了 ParentNode.children 的话就不须要判断 nodeType 了，有不足之处欢迎补充ui

1. jQuery——遍历DOM元素的后代元素
2. 遍历List删除元素
3. NSMutableArray遍历删除元素
4. javascript遍历子元素
5. js遍历子元素
6. 子元素的遍历
7. jquery使用、遍历元素
8. jquery遍历 DOM树遍历
9. 遍历DOM元素的children属性遇到的坑
10. 利用DOM来遍历所有元素（children和childNodes的区别）
更多相关文章...
• XML DOM 遍历节点树 - XML DOM 教程
• RSS 历史 - RSS 教程
• C# 中 foreach 遍历的用法
• 算法总结-归并排序