JavaScript练习 - convertHTMLToJson

作者: 张中华 | 来源:发表于2021-06-16 06:33 被阅读0次

JavaScript练习 - convertHTMLToJson
JS-Basic
第三次任务总结
JavaScript练习
前端学习-javascript
任务三——JS练习（个人）
JS基础练习
Flutter入门知识—Dart语言基础入门
Javascript 练习
斌斌学院JS-task5

在使用vue时，我们常说到的一个概念就是虚拟DOM。那么虚拟DOM是什么?虚拟DOM就是根据真实DOM模拟出的一个JSON对象。在操作DOM时，不是直接去操作DOM，而是先修改虚拟DOM，然后再选择性的更新真实DOM。

为什么这么做？操作真实DOM要比操作虚拟DOM慢？
在写原生JS的时候，我们要可能的避免频繁的直接操作DOM。因为操作DOM可能会经过浏览器的重排重绘，消耗性能，现在JS中处理会提效很多。所以虚拟DOM的出现，为此提供了便利。

那么虚拟DOM是怎么来的呢？这里做一个简单的实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container" id="container">
        <article class="article" id="article">
            <header class="header">头部</header>
            <section class="section">章节1</section>
            <section class="section">章节2</section>
            <section class="section">章节3</section>
            <footer class="footer"><div>备案</div><div>链接</div></footer>
        </article>
    </div>

    <script>
        function convertHtmlToJson(node) {
            let result = {};
            result.classNames = node.className;
            result.id = node.id;
            result.nodeValue = node.firstChild.nodeValue;
            result.tagName = node.tagName;
            result.children = [];
            if (node.children.length > 0) {
                for ( let child of node.children) {
                    child.localName.toLowerCase() !== 'script' && 
                    result.children.push(convertHtmlToJson(child));
                }
            }

            return result;
        }

        const result = convertHtmlToJson(document.body);
        console.log(result);
    </script>
</body>
</html>