Question

我有一个看起来像这样的HTML：

<div id="mainDiv"> <-- I have this
    <div>
        <div></div>
        <div></div> <-- I need to get this
    </div>
    <span></span>
    <more stuff />
</div>

我正在使用：

var mainDiv = document.getElementById('mainDiv');

因为我需要var中的div，但我还需要将mainDiv中第一个div的第二个div放到变量中。

我怎么能以简单的跨浏览器方式做到这一点？

Answer 1

假设结构是静态的，你可以这样做：

var mainDiv = document.getElementById('mainDiv'),
    childDiv = mainDiv.getElementsByTagName('div')[0],
    requiredDiv = childDiv.getElementsByTagName('div')[1];

进一步阅读：.getElementsByTagName() (from MDN)。

Answer 2

 var mainDiv = document.getElementById('mainDiv');
 var x = mainDiv.children[0].children[1];

或

 var mainDiv = document.getElementById('mainDiv');
 var x = mainDiv.getElementsByTagName('div')[0].getElementsByTagName('div')[1];

Answer 3

我会选择jQuery并最终得到类似的东西：

var getThis = $('#mainDiv > div:eq(0) > div:eq(1)');

Fiddle

Answer 4

我只想用一行香草代码。

适用于任何元素，不仅限于结构中的标记名称。但必须保留元素和层次结构的数量。

var requiredDiv = document.getElementById('mainDiv').firstChild.firstChild.nextSibling;

Answer 5

var mainDiv = document.getElementById('mainDiv');
var div = maindiv.getElementsByTagName('div')[2];//third div

http://jsfiddle.net/MGVw8/

Answer 6

您知道现在有querySelector吗？

console.log(
  mainDiv.querySelector(':nth-child(1) > :nth-child(2)'))

<div id="mainDiv">
  <div>
    <div></div>
    <div>come get me</div>
  </div>
  <!-- more stuff -->
</div>

在javascript中选择第一个div孩子的第二个孩子

6 个答案: