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>