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

注意：这是未经测试的，我需要离开。但是，这应该给你一个评论的起点。

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

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"

    // Create the new element
    var elem = document.createElement(value);

    // If we are further down the hierarchy, simply add the child
    if (key > curDepth) { 
        curElem.appendChild(elem);
    } else if (key == curDepth) {
        // We are a sibling of our current containing element
        // so simply add to the parent 
        curElem.parentElement.appendChild(elem);
        curElem = elem;
    } else if (key < curDepth) {
        // We are at some point ABOVE our current element
        // so start walking UP until we reach the level indicated
        // and then add the element to the parent
        while (curDepth >= key) {
            curElem = curElem.parentElement;
            curDepth--;
        }
        curElem.parentElement.appendChild(elem);
    }
    curElem = elem;
    curDepth = key;
}

Answer 2

非常类似于Forty3的答案，但是更简洁和使用XML文档，而不是HTML文档。

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

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

＆＃13;

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);
};

＆＃13;

<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>

＆＃13;

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

分层创建DOM

2 个答案: