我可以使用两个 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&nbsp;.up-arrow")所以如果你想要一个不同的up-arrow，它是：document.querySelector("#counter-for-burgers&nbsp;.up-arrow")document.querySelector()是类似于 jQuery 的东西$(" ")。它还具有document.querySelectorAll()获取所有匹配元素的形式。

Answer 2

您的 HTML 缺少结束标记。您可以随时在此处验证您的代码。此外，您应该使用class而不是id.<div id='layer1'>&nbsp; <div class='a'></div>&nbsp; <div class='b'></div>&nbsp; &nbsp; &nbsp;&nbsp;</div><div id='layer2'>&nbsp; <div class='a'></div>&nbsp; <div class='b'></div></div><div id='layer3'>&nbsp; <div class='a'></div>&nbsp; <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>