javascript - 分层创建 DOM

Question

我有一个键和值列表，我打算根据此信息创建一个 xml。

我的列表返回:

1 person
2 information
3 name
3 surname
2 address
3 street
3 country

我想生成一个 xml:

<xml>
    <person>
        <information>
            <name></name>
            <surname></surname>
        </information>
        <address>
            <street></street>
            <country></country>
        </address>
    </person>
</xml>

我有一个元素列表，而遍历这些元素将分层创建 xml 文档。我已经有这个代码:

var elements = document.getElementsByClassName('elements');
var xml = document.createElement('xml');

for (var i = 0; i < elements.length; i++) {
    var key = elements[i].getAttribute('data-key');
    var value = elements[i].getAttribute('data-value');

    console.log(key +' -> '+ value);

    // HERE: create new elements appendChild "var xml"
}

Answer 1

与 Forty3 的答案非常相似，但更简洁，并且使用 XML 文档，而不是 HTML 文档。

请注意，如果 document 是 HTML 文档，则 document.createElement 会将标记名更改为小写，而如果它是 XML 文档，则保留标记大小写。此外，在 HTML 文档中，它依赖于对自定义和未知标记名的支持，而这些标记名可能不可用，因此最好使用 XML 文档。

我已经编写了一个数据源，它似乎来自文档，因此希望它能够合理地近似您正在使用的内容。我已经在关卡上进行了一些最低限度的验证，应该对输入进行更多验证以确保其符合某种标准化格式。

function buildDoc() {

  // Create an XML document to use to create the elements
   var doc = document.implementation.createDocument(null, null, null);

  var data = document.getElementsByClassName('elements');
  var root = doc.createElement('xml');
  var parent = root;
  var level = 0;
  var node, tagname;

  for (var i=0, iLen=data.length; i<iLen; i++) {
    dataNode = data[i];
    node = doc.createElement(dataNode.dataset.value);        
    nodeLevel = dataNode.dataset.key;

    // Can only add nodes at level 1 or higher
    if (nodeLevel <= 0) {
      console.log('Level ' + nodeLevel + ' is invalid. Can only create nodes at level 1 or higher');
      return;
    }

    // If node at same level, is sibling of current parent
    // If node at lower level, go back levels and parents to same level
    // Append node, then make node the parent
    if (nodeLevel <= level) {
      while (nodeLevel < level) {
        parent = parent.parentNode;
        --level;
      }
      parent = parent.parentNode.appendChild(node);

    // If node at higher level, is child of current parent
    // Next node might higher again, so set parent to node
    } else if (nodeLevel > level){
      parent = parent.appendChild(node);
      level = nodeLevel;
    }
  }
  // Return the root
  return root;
}


window.onload = function() {
  console.log(buildDoc().outerHTML);
};

<div>
  <span class="elements" data-key="1" data-value="Person">1 person</span><br>
  <span class="elements" data-key="2" data-value="information">2 information</span><br>
  <span class="elements" data-key="3" data-value="name">3 name</span><br>
  <span class="elements" data-key="3" data-value="surname">3 surname</span><br>
  <span class="elements" data-key="2" data-value="address">2 address</span><br>
  <span class="elements" data-key="3" data-value="street">3 street</span><br>
  <span class="elements" data-key="3" data-value="country">3 country</span><br>
  <span class="elements" data-key="2" data-value="address">2 address</span><br>
  <span class="elements" data-key="3" data-value="street">3 street</span><br>
  <span class="elements" data-key="3" data-value="country">3 country</span><br>
</div>

PS。由于缺乏对 data-* 属性的支持，这可能无法在 IE 10 或更低版本中运行。