js--基于类,树,链表思想,实现一个简单的真实DOM树扫描成对象的类

最新推荐文章于 2022-03-28 09:54:20 发布

黑芝麻饺子

最新推荐文章于 2022-03-28 09:54:20 发布

阅读量206

点赞数

分类专栏： DOM树文章标签：扫描DOM树

本文链接：https://blog.csdn.net/weixin_41108537/article/details/98484520

版权

本文介绍如何利用JavaScript中的类和链表思想，将真实DOM树转换为对象结构。通过DOM操作获取节点并建立层级嵌套，强调合理使用DOM操作以减少查询成本，避免性能开销。在实现过程中遇到的难点包括处理节点属性赋值和兄弟节点的正确遍历，并建议通过学习N叉树和底层算法来深入理解DOM操作。

摘要由CSDN通过智能技术生成

扫描真实DOM树

//简单的节点类
class node {
    constructor(elem){
        this.tagName=elem.tagName;
        this.data = elem.dataset;
        this.id = elem.id;
        this.className = elem.className;
        this.parentNode = elem.parentNode;
    }

    addChildren(node){
        this.children = node; 
    }

    addNextElementSibling(node){
        if(this.NextSibling == undefined){
            this.NextSibling = node;
        }else{
            this.NextSibling.addNextElementSibling(node);
        }
    }
}
//节点树
export default class tree{
    //构造根节点
    constructor({
        elem
    }){
        elem = document.querySelector(elem);
        this.node = new node(elem);
        this.addChildren(elem , this.node);
    }

    //构造时调用用以添加该节点的子节点
    addChildren(VNode , pnode){
        let next;
        for(let key of VNode.children){
            next= new node(key);
            //链表构建树链接
            //如果第一个子类是空