js实现DOM遍历_遍历dom树节点方法

时间: 2019-01-01阅读: 3881标签: dom

遍历DOM节点

遍历DOM节点常用一般用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性。在获取节点nodeValue时要注意,元素节点的子文本节点的nodeValue才是元素节点中文本的内容。下面介绍基于给定的起点对DOM结构执行深度优先(dfs)和广度遍历(BFS)的遍历操作。  

假定我仅遍历 body 且其结构如下:

<body>
    <section class="container">
        <div class="left">
            <div class="menu"></div>
        </div>
        <div class="right">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>
    </section>
</body>


深度遍历(DFS)

遍历完父节点的所有子节点的子节点的子节点…再遍历其兄弟节点。

输出:[section.container, div.left, div.menu, div.right, div.box1, div.box2]

const DFS = {
    nodes: [],
    do (root) {
        for (let i = 0;i < root.childNodes.length;i++) {
            var node = root.childNodes[i];
            // 过滤 text 节点、script 节点
            if ((node.nodeType != 3) && (node.nodeName != 'SCRIPT')) {
                this.nodes.push(node);
                this.do(node);
            }
        }
        return this.nodes;
    }
}
console.log(DFS.do(document.body));


广度遍历(BFS)

遍历完父节点的所有兄弟节点再遍历其子节点。

输出:[section.container, div.left, div.right, div.menu, div.box1, div.box2]

const BFS = {
    nodes: [],
    do (roots) {
        var children = [];
        for (let i = 0;i < roots.length;i++) {
            var root = roots[i];
            // 过滤 text 节点、script 节点
            if ((root.nodeType != 3) && (root.nodeName != 'SCRIPT')) {
                if (root.childNodes.length) children.push(...root.childNodes);
                this.nodes.push(root);
            }
        }
        if (children.length) {
            var tmp = this.do(children);
        } else {
            return this.nodes;
        }
        return tmp;
    }
}
console.log(BFS.do(document.body.childNodes));


非递归版:

const BFS = {
    nodes: [],
    do (roots) {
        var roots = new Array(...roots);
        for (let i = 0;i < roots.length;i++) {
            var root = roots[i];
            // 过滤 text 节点、script 节点
            if ((root.nodeType != 3) && (root.nodeName != 'SCRIPT')) {
                if (root.childNodes.length) roots.push(...root.childNodes);
                this.nodes.push(root);
            }
        }
        return this.nodes;
    }
}
console.log(BFS.do(document.body.childNodes));
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1736

一段监视 DOM 的神奇代码

通过使用此模块,只需将鼠标悬停在浏览器中,即可快速查看DOM元素的属性。基本上它是一个即时检查器。将鼠标悬停在 DOM 元素上会显示其属性!

virtual DOM是如何优化性能的?

浏览器接收到html文件,并转换成DOM树。如果有css还会生成css树。如果遇到script标签,会先判断是async或defer。如果是前者会并行下载并执行js,后者会先下载,等html解析完后顺序执行。 当构建后dom树和css树后

13个需要掌握的Js操作DOM方法

DOM 或文档对象模型是 web 页面上所有对象的根。它表示文档的结构,并将页面连接到编程语言。它的结构是一个逻辑树。每个分支结束于一个节点,每个节点包含子节点、对象。DOM API非常庞大

通过编写简易版本的虚拟DOM,来理解虚拟DOM 的原理

要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂

基于虚拟 DOM 库 (Snabbdom) 的迷你 React

React 是 JavaScript 社区的新成员,尽管 JSX (在 JavaScript 中使用 HTML 语法)存在一定的争议,但是对于虚拟 DOM 人们有不一样的看法。对于不熟悉的人来说,虚拟 DOM 可以描述为某个时刻真实DOM的简单表示。

JavaScript中易混淆的DOM属性及方法对比

ParentNode.children:该属性继承自ParentNode,返回值是一个HTMLCollection实例,成员是当前节点的所有元素子节点,该属性只读,且该属性是动态集合。Node.prototype.childNodes:该属性继承自Node,返回值是一个NodeList实例,成员是当前节点的所有子节点(包括但不限于元素子节点),该属性也是个动态集合。

整理常见 DOM 操作

框架用多了,你还记得那些操作 DOM 的纯 JS 语法吗?看看这篇文章,来回顾一下~ 操作 className,addClass给元素增加 class,使用 classList 属性

vue中使用ref获取dom对象

本文适用于所有使用 Vue 的开发人, 包括初学者。在阅读本文之前,你应该具备一些前提条件:Node.js 10.x或更高版本。在终端或命令提示符下运行 node -v 来验证你的版本;npm 6.7 或以上版本;代码编辑器;我强烈推荐 Visual Studio Code

使用Documentfragment优化DOM操作

DocumentFragment,文档片段接口,一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 使用,就像标准的 document 一样,存储由节点(nodes)组成的文档结构

关于DOM操作是异步的还是同步的相关理解

先列出我的理解,然后再从具体的例子中说明:DOM操作本身应该是同步的(当然,我说的是单纯的DOM操作,不考虑ajax请求后渲染等);DOM操作之后导致的渲染等是异步的(在DOM操作简单的情况下,是难以察觉的)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!