在JavaScript中选择第一个div子元素的第二个子元素

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');

因为我需要将那个div存入一个变量中，但我也需要将位于mainDiv内第一个div中的第二个div存入一个变量中。如何以简单的跨浏览器方式实现？

- James Harzs

Answer 1

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

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

进一步阅读：.getElementsByTagName()（来自MDN）。

- nnnnnn

---

这个完美地运作了。直截了当，我喜欢它 :) - Halo

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

- Chao Zhang

---

children[0] 工作得非常好 - 谢谢！ - Leo

children[0] 对我来说正常工作。谢谢，这帮了我很多。 - Gustavo Martínez

Answer 3

我只需要用一行基础代码就可以了。

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

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

- TeeJay

Answer 4

我会选择jQuery，结果可能像这样：

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

Fiddle

- Ja͢ck

---

你现在能用原生JS做到这个吗？ - SuperUberDuper

Answer 5

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

http://jsfiddle.net/MGVw8/

- Musa

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>

- vdegenne

---

有用的方法，但语气似乎很傲慢。 - avalanche1