这个问题在这里已有答案:
我有一个看起来像这样的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放到变量中。
我怎么能以简单的跨浏览器方式做到这一点?
假设结构是静态的,你可以这样做:
var mainDiv = document.getElementById('mainDiv'),
childDiv = mainDiv.getElementsByTagName('div')[0],
requiredDiv = childDiv.getElementsByTagName('div')[1];
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];
我只想用一行香草代码。
适用于任何元素,不仅限于结构中的标记名称。但必须保留元素和层次结构的数量。
var requiredDiv = document.getElementById('mainDiv').firstChild.firstChild.nextSibling;
var mainDiv = document.getElementById('mainDiv');
var div = maindiv.getElementsByTagName('div')[2];//third div
你知道现在有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>