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

Question

In this code, I want to extract the value "Yes, I am a Speaker" through Javascript DOM element. By using getElementById. But, I do not know how to access the value as it is nested inside the list element and the list doesn't have any value and attribute. And, in this code only list has a unique id to select this element. There are several such blocks of code with unique list id. I would appreciate if there is a quick help. I am using this for creating GTM custom javascript variable.

<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

So select the element by the class or element type

 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

You can use the modern querySelector API to select a specific element using the fact that you know the unique ID and the type (or "tagName") of the child element you're trying to access.

MDN article on querySelector

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