Question 110412 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – Selecting elements with querySelector

<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.

Tags:

3

Answers


  1. 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"

    Login or Signup to reply.
  2. 0

    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);
      }
    Login or Signup to reply.
  3. 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="~">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search