我可以使用两个 id 来获取一个元素吗？

Question

这是我的代码：

<div id='layer1'>

    <div id='a'>

    <div id='b'>

<div id='layer2'>

    <div id='a'>

    <div id='b'>

<div id='layer3'>

    <div id='a'>

    <div id='b'>

我想尝试获取layer1的元素[a]。我可以使用纯 javascript 而不使用 jquery 和其他东西来做到这一点吗？

Answer 1

ID 唯一标识页面上的单个元素。您描述的行为更像是 ID 内的“类”：document.querySelector("#counter-for-drinks .up-arrow")所以如果你想要一个不同的up-arrow，那就是：document.querySelector("#counter-for-burgers .up-arrow")document.querySelector()与 jQuery 类似$(" ")。它还具有document.querySelectorAll()获取所有匹配元素的形式。

Answer 2

您的 HTML 缺少结束标签。另外，您应该使用class而不是id.<div id='layer1'>  <div class='a'></div>  <div class='b'></div>      </div><div id='layer2'>  <div class='a'></div>  <div class='b'></div></div><div id='layer3'>  <div class='a'></div>  <div class='b'></div></div>您可以使用 javascript 来获取元素： document.querySelector("#layer1 .a")

Answer 3

var firstA = document.querySelectorAll('#layer1 #a');var nodeString = '';if (firstA.length > 0) {&nbsp; for (var i = 0; i < firstA.length; i++) {&nbsp; &nbsp; nodeString = nodeString + firstA[i].innerText + '<br/>';&nbsp; }}document.getElementById('founded-nodes').innerHTML = nodeString;#founded-nodes {&nbsp; color: brown;}<div id='layer1'>&nbsp; <div id='a'>layer1 aaa</div>&nbsp; <div id='b'>layer1 bbb</div></div><div id='layer2'>&nbsp; <div id='a'>layer2 aaa</div>&nbsp; <div id='b'>layer2 bbb</div></div><div id='layer3'>&nbsp; <div id='a'>layer3 aaa</div>&nbsp; <div id='b'>layer3 bbb</div></div><div id="founded-nodes"></div>正如上面评论和答案中所说，必须在同一页面上使用单个 id，否则必须使用类。但如果你想实现这一点，你可以看一下代码。