在javascript中选择第一个div孩子的第二个孩子[重复]答案

【问题标题】：Selecting second children of first div children in javascript [duplicate]在javascript中选择第一个div孩子的第二个孩子[重复]
【发布时间】：2012-08-16 09:50:00
【问题描述】：

我有一个看起来像这样的 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 放入一个变量中。

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

【问题讨论】：

标签： javascript html parent-child getelementbyid

【解决方案1】：

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

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

延伸阅读：.getElementsByTagName() (from MDN).

【讨论】：

这非常有效。直截了当，我喜欢它:)

【解决方案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];

【讨论】：

children[0] 完美运行 - 谢谢！

【解决方案3】：

我只需要一行原版代码即可。

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

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

【讨论】：

【解决方案4】：

我会选择 jQuery 并最终得到这样的结果：

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

Fiddle

【讨论】：

你能在 vanillajs 中做到这一点吗？

【解决方案5】：

你知道现在有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>

【讨论】：

有用的方法。但语气似乎居高临下。

【解决方案6】：

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

http://jsfiddle.net/MGVw8/

【讨论】：