练习牛客网笔试题--前端js--65-dom节点转成json数据

    // 描述

    // 页面上存在id=jsContainer的节点A，系统会随机在节点A中生成文档片段，请按照如下需求实现 dom2json 函数

    // 1、dom2json需要分析整个节点A的dom结构，并将其结构转换为对应的json对象

    // 2、需要获取dom结构的标签名称(tag)，所有属性(attributes)，子节点(children)

    // 3、文档片段中的属性形式均为 name="value"，解析之后的格式为{name: value}, 属性值为String类型，不需要做解析

    // 4、随机生成的文档片段中，只包含 nodeType 为1(element)和3(text)的节点，不需要考虑其他节点类型

    // 5、纯文本也视为一个节点, json格式为 {tag: 'text', content: '文本内容'}，content为文本内容执行trim后的结果，如果该结果为空，则忽略当前节点

    // 6、返回结果中的标签名称不区分大小写

    // 7、如果节点不包含属性值或者子节点，其对应的结果中需要保留attributes以及children字段，例如 {tag: 'div', attributes: {}, children: []}

    // 8、当前界面执行dom2json之后的结果为如下图所示

    // 9、请不要手动修改html和css

    // 10、不要使用第三方插件

1.自己的练习

  <style>
    body {
      margin: 0;
      font-size: 14px;
      padding: 50px;
    }
  </style>

  <div id="jsContainer">
    <ul class="js-test" id="jsParent">
      <li data-index="0">1</li>
      <li data-index="1">2</li>
    </ul>
    <span style="font-weight: bold;">3</span>
    4
  </div>

    function dom2json() {
      var container = document.querySelector('#jsContainer')
      var json = toJson({}, container)
      return json

      function toJson(obj, container) {
        // 标签名和属性值
        obj['tag'] = container.nodeName.toLowerCase()
        obj['attributes'] = {}
        for (var i = 0; i < container.attributes.length; i++) {
          obj['attributes'][container.attributes[i].name] = container.attributes[i].nodeValue
        }
        obj['children'] = []

        // 如果没有children子节点了
        if (container.children.length === 0) {
          if (container.innerText.trim()) { // 如果有文本内容
            var textObj = {}
            textObj['tag'] = 'text'
            textObj['content'] = container.innerText.trim()
            obj['children'].push(textObj)
          }
          return obj
        } else {
          for (var i = 0; i < container.children.length; i++) {
            // 递归
            obj['children'].push(toJson({}, container.children[i]))
          }
          // 判断当前节点中除了children外，是否还有文本节点
          for (var i = 0; i < container.childNodes.length; i++) {
            if (container.childNodes[i].nodeType === 3 && container.childNodes[i].nodeValue.trim()) {
              var textObj = {}
              textObj['tag'] = 'text'
              textObj['content'] = container.childNodes[i].nodeValue.trim()
              obj['children'].push(textObj)
            }
          }
          return obj
        }
      }
    }

2.题解

    function dom2json() {
      let root = document.getElementById('jsContainer');
      return JSON.parse(JSON.stringify(analysisDom(root)))
    }

    function analysisDom(dom) {
      let templete;
      if (dom.nodeType == 1) {
        templete = {
          tag: '',
          attributes: {},
          children: []
        };
        templete.tag = dom.localName;
        let len = dom.attributes.length;
        for (let i = 0; i < len; i++) {
          templete.attributes[dom.attributes.item(i).nodeName] = dom.getAttribute(dom.attributes.item(i).nodeName);
        };
        let cLen = dom.childNodes.length
        if (cLen) {
          for (let i = 0; i < cLen; i++) {
            if (analysisDom(dom.childNodes[i])) {
              templete.children.push(analysisDom(dom.childNodes[i]))
            }
          }
        }
      } else if (dom.nodeType == 3) {
        let data = dom.textContent.trim();
        if (data) {
          templete = {
            tag: 'text',
            content: data
          }
        }
      }
      return templete
    }