javascript - 获取 <div> 内第三个 <p> 元素的文本内容。具有多个同名的 div 容器

Question

我有以下代码。

    var bTags = document.getElementsByClassName("Wrapper");
    var kind = bTags[0];
    console.log(kind);
    console.log(kind.childNodes[4].text);

<div class="Wrapper">
        <h3 class="date" id="date">{{date}}</h3>
    <div class="descriptionWrapper">
        <p class="jobDescription">{{job}}</p>
        <p class="jobAreaDescription">{{jobArea}}</p>
        <p class="placeDescription">{{ort}}</p>
        <p class="kindDescription">{{anstellung}}</p>
    </div>
    <div class="jobLink">
        {{#custom_link jobLink}}
            {{linkText}}
        {{/custom_link}}
    </div>
</div>

在我的示例中，“console.log(kind);”成功记录 HTML 对象。当然，它在这里不起作用，因为它没有定义。但不知何故，childNodes[4].text 未定义。我只想使用该特定父节点的“placeDescription”类访问 p 元素的文本。像下面这样的静态尝试是不可能的，因为我有几个 HTML“.Wrapper”对象，它们只是内容不同。 我想我可以通过将 p 元素写入 div 然后使用 ChildNodes 来访问它们，但这在我看来不是很干净。为什么 kind.childNodes[4].text 未定义，而 kind 不是？

const el = document.querySelector('.Wrapper p:nth-of-type(3)'); 如果(el){ console.log(el.textContent) }

感谢您阅读本文。

Answer 1

如果您将 text 更改为 textContent (或旧版 IE 上的 innerText，但它不完全相同)，您的代码就可以工作，并且4 到 3。 但是，它很脆弱。您可以使用 querySelector 更加精确:

var div = document.querySelector(".Wrapper div");
console.log(div.textContent);

实例:

var div = document.querySelector(".Wrapper div");
console.log(div.textContent);

<div class="Wrapper">
        <h3 class="date" id="date">{{date}}</h3>
    <div class="descriptionWrapper">
        <p class="jobDescription">{{job}}</p>
        <p class="jobAreaDescription">{{jobArea}}</p>
        <p class="placeDescription">{{ort}}</p>
        <p class="kindDescription">{{anstellung}}</p>
    </div>
    <div class="jobLink">
        {{#custom_link jobLink}}
            {{linkText}}
        {{/custom_link}}
    </div>
</div>

实时显示您的版本，仅查看第一个此类匹配。如果您想要所有这些，您将需要一个循环:

var wrappers = document.querySelectorAll(".Wrapper"); // Or .getElementsByClassName("Wrapper");
for (var i = 0; i < wrappers.length; ++i) {
    var div = wrappers[i].querySelector("div");
    console.log(div.textContent);
}

实例:

var wrappers = document.querySelectorAll(".Wrapper"); // Or .getElementsByClassName("Wrapper");
for (var i = 0; i < wrappers.length; ++i) {
    var div = wrappers[i].querySelector("div");
    console.log(div.textContent);
}

<div class="Wrapper">
        <h3 class="date" id="date">{{date}}</h3>
    <div class="descriptionWrapper">
        <p class="jobDescription">{{job}} first</p>
        <p class="jobAreaDescription">{{jobArea}}</p>
        <p class="placeDescription">{{ort}}</p>
        <p class="kindDescription">{{anstellung}}</p>
    </div>
    <div class="jobLink">
        {{#custom_link jobLink}}
            {{linkText}}
        {{/custom_link}}
    </div>
</div>
<div class="Wrapper">
        <h3 class="date" id="date">{{date}}</h3>
    <div class="descriptionWrapper">
        <p class="jobDescription">{{job}} second</p>
        <p class="jobAreaDescription">{{jobArea}}</p>
        <p class="placeDescription">{{ort}}</p>
        <p class="kindDescription">{{anstellung}}</p>
    </div>
    <div class="jobLink">
        {{#custom_link jobLink}}
            {{linkText}}
        {{/custom_link}}
    </div>
</div>
<div class="Wrapper">
        <h3 class="date" id="date">{{date}}</h3>
    <div class="descriptionWrapper">
        <p class="jobDescription">{{job}} third</p>
        <p class="jobAreaDescription">{{jobArea}}</p>
        <p class="placeDescription">{{ort}}</p>
        <p class="kindDescription">{{anstellung}}</p>
    </div>
    <div class="jobLink">
        {{#custom_link jobLink}}
            {{linkText}}
        {{/custom_link}}
    </div>
</div>

在现代浏览器中(或使用 polyfill 方法 I describe in this other answer )，您可以使用 forEach 而不是 for 循环(甚至是 for-of 在 ES2015+ 中)，这使得它更加简洁:

document.querySelectorAll(".Wrapper").forEach(function(wrapper) {
    var div = wrapper.querySelector("div");
    console.log(div.textContent);
});

实例:

document.querySelectorAll(".Wrapper").forEach(function(wrapper) {
    var div = wrapper.querySelector("div");
    console.log(div.textContent);
});

<div class="Wrapper">
        <h3 class="date" id="date">{{date}}</h3>
    <div class="descriptionWrapper">
        <p class="jobDescription">{{job}} first</p>
        <p class="jobAreaDescription">{{jobArea}}</p>
        <p class="placeDescription">{{ort}}</p>
        <p class="kindDescription">{{anstellung}}</p>
    </div>
    <div class="jobLink">
        {{#custom_link jobLink}}
            {{linkText}}
        {{/custom_link}}
    </div>
</div>
<div class="Wrapper">
        <h3 class="date" id="date">{{date}}</h3>
    <div class="descriptionWrapper">
        <p class="jobDescription">{{job}} second</p>
        <p class="jobAreaDescription">{{jobArea}}</p>
        <p class="placeDescription">{{ort}}</p>
        <p class="kindDescription">{{anstellung}}</p>
    </div>
    <div class="jobLink">
        {{#custom_link jobLink}}
            {{linkText}}
        {{/custom_link}}
    </div>
</div>
<div class="Wrapper">
        <h3 class="date" id="date">{{date}}</h3>
    <div class="descriptionWrapper">
        <p class="jobDescription">{{job}} third</p>
        <p class="jobAreaDescription">{{jobArea}}</p>
        <p class="placeDescription">{{ort}}</p>
        <p class="kindDescription">{{anstellung}}</p>
    </div>
    <div class="jobLink">
        {{#custom_link jobLink}}
            {{linkText}}
        {{/custom_link}}
    </div>
</div>

或者使用 ES2015+(同样，您可能需要做一些 polyfilling per above ):

for (const wrapper of document.querySelectorAll(".Wrapper")) {
    const div = wrapper.querySelector("div");
    console.log(div.textContent);
}

实例:

for (const wrapper of document.querySelectorAll(".Wrapper")) {
    const div = wrapper.querySelector("div");
    console.log(div.textContent);
}

<div class="Wrapper">
        <h3 class="date" id="date">{{date}}</h3>
    <div class="descriptionWrapper">
        <p class="jobDescription">{{job}} first</p>
        <p class="jobAreaDescription">{{jobArea}}</p>
        <p class="placeDescription">{{ort}}</p>
        <p class="kindDescription">{{anstellung}}</p>
    </div>
    <div class="jobLink">
        {{#custom_link jobLink}}
            {{linkText}}
        {{/custom_link}}
    </div>
</div>
<div class="Wrapper">
        <h3 class="date" id="date">{{date}}</h3>
    <div class="descriptionWrapper">
        <p class="jobDescription">{{job}} second</p>
        <p class="jobAreaDescription">{{jobArea}}</p>
        <p class="placeDescription">{{ort}}</p>
        <p class="kindDescription">{{anstellung}}</p>
    </div>
    <div class="jobLink">
        {{#custom_link jobLink}}
            {{linkText}}
        {{/custom_link}}
    </div>
</div>
<div class="Wrapper">
        <h3 class="date" id="date">{{date}}</h3>
    <div class="descriptionWrapper">
        <p class="jobDescription">{{job}} third</p>
        <p class="jobAreaDescription">{{jobArea}}</p>
        <p class="placeDescription">{{ort}}</p>
        <p class="kindDescription">{{anstellung}}</p>
    </div>
    <div class="jobLink">
        {{#custom_link jobLink}}
            {{linkText}}
        {{/custom_link}}
    </div>
</div>