递归将DOM转换为对象的简单尝试

240 阅读1分钟
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root" class="qweqw 345345">
        <div class="test1">
            <div class="test1-1">
                <div id="demo1" class="unit1">test1</div>
                <div id="demo2" class="unit2">test2</div>
                <div id="demo3" class="unit3">test3</div>
            </div>
            <h1 class="team1">test4</h1>
            <h2 id="team2">test5</h2>
            <h5 data-34534="team3">test6</h5>
            <p data-4454="team4">test7</p>
        </div>
    </div>
</body>

</html>

<script>
    let _app = document.querySelector("#root");
    //初始化diff数据
    let _tempDiff1 = []

    function _entityToFictitious(_options, _tempDiff1) {
        let _tempDiff = _changeData(_options, _tempDiff1);
        for (let i = 0; i < _options.childNodes.length; i++) {
            if (_options.childNodes[i].nodeType === 1)
                _entityToFictitious(_options.childNodes[i], _tempDiff[0].children)
        }
    }
    // 将节点信息填充到diff对象中
    function _changeData(_options, _tempDiff1) {
        if (_options.nodeType === 1) {
            let _tempAttr = []
            for (let i = 0; i < _options.attributes.length; i++) {
                let _tempAttrs = _options.attributes;
                _tempAttr.push({ attesName: _tempAttrs[i], attrsValue: _tempAttrs[i].nodeValue })
            }
            _tempDiff1.push({
                tag: _options.tagName.toLowerCase(),
                attrs: _tempAttr,
                type: _options.nodeType,
                data: _options.nodeValue,
                children: [],
            });
            return _tempDiff1;
        }
    }
    // 将节点信息填充到diff对象中

    _entityToFictitious(_app, _tempDiff1)
    console.log(_tempDiff1);
</script>