js 对象模拟 DOM 树实现 render 方法调用 render 方法将 js 对象转真正的 DOM 节点

原创已于 2025-03-11 12:52:10 修改 · 969 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

于 2020-02-23 15:15:06 首次发布

前端同时被 2 个专栏收录

29 篇文章

订阅专栏

javascript

27 篇文章

订阅专栏

本文探讨如何利用JavaScript模拟DOM树结构，并详细阐述如何编写一个render方法，将JavaScript对象转换为实际的DOM节点，实现从抽象到可视化的转变。

var ul = el('ul', { id: 'list' }, [
    el('li', { class: 'item' }, ['item 1']),
    el('li', { class: 'item' }, ['item 2']),
    el('li', { class: 'item' }, ['item 3']),
])
var ulRoot = ul.render();
document.body.appendChild(ulRoot);

function Element(tagName, attributes, children) {
    this.tagName = tagName;
    this.attributes = attributes;
    this.children = children;
}

Element.prototype.render = function () {
    let root = document.createElement(this.tagName);
    let attributes = this.attributes;
    let children = this.children;
    for (let k in attributes) {
        if (attributes.hasOwnProperty(k)) {
            root.setAttribute(k, attributes[k]);
        }
    }
    children.forEach((item,index)=>{
        let itemDom = null;
        if(item instanceof Element) {
            itemDom = item.render();
        } else {
            itemDom = document.createTextNode(item)
        }
        root.appendChild(itemDom)
    })
    return root;
}

var el = function (tagName, attributes, children) {
    return new Element(tagName, attributes, children)
}


var ul = el('ul', { id: 'list' }, [
    el('li', { class: 'item' }, ['item 1']),
    el('li', { class: 'item' }, ['item 2']),
    el('li', { class: 'item' }, ['item 3']),
])


var ulRoot = ul.render()
console.log(ulRoot)