我可以使用两个 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) {

  for (var i = 0; i < firstA.length; i++) {

    nodeString = nodeString + firstA[i].innerText + '<br/>';

  }

}

document.getElementById('founded-nodes').innerHTML = nodeString;

#founded-nodes {

  color: brown;

}

<div id='layer1'>

  <div id='a'>layer1 aaa</div>

  <div id='b'>layer1 bbb</div>

</div>

<div id='layer2'>

  <div id='a'>layer2 aaa</div>

  <div id='b'>layer2 bbb</div>

</div>

<div id='layer3'>

  <div id='a'>layer3 aaa</div>

  <div id='b'>layer3 bbb</div>

</div>

<div id="founded-nodes"></div>