Question

如何从父元素开始访问第3个元素（H2）＆＃34; id =＆＃34; services-list＆＃34;。

Iam目前使用以下方法访问。除了以下方法之外，还有更好的方法。请参阅我需要纯粹的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>

此致 SREE

Answer 1

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 2

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

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>

Answer 3

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);

使用Javascript进行Dom导航

3 个答案: