Question 190539 in Html Question posted in
Some basic documentation can be found here.

Html – how to get dom that textContent contains something text?

<div class="header circle">this is the header</div>
<div class"header circle"> this is the header of circle</div>

how to get the second dom that div textContent contains ‘circle’?

I do know want to get all of the doms and then for(){} to get it.

Tags:

2

Answers


  1. 0

    You can select all html elements with class circle as:

    const allDivWithClasscircle = [...document.querySelectorAll(".circle")];

    then, filter out elements with textContext circle as:

    const elementsWithCircleText = allDivWithClasscircle.filter((el) =>
  el.textContent.includes("circle")
);

    const allDivWithClasscircle = [...document.querySelectorAll(".circle")];

const elementsWithCircleText = allDivWithClasscircle.filter((el) =>
  el.textContent.includes("circle")
);

console.log(elementsWithCircleText);
    <div class="header circle">this is the header</div>
<div class="header circle">this is the header of circle</div>
    Login or Signup to reply.
  2. 0

    yes, but I do not want to get all doms first. only want to the the one.

    In JavaScript, you usually need to retrieve all the elements that match certain criteria and then filter through them to find the specific element you are looking for. However, you can make the process more efficient by using query selectors more specifically and then filtering.

    A functional approach can more concise and easier to reason about, which can lead to cleaner and more maintainable code.

    const filteredElements = [...document.querySelectorAll('div.header.circle')]
.filter(div => div.textContent.includes('circle'))

console.log(filteredElements);
    <div class="header circle">this is the header</div>
<div class="header circle">this is the header of circle</div>

    In detail:

    1. document.querySelectorAll('div.header.circle') selects all div elements with the classes header and circle. This returns a NodeList.
      Retrieve div elements with both the classes header and circle should already narrow down the number of elements you need to loop through.
    2. [...document.querySelectorAll('div.header.circle')] creates an array from the NodeList.
    3. .filter(div => div.textContent.includes('circle')) filters the array to only include div elements whose textContent contains the word ‘circle’.

    This approach uses method chaining and is more concise compared to using a loop with conditionals. It is also more declarative, making it easier to understand what the code is doing. This might not work on older browser though.

    It is important to understand that DOM querying and filtering are inherently procedural processes, meaning that there is no way to directly query for an element based on its textContent without some form of iteration. The goal is to make this process as efficient as possible by narrowing down the search criteria.

    The functional approach does not eliminate the procedural nature of DOM querying and filtering, but it abstracts it.
    When you use .filter(), for example, there is still a loop happening behind the scenes, but you do not have to write the loop yourself. Instead, you provide a function that defines the criteria for filtering, and .filter() takes care of the iteration.

    Warning: in the HTML code you provided, the second div is missing an equals sign (=) in the class attribute. It should be class="header circle" instead of class"header circle". This typo could cause the code not to work as expected.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search