通过javascript获取当前元素下方1个元素

我需要访问DOM树并获取当前元素下方1个元素的元素。通过javascript获取当前元素下方1个元素

阅读下面的代码：

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

我想要得到的3个元素 “A”， “B”， “C”， “节点” 下。我该怎么办？

var nodes = node.getElementsByTagName（“div”）< ----我得到所有的div，但没有我需要的3个div。

var nodes = node.childNodes; < ----在IE中可用，但FF包含文本节点

有没有人知道如何解决问题？

来源

2009-02-27 Billy

你可以使用一个函数，排除了所有非元素节点：

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

来源

2009-02-27 07:17:34 Turismo

谢谢，帮了我 - 为其他用户提示 - 这是children.push（孩子）; – dpmguise 2010-11-23 05:53:23

感谢您指出。 – Turismo 2010-11-23 15:06:04

我强烈建议你看看JQuery。您正在寻找的任务在纯Javascript中很简单，但如果您正在做任何额外的DOM遍历，JQuery将为您节省无数小时的挫折。不仅如此，它适用于所有浏览器，并具有非常好的“文档准备”方法。

你用jQuery解决的问题是这样的：

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

它看起来对任何元素具有“节点”然后返回其子女的ID。在这种情况下，children是一个可以使用for循环迭代的JQuery集合。另外你可以使用each（）命令遍历它们。

来源

2009-02-27 07:18:32 Soviut

我认为node.childNodes是正确的开始。你可以（为了使它和FF一起工作），测试你得到的所有子节点的nodeName（和可能的节点类型），跳过文本节点。

你也可以看看一些javascript库，如prototype，它提供了很多有用的功能。

来源

2009-02-27 07:21:00 Ridcully

这是simplier比你想象：

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

来源

2014-01-22 13:19:08

试试这个（已故的答案，但能为别人有用）：

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

来源

2015-12-05 12:52:44

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

，然后使用方法getElementsByClassName，所以在这种情况下：

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

来源

2017-03-12 14:26:58 Phil

我已经添加了一些文字，所以我们可以看到，这是工作，和JavaScript，将增加“添加！“每一个在该基地的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>

来源

2017-10-05 02:23:01

通过javascript获取当前元素下方1个元素

回答

相关问题