创建一个超简单的虚拟DOM实例

最新推荐文章于 2023-08-09 19:07:25 发布

苏喂苏喂苏喂su

最新推荐文章于 2023-08-09 19:07:25 发布

阅读量1.5k

点赞数 1

分类专栏： DOM 原生JavaScript 文章标签：虚拟DOM

本文链接：https://blog.csdn.net/joyvonlee/article/details/93884088

版权

原生JavaScript 同时被 2 个专栏收录

59 篇文章 2 订阅

订阅专栏

DOM

11 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>创建一个超简单的虚拟DOM实例</title>
</head>
<body>
<script>
function Element({tagName, props, children}){
    if(!(this instanceof Element)){
        return new Element({tagName, props, children})
    }
    this.tagName = tagName;
    this.props = props || {};
    this.children = children || [];
}


Element.prototype.render = function(){
    var el = document.createElement(this.tagName),
        props = this.props,
        propName,
        propValue;
    for(propName in props){
        propValue = props[propName];
        el.setAttribute(propName, propValue);
    }
    this.children.forEach(function(child){
        var childEl = null;
        if(child instanceof Element){
            childEl = child.render();
        }else{
            childEl = document.createTextNode(child);
        }
        el.appendChild(childEl);
    });
    return el;
};

var elem = Element({
    tagName: 'ul',
    props: {'class': 'list'},
    children: [
        Element({tagName: 'li', children: ['list1']}),
        Element({tagName: 'li', children: ['list2']})
    ]
});
document.querySelector('body').appendChild(elem.render());

</script>


</body>
</html>