javascript - getElementByIdによって別の要素の要素をターゲットにする

Question

私はこのような2つの要素を持っています：

<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を含むすべての最新のブラウザーをサポートします。IE7以下のサポートが必要な場合は、クラスごとに要素を取得するためのヘルパーメソッドが必要になります。

Answer 2

user1689607のコメントは、複数のIDに耐えることができます。ただし、上記のhtmlが逐語的であると仮定します（つまり、コンテナーdivをクラスまたはIDで識別できます）。

これは正常に動作し、クロムでテストされています。

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'/>