여러 레벨에서 태그 이름이 같은 경우 JavaScript로 JavaScript 구문 분석하기

Question

<?xml version="1.0" encoding="utf-8"?> 
<section food="Fruit"> 
    <desc>Fruits of the World</desc> 
    <fruit> 
    <name>grapes</name> 
    <desc>grow on vines</desc> 
    <fruit> 
     <name>seeded</name> 
     <desc>seeded grapes</desc> 
    </fruit> 
    <fruit> 
     <name>seedless</name> 
     <desc>no seeds</desc> 
     <fruit> 
     <name>seedless Concord blue</name> 
     <desc>deep blue without seeds</desc> 
     </fruit> 
     <fruit> 
     <name>seedless Concord red</name> 
     <desc>rose colored without seeds</desc>    
     </fruit> 
    </fruit> 
    </fruit> 
</section> 

XML 파일 (자바 스크립트 사용)을 다소 복잡한 중첩으로 구문 분석하려고합니다. 제공된 견본은 제가 언급 한 내용입니다. 기본적인 문제는 여러 레벨의 태그가 같은 이름을 가지고 있다는 것입니다. "과일"샘플. 은 중첩 수준과 관련된 정보를 추출 할 수 있어야하며 getElementsByTagNames("fruit")이 아닙니다. 즉, 위의 샘플을 참조하면 태그 이름 "fruit"가 중첩되어 있습니다. 제 목표는 말하자면 두 번째 수준의 "과일"정보 만 추출하는 것입니다.

어떻게하면이 작업을 가장 잘 수행 할 수 있습니까? 노드 사이의 부모/자식 관계를 참조해야한다고 생각하지만 계속 진행하는 방법은 확실하지 않습니다.

미리 감사드립니다.

Answer 1

XPath를 사용하면 사용할 요소의 전체 또는 부분 경로를 사용하여 요소를 선택할 수 있습니다. 예를 들어 :

/section/fruit/fruit/fruit[1]/name 

은 그 수준 ('씨없는 콩코드 블루')에서 발견 된 두 fruit 노드의 첫 번째의 이름을 반환합니다. fruit[2]을 사용하면 다른 노드를 찾을 수 있습니다.

당신은 모든 노드 검색 할 수 있습니다

/section/fruit/fruit[2]/desc 

반환 '더 씨', 그리고

/section/@food 

반환 '과일'(section에서 food 특성의 내용).

당신은 document.evaluate()를 사용하여 XPath 식을 평가할 수 :

var fruitName = document.evaluate("/section/fruit/fruit/fruit/name[1]", document, null, XPathResult.ANY_TYPE, null); 

이 많은 자습서 XPath에 대해이 있고, 당신이 실행하는 방법에 대한 자세한 내용 및 MDN 또는 W3C

에서 그 문서의 DOM evaluate 방법을 구성 할 수 있습니다

Answer 2

최신 브라우저를 타겟팅하는 경우 querySelector (첫 번째 일치 요소 얻기) 또는 querySelectorAll (모두 가져 오기 위해) 스타일의 CSS 스타일을 사용할 수 있습니다.

var first2ndLevelFruit = document.querySelector("section > fruit > fruit") 
console.log(first2ndLevelFruit.querySelector("desc").textContent); 
// => seeded grapes 

var all2ndLevelFruits = document.querySelectorAll("section > fruit > fruit"); 
Array.prototype.forEach.call(all2ndLevelFruits, function(fruit) { 
    console.log(fruit.querySelector("desc").textContent); 
}); 
// => seeded grapes 
// no seeds 

는 이전 버전의 브라우저를 들어, XPath에의 @의 helderdarocha의 제안은 훌륭한 하나입니다 만 2 수준 <fruit> (들)을 얻으려면 당신은 선택 section > fruit > fruit을 사용하십시오.