Lấy các phần tử chỉ dưới 1 phần tử hiện tại bằng javascript

Question

Tôi cần truy cập cây DOM và nhận các phần tử chỉ 1 cấp bên dưới phần tử hiện tại.

đọc đoạn mã sau:

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

Tôi muốn để có được 3 yếu tố "a", "b", "c" trong mục "nút". Tôi nên làm gì?

var nodes = node.getElementsByTagName ("div") < ---- Tôi nhận được tất cả các div nhưng không phải là 3 divs tôi cần.

var nodes = node.childNodes; < ---- hoạt động trong IE, nhưng FF chứa Văn bản Nút

Có ai biết cách giải quyết sự cố không?

Answer 1

Bạn có thể sử dụng một chức năng mà bác bỏ tất cả các nút không yếu tố:

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

Tôi rất muốn khuyên bạn nên nhìn vào JQuery. Nhiệm vụ bạn đang tìm kiếm là đơn giản trong Javascript thuần túy, nhưng nếu bạn đang thực hiện bất kỳ quá trình duyệt DOM bổ sung nào, JQuery sẽ giúp bạn tiết kiệm vô số giờ thất vọng. Không chỉ vậy nhưng nó hoạt động trên tất cả các trình duyệt và có một phương pháp "tài liệu sẵn sàng" rất tốt.

Vấn đề của bạn được giải quyết với JQuery trông giống như:

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

Có vẻ đối với bất kỳ phần tử với id của "nút", sau đó trả về con của nó. Trong trường hợp này, children là một bộ sưu tập JQuery có thể được lặp qua sử dụng vòng lặp for. Ngoài ra, bạn có thể lặp lại chúng bằng cách sử dụng lệnh each().

Answer 3

Tôi nghĩ node.childNodes là đúng nơi để bắt đầu. Bạn có thể (để làm cho nó làm việc với FF quá), kiểm tra nodeName (và có thể nodeType) của tất cả các nút con bạn nhận được, để bỏ qua các nút văn bản.

Ngoài ra, bạn có thể xem một số thư viện javascript như prototype, cung cấp nhiều chức năng hữu ích.

Answer 4

Đây là đơn giản hơn bạn nghĩ:

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

Answer 5

Hãy thử điều này (câu trả lời muộn, nhưng có thể hữu ích cho những người khác):

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

Answer 6

Theo tôi cách dễ nhất để làm điều này là để thêm tên lớp vào các nút con cấp 1 đầu tiên: các nút con cấp 1:

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

và sau đó sử dụng phương pháp getElementsByClassName, vì vậy trong trường hợp này:

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

Answer 7

Tôi đã thêm một số văn bản để chúng tôi có thể thấy nó đang hoạt động và JavaScript sẽ thêm "được thêm vào!"Xuống đáy của mỗi divs tại căn cứ:

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>