Get text content of 3rd
element inside of
. With several div containers with the same name

Question

I have the following code.

    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>

In my example the "console.log(kind);" successfully logs the HTML object. Here its not working of course because its not defined. But somehow the childNodes[4].text is undefined. I just want to access the text of the p element with the class "placeDescription" of this specific parentNode. A static try like the following is not possible because I have several HTML ".Wrapper" objects who just differ by content. I think I can access them by just writing the p elements into divs and then with ChildNodes but thats not very clean imo. Why is kind.childNodes[4].text undefined when kind is not ?

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

Thanks for reading this.

It's `.textContent` afaik, not `.text` – Feb 21 '20 at 09:44 — , Feb 21 '20 at 09:44
Oh wow thanks . What a trifle ! Have a nice day. – Bitlord Feb 21 '20 at 09:47 — Bitlord, Feb 21 '20 at 09:47

T.J. Crowder · Accepted Answer · 2020-02-21T09:54:33.037

Your code would work if you changed text to textContent (or innerText on old IE, but it's not quite the same thing) and 4 to 3. But, it's fragile. You can be more precise with querySelector:

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

Live Example:

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>

Live your version, that only looks at the first such match. If you want all of them, you'll need a loop:

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

Live Example:

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>

In a modern browser (or with the polyfill approach I describe in this other answer), you can use forEach instead of the for loop (or even for-of in ES2015+), which makes it a bit more concise:

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

Live Example:

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>

Or with ES2015+ (again, you may need to do some polyfilling per above):

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

Live Example:

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>

I thought about this aswell. Thank you Sir ! Il will try it out . — Bitlord, Feb 21 '20 at 09:53

Get text content of 3rd element inside of . With several div containers with the same name

1 Answers1

Get text content of 3rd
element inside of
. With several div containers with the same name