Dom Navigation using Javascript

Question

如何访问从父元素"id="服务列表"开始的3rd Element(H2(。

我目前正在使用以下方法访问。除了下面之外，还有没有更好的方法可以做。请看我需要纯粹的Javascript。

var z = document.querySelectorAll('section[id="services-list"]');
z[0].firstElementChild.firstElementChild.firstElementChild.textContent

<section id="services-list" class="section container ">
<div class="row">
<div class="col-12 col-md-10 col-lg-6 offset-md-1">
<h2 class="section__title">Services</h2>
</div>
</div>
</section>

问候 斯里

Answer 1

let el = document.getElementById("services-list").getElementsByTagName("h2")[0];
console.log(el);

或使用getElementsByClassName(但EI8-不支持getElementsByClassName(

let el = document.getElementById("services-list").getElementsByClassName("section__title")[0];
console.log(el);

Answer 2

getElementById("")获取该部分。

从这个 DOM 元素开始，您现在可以调用getElementsByClassName("")来查找h2元素

const elem = document.getElementById("services-list").getElementsByClassName("section__title")[0];
console.log(elem);

<section id="services-list" class="section container ">
<div class="row">
<div class="col-12 col-md-10 col-lg-6 offset-md-1">
<h2 class="section__title">Services</h2>
</div>
</div>
</section>

Answer 3

您可以使用复杂的选择器来实现您的目标

var z = document.querySelectorAll('section[id="services-list"] .section__title');
console.log (z[0].textContent)

<section id="services-list" class="section container ">
<div class="row">
<div class="col-12 col-md-10 col-lg-6 offset-md-1">
<h2 class="section__title">Services</h2>
</div>
</div>
</section>

如果您想学习如何以更短的方式选择元素：

var z = window['services-list'] // you id is unique, so we can use shorter way to select it 
.querySelector('h2'); // you have only one h2 inside, so we also can do is shorter
console.log (z.textContent)

<section id="services-list" class="section container ">
<div class="row">
<div class="col-12 col-md-10 col-lg-6 offset-md-1">
<h2 class="section__title">Services</h2>
</div>
</div>
</section>