如何通過 DOM get 方法獲取父 div 的特定子項？

Question

我試圖通過 class 名稱訪問特定的孩子，但它不起作用它給了我在 ul 中使用的所有內部 html？

var element = document.getElementsByClassName("inner")[0].innerHTML;
console.log(element);

  <ul id="list" class="inner">
    <p>paragraph</p>
    <li><a href="" class="hom" id="hoo">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Classes</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Gallery</a></li>
    <li><a href="">Teachers</a></li>
    <button ><a href="" id="btn-1" >Join class</a></button>
  </ul>
</nav>

Answer 1

document.getElementsByClassName返回一個數組，其中包含所有表示 class 的elements 。 document.getElementsByClassName('inner')[0]只會選擇具有此類 class （您的ul ）的第一個也是唯一一個元素。

如果您需要訪問該元素的特定子元素，則需要使用children屬性，然后您可以使用與現有子元素匹配的任何索引。

 var element=document.getElementsByClassName("inner")[0].children[0].innerHTML; console.log(element);

 <ul id="list" class="inner"> <p>paragraph</p> <li><a href="" class="hom" id="hoo">Home</a></li> <li><a href="">About</a></li> <li><a href="">Classes</a></li> <li><a href="">Services</a></li> <li><a href="">Gallery</a></li> <li><a href="">Teachers</a></li> <button ><a href="" id="btn-1" >Join class</a></button> </ul> </nav>

我建議不要使用document.getElementsByClassName並只使用document.querySelector('.inner')代替 select 元素。

Answer 2

您可以使用querySelector輕松定位段落 innerHTML，而不是使用getElementsByClassName 。

請參見下面的示例：

 var element = document.querySelector(".inner p").innerHTML; console.log(element);

 <ul id="list" class="inner"> <p>paragraph</p> <li><a href="" class="hom" id="hoo">Home</a></li> <li><a href="">About</a></li> <li><a href="">Classes</a></li> <li><a href="">Services</a></li> <li><a href="">Gallery</a></li> <li><a href="">Teachers</a></li> <button><a href="" id="btn-1" >Join class</a></button> </ul> </nav>