通过getElementById将另一个元素定位

Question

I have two element like this:

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


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

then i want to getElementbyId('test'), However I need 'test' in first div. meanwhile this is an example and my div doesn't have pre-defined order.

Answer 1

It isn't valid to have multiple elements with the same ID, so you can't.

You should use class="test" instead.

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


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

Then do this:

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

Or just this:

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

This will support all modern browsers, including Internet Explorer 8. If you need support for IE 7 and lower, you would need a helper method to get the element by class.

Answer 2

user1689607's comment re multiple ID's withstanding, assuming your html shown above is verbatim (that is to say, you can identify the container divs with a class or id as you have)

This works fine, tested in 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'/>