javascript - 获取 中第三个 元素的文本内容。具有多个同名的 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 是未定义的。我只想使用这个特定 parentNode 的类“placeDescription”访问 p 元素的文本。像下面这样的静态尝试是不可能的，因为我有几个 HTML“.Wrapper”对象，它们只是内容不同。
我想我可以通过将 p 元素写入 div 然后使用 ChildNodes 来访问它们，但这不是很干净的imo。为什么 kind.childNodes[4].text 在 kind 不是时未定义？
const el = document.querySelector('.Wrapper p:nth-of-type(3)');
if (el) {
console.log(el.textContent)
}
感谢您阅读本文。

Answer 1

如果您更改 text，您的代码将起作用至 textContent (或 innerText 在旧的 IE 上，但它不完全相同)和 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循环(甚至 ES2015+ 中的 for-of)，这使它更简洁一些:

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>