Selecting elements with querySelector

Question

<div id="~" class="dm-post-0 well clearfix post listview"
    data-identifier="~" data-relative="https://url_that_i_want_to_capture"
    data-feed="~">

let convertEntries = () => {
  "use strict";
  let target = [...document.getElementsByClassName("listview")];
  let result = [];
  target.forEach((element) => {
    result.push({
      title: element.querySelector(".list-header strong").textContent,
      url: element.querySelector("#listview").dataset.relative,
    });
  });
  return result;
};

I can now capture just the text within the strong tag. However, I cannot capture the data-relative attribute.

Does this answer your question? [How can I get the values of data attributes in JavaScript code?](https://stackoverflow.com/questions/33760520/how-can-i-get-the-values-of-data-attributes-in-javascript-code) — Heretic Monkey, Jan 05 '23 at 19:55
`var element=document.querySelector("strong").innerText;` or `var element=document.querySelector(".list-header strong").innerText;` — Chris G, Jan 05 '23 at 19:58
`const test = document.querySelector("strong").textContent` (`.innerText` is widely supported, but not standard, use `.textContent` instead) — Scott Marcus, Jan 05 '23 at 20:03
Duplicate for the first question (although asking multiple questions is frowned upon): [getting the inner text of a node](https://stackoverflow.com/q/11745355/215552) — Heretic Monkey, Jan 05 '23 at 20:24

barankibar · Answer 1 · 2023-01-05T20:41:26.100

1

You can use the querySelector method to find the strong element within the div, and then use the textContent property to get the text within it. You can better understand.

Try this:

      // Get the div element
      const div = document.querySelector("div.pull-left.list-header");

      // Get the strong element within the div
      const strong = div.querySelector("strong");

      // Get the text within the strong element
      const text = strong.textContent;
      console.log(text);

You can use "for of" loop for all strong elements

      const strongs = document.querySelectorAll("div.list-header > strong");

      for (const strong of strongs) {
        const text = strong.textContent;
        console.log(text);
      }

edited Jan 05 '23 at 20:41

answered Jan 05 '23 at 20:04

barankibar

56
1
13

1

Or just `document.querySelector("strong").textContent`. – Scott Marcus Jan 05 '23 at 20:05
Yes my way is long way – barankibar Jan 05 '23 at 20:08
1

But `document.querySelector("strong")` will get the first `` element on the page, not necessarily the one within the `.list-header` div. Making barankibar's into a one-liner would be `document.querySelector('div.list-header > strong').textContent` (assuming there is only one `.list-header` in the page) – Stephen P Jan 05 '23 at 20:23

Ahmad ghoneim · Answer 2 · 2023-01-05T20:07:41.850

0

for the first question i'd suggest using

document.querySelector(".list-header strong").textContent;

use .getAttribute("data-relative") to get the value of the attribute "data-relative"

or use .dataset.relative to get the value of the attribute "data-relative"

edited Jan 05 '23 at 20:07

answered Jan 05 '23 at 20:00

Ahmad ghoneim

844
7
13

2

`closest` searches the ancestors of the element, not the descendants. – Heretic Monkey Jan 05 '23 at 20:06
got you my bad edited it – Ahmad ghoneim Jan 05 '23 at 20:08

Chris G · Accepted Answer · 2023-01-05T20:09:22.390

0

You can do it like this var element = document.querySelector(".list-header strong").textContent; to get the text inside the strong element inside your list-header class and var element2 = document.querySelector(".listview").getAttribute('data-relative'); to get the attribute

var element = document.querySelector(".list-header strong").textContent;
var element2 = document.querySelector(".listview").getAttribute('data-relative');
console.log(element);
console.log(element2);

<div class="pull-left list-header" dir="ltr">
  <strong>[Text that I want to capture</strong>
  <span> - [Text that I want to exclude]</span>
</div>

<div id="~" class="dm-post-0 well clearfix post listview" data-identifier="~" data-relative="https://url_that_i_want_to_capture" data-feed="~">

edited Jan 05 '23 at 20:09

answered Jan 05 '23 at 20:06

Chris G

1,598
1
6
18

.innerText is widely supported, but not standard, use .textContent instead – Scott Marcus Jan 05 '23 at 20:06
`data-*` attributes can be obtained in JavaScript using the `.dataset` property so, `document.querySelector("#~").dataset.relative` – Scott Marcus Jan 05 '23 at 20:08
@ScottMarcus `innerText` has been [standardized](//github.com/rocallahan/innerText-spec) for a few years now. – Sebastian Simon Jan 05 '23 at 20:10
yeah I edited it to use `.textContent` instead – Chris G Jan 05 '23 at 20:10
It's not part of the W3C standard. It's in the WHATWG standard, but W3C is more authoritative. Read [this](https://www.w3.org/blog/2019/05/w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/) to see that there is an initiative for the two groups to work together under the W3C. – Scott Marcus Jan 05 '23 at 20:10
Also, `.innerText` and `.textContent` work differently. innerText doesn't include hidden content, while textContent does include it, and textContent includes other text that you wouldn't see on the page. See the [MDN example](https://developer.mozilla.org/docs/Web/API/HTMLElement/innerText#examples) comparing them. – Stephen P Jan 05 '23 at 20:37
Thank you; I have updated my question, but still cannot capture the `data-relative` attribute. – user2319146 Jan 05 '23 at 22:13

Selecting elements with querySelector

3 Answers3