39

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

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

4

6 回答 6

49

假设结构是静态的,您可以这样做:

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

进一步阅读:(.getElementsByTagName()来自 MDN)

于 2012-08-21T04:03:29.567 回答
25
 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];
于 2012-08-21T04:03:34.217 回答
14

我只需要一行香草代码就可以了。

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

var requiredDiv = document.getElementById('mainDiv').firstChild.firstChild.nextSibling;
于 2014-03-12T22:38:19.357 回答
7

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

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

小提琴

于 2012-08-21T04:05:09.463 回答
1

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

于 2019-03-23T13:07:50.193 回答
0
var mainDiv = document.getElementById('mainDiv');
var div = maindiv.getElementsByTagName('div')[2];//third div

http://jsfiddle.net/MGVw8/

于 2012-08-21T04:05:09.903 回答