DOM을 계층 적으로 만들기

Question

키와 값의 목록이 있으며이 정보를 기반으로 XML을 만들려고합니다.

내 목록 리턴 :

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

그리고 내가 XML을 생성하려면 : 이러한 요소를 순회하는 계층 적 XML 문서를 생성 할 때,

<xml> 
    <person> 
     <information> 
      <name></name> 
      <surname></surname> 
     </information> 
     <address> 
      <street></street> 
      <country></country> 
     </address> 
    </person> 
</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의 대답과 유사하지만 HTML 문서가 아닌 간결하고 사용하기 쉬운 XML 문서입니다. 문서 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. 이것은 데이터 - * 속성에 대한 지원 부족으로 인해 IE 10 이하에서 실행되지 않습니다.

Answer 2

참고 :이 코드는 테스트되지 않았으므로 나에게 조치해야합니다. 그러나 이것은 당신에게 코멘트가있는 출발점을 주어야합니다.

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