javascript에 의해 현재 요소보다 한 레벨 아래에있는 요소 가져 오기

Question

DOM 트리에 액세스하여 현재 요소보다 한 레벨 아래에있는 요소를 가져와야합니다.

다음 코드를 읽어

<div id="node"> 
    <div id="a"> 
     <div id="aa"> 
      <div id="ab"> 
       <div id="aba"></div> 
      </div> 
     </div> 
    </div> 
    <div id="b"> 
     <div id="ba"> 
      <div id="bb"> 
       <div id="bba"></div> 
      </div> 
     </div> 
    </div> 
    <div id="c"> 
     <div id="ca"> 
      <div id="cb"> 
       <div id="cba"></div> 
      </div> 
     </div> 
    </div> 
</div> 

내가 "노드"에서, "C"를 "B"를 3 개 요소 "A"를 싶어. 어떻게해야합니까?

var nodes = node.getElementsByTagName ("div") < ---- 나는 필요한 모든 div를 갖지만 필요한 3 개의 div는 얻지 못합니다.

var nodes = node.childNodes; < IE에서 작동하지만 FF에는 텍스트 노드가 포함됩니다.

문제를 해결하는 방법을 아는 사람이 있습니까?

Answer 1

당신은 이외의 모든 요소 노드를 배제하는 기능 사용할 수 있습니다

function getChildNodes(node) { 
    var children = new Array(); 
    for(var child in node.childNodes) { 
     if(node.childNodes[child].nodeType == 1) { 
      children.push(child); 
     } 
    } 
    return children; 
} 

Answer 2

내가보기 엔 권하고 싶습니다 당신이 JQuery 볼을. 당신이하고자하는 일은 순수한 자바 스크립트에서 간단 합니다만, DOM 트래버스를 추가적으로 수행한다면 JQuery가 무수히 많은 좌절감을 줄 것입니다. 뿐만 아니라 모든 브라우저에서 작동하며 "문서 준비"방법이 매우 뛰어납니다. 그것은 "노드"다음 아이를 돌려의 ID로 모든 요소를 ​​찾습니다

$(document).ready(function() { 
    var children = $("#node").children(); 
}); 

: JQuery와 함께 해결

귀하의 문제처럼 보인다. 이 경우 children은 for 루프를 사용하여 반복 할 수있는 JQuery 컬렉션입니다. 또한 each() 명령을 사용하여 반복 할 수 있습니다.

Answer 3

나는 node.childNodes가 시작할 적당한 장소라고 생각한다. 당신은 FF로도 동작하게 만들 수있다. 얻은 모든 자식 노드의 nodeName (그리고 아마도 nodeType)을 테스트하여 텍스트 노드를 건너 뛸 수있다.

또한 많은 유용한 기능을 제공하는 prototype과 같은 일부 자바 스크립트 라이브러리를 살펴볼 수 있습니다.

이

var nodes = node.querySelector("node > div"); 

Answer 4

이것은 당신이 생각하는 것보다 더 간단하다 제 생각에는

var list; 
list=document.getElementById("node").querySelectorAll("#node>div"); 

Answer 5

이 시도 (늦게 대답을하지만, 다른 사람을 위해 유용 할 수 있습니다) :

Answer 6

이가하는 것입니다 할 수있는 가장 쉬운 방법

<div id="node"> 
    <div id="a" class="level_1"> 
     <div id="aa"> 
      <div id="ab"> 
       <div id="aba"></div> 
      </div> 
     </div> 
    </div> 
    <div id="b" class="level_1"> 
     <div id="ba"> 
      <div id="bb"> 
       <div id="bba"></div> 
      </div> 
     </div> 
    </div> 
    <div id="c" class="level_1"> 
     <div id="ca"> 
      <div id="cb"> 
       <div id="cba"></div> 
      </div> 
     </div> 
    </div> 
</div> 

를 다음 방법을 사용하려면 다음 첫 번째 수준 자식 노드에 클래스 이름을 추가 이 경우에, 그래서 getElementsByClassName는 : 나는 텍스트를 추가 한

document.getElementById('node').getElementsByClassName('level_1'); 

Answer 7

그래서 우리는 작업, 자바 스크립트 "추가 추가 할 것입니다 것을 볼 수 있습니다!"기지에서 div의 각각의 바닥에 :

이

var cDiv = document.querySelectorAll('body > div > div'), i; 
 
for (i = 0; i < cDiv.length; i++) 
 
{ 
 
\t cDiv[i].appendChild(document.createTextNode('added!')); 
 
}

<div id="node"> 
 
    <div id="a">a 
 
     <div id="aa">aa 
 
      <div id="ab">ab 
 
       <div id="aba">aba</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div id="b">b 
 
     <div id="ba">ba 
 
      <div id="bb">bb 
 
       <div id="bba">bba</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div id="c">c 
 
     <div id="ca">ca 
 
      <div id="cb">cb 
 
       <div id="cba">cba</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>