如何从此Javascript / HTML代码中提取嵌套的值？

Question

在此代码中，我想通过Javascript DOM元素提取值“是的，我是发言人”。 通过使用getElementById。 但是，我不知道如何访问该值，因为它嵌套在list元素内，并且列表没有任何值和属性。 并且，在此代码中，只有列表具有唯一的ID才能选择此元素。 有几个具有唯一列表ID的代码块。 如果有快速的帮助，我将不胜感激。 我正在使用它来创建GTM自定义javascript变量。

<li id="u5mH6ZV1aX21" class="container step2" style="width: 232px;">
  <input type="hidden" name="value" value="Yes, I am a smoker" autocomplete="off">
  <div class="letter"><span>A</span></div>
  <span class="label">Yes, I am a smoker</span>
  <span class="tick"></span>
  <div class="aux">
    <div class="bg"></div>
    <div class="bd"></div>
  </div>
</li>

Answer 1

因此，请根据类别或元素类型选择元素

 var t1 = document.querySelector("#u5mH6ZV1aX21 input").value var t2 = document.querySelector("#u5mH6ZV1aX21 .label").textContent console.log(t1, t2); 

 <ul> <li id="u5mH6ZV1aX21" class="container step2" style="width: 232px;"> <input type="hidden" name="value" value="Yes, I am a smoker" autocomplete="off"> <div class="letter"><span>A</span></div> <span class="label">Yes, I am a smoker</span> <span class="tick"></span> <div class="aux "> <div class="bg"></div> <div class="bd"></div> </div> </li> </ul> 

Answer 2

您可以使用现代的querySelector API来选择特定的元素，因为您知道您要访问的子元素的唯一ID和类型（或“ tagName”）。

有关querySelector的MDN文章

document.querySelector("#u5mH6ZV1aX21 input").value