javascript - 通过 getElementById 定位另一个元素中的元素

Question

我有两个这样的元素：

<div id="first">
    <div id="test"></div>
</div>


<div id="second">
    <div id="test"></div>
</div>

然后我想getElementbyId（'test'），但是我需要第一个div中的'test'。同时这是一个示例，我的 div 没有预定义的顺序。

Answer 1

具有相同 ID 的多个元素是无效的，因此您不能。

你应该class="test"改用。

<div id="first">
    <div class="test"></div>
</div>


<div id="second">
    <div class="test"></div>
</div>

然后这样做：

var t = document.getElementById("second").querySelector(".test");

或者只是这样：

var t = document.querySelector("#second .test");

这将支持所有现代浏览器，包括 Internet Explorer 8。如果您需要对 IE 7 及更低版本的支持，则需要一个帮助方法来按类获取元素。

Answer 2

user1689607的评论re multiple ID's承受，假设你上面显示的html是逐字的（也就是说，你可以用你所拥有的类或id来识别容器div）

这工作正常，在 chrome 中测试。

function mClick()
{
    var mfirst, msecond;

    mfirst = document.getElementById('first');
    msecond = document.getElementById('second');

    alert(mfirst.querySelector('#test').innerHTML);
    alert(msecond.querySelector('#test').innerHTML);
}



<div id="first">
    <div id="test">test1</div>
</div>

<div id="second">
    <div id="test">test2</div>
</div>

<input onclick='mClick();' value='click' type='button'/>