Javascript-单击另一个子元素后获取子元素的值

Question

这必须非常简单，但是我仍然无法弄清楚...下面是一个示例和我尝试过的操作-我想要的就是在单击<div class="text"后获得<a id="{value}".. <div class="text" DIV。

 .h { background: lightblue; } .pb { display: inline-block } .cb { clear: both } .text { background: #ffc; border: 1px solid #000 } 

 <article> <div class="h"> <div class="pb">user</div> &nbsp; <div class="pb">date <a id="m75813" href="#m75183">#</a></div> </div> <div class="text" onclick="alert(parentNode.parentElement.firstChild.childNodes[1].a.id);"> After clicking on the yellow background, the value from [a id="m75813"] (ie. 'm75813') should apppear. Sentence text.<br> Other sample.<br> Hello world. </div> </article> 

Answer 1

由于该元素具有ID，因此您可以通过该ID查找它。 ID必须是唯一的（但请继续阅读，我怀疑您不想这样做） ：

alert(document.getElementById('m75813').id);

 .h { background: lightblue; } .pb { display: inline-block } .cb { clear: both } .text { background: #ffc; border: 1px solid #000 } 

 <article> <div class="h"> <div class="pb">user</div> &nbsp; <div class="pb">date <a id="m75813" href="#m75183">#</a></div> </div> <div class="text" onclick="alert(document.getElementById('m75813').id);"> After clicking on the yellow background, the value from [a id="m75813"] (ie. 'm75813') should apppear. Sentence text.<br> Other sample.<br> Hello world. </div> </article> 

但是，如果您有很多带有不同ID的ID，而这正是您要查找的ID，则可以通过转到父节点并使用querySelector查找a元素来实现：

alert(this.parentNode.querySelector('a').id);

 .h { background: lightblue; } .pb { display: inline-block } .cb { clear: both } .text { background: #ffc; border: 1px solid #000 } 

 <article> <div class="h"> <div class="pb">user</div> &nbsp; <div class="pb">date <a id="m75813" href="#m75183">#</a></div> </div> <div class="text" onclick="alert(this.parentNode.querySelector('a').id);"> After clicking on the yellow background, the value from [a id="m75813"] (ie. 'm75813') should apppear. Sentence text.<br> Other sample.<br> Hello world. </div> </article> <article> <div class="h"> <div class="pb">user</div> &nbsp; <div class="pb">date <a id="m54684" href="#m54684">#</a></div> </div> <div class="text" onclick="alert(this.parentNode.querySelector('a').id);"> After clicking on the yellow background, the value from [a id="m54684"] (ie. 'm54684') should apppear. Sentence text.<br> Other sample.<br> Hello world. </div> </article> 

在这两种情况下，我都建议使用现代事件处理方式，而不要使用onxyz式处理程序。 例如：假设所有这些article元素都在某种容器中。 我们可以挂钩click容器上，然后找到该div点击通过，并找到a与此相关的div ：

document.getElementById("container").addEventListener("click", function(e) {
  var element = e.target;
  while (element != this) {
    if (element.matches("div.text")) {
      alert(element.parentNode.querySelector("a").id);
      break;
    }
    element = element.parentNode;
  }
});

 document.getElementById("container").addEventListener("click", function(e) { var element = e.target; while (element != this) { if (element.matches("div.text")) { alert(element.parentNode.querySelector("a").id); break; } element = element.parentNode; } }); 

 .h { background: lightblue; } .pb { display: inline-block } .cb { clear: both } .text { background: #ffc; border: 1px solid #000 } 

 <div id="container"> <article> <div class="h"> <div class="pb">user</div> &nbsp; <div class="pb">date <a id="m75813" href="#m75183">#</a></div> </div> <div class="text"> After clicking on the yellow background, the value from [a id="m75813"] (ie. 'm75813') should apppear. Sentence text.<br> Other sample.<br> Hello world. </div> </article> <article> <div class="h"> <div class="pb">user</div> &nbsp; <div class="pb">date <a id="m54684" href="#m54684">#</a></div> </div> <div class="text"> After clicking on the yellow background, the value from [a id="54684"] (ie. '54684') should apppear. Sentence text.<br> Other sample.<br> Hello world. </div> </article> </div> 

Answer 2

你可以这样做：

<div class="text" onclick="alert(document.getElementById('m75813').id);">
    After clicking on the yellow background, the value from [a id="m75813"] (ie. 'm75813') should apppear. Sentence text.<br> Other sample.<br> Hello world.
  </div>

Answer 3

发生的情况是您的查询返回的是文本节点 （包括换行符在内的空白）以及HTML节点，因此您的元素不在所需的索引处。 querySelector('a')是更简单的方法，但是如果您确实想通过它在DOM结构中的位置来选择目标，则可以分别使用firstChildElement和children而不是firstChild和childNodes ，因为它们排除了文本节点：

this.parentElement.firstElementChild.children[1].firstElementChild.id

 .h { background: lightblue; } .pb { display: inline-block } .cb { clear: both } .text { background: #ffc; border: 1px solid #000 } 

 <article> <div class="h"> <div class="pb">user</div> &nbsp; <div class="pb">date <a id="m75813" href="#m75183">#</a></div> </div> <div class="text" onclick="alert(this.parentElement.firstElementChild.children[1].firstElementChild.id);"> After clicking on the yellow background, the value from [a id="m75813"] (ie. 'm75813') should apppear. Sentence text.<br> Other sample.<br> Hello world. </div> </article>