<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.
In the best of the approaches you will need to iterate through all the DOM elements to find the matching content. But I think in your case, you are trying to avoid loading up all the div elements.
You can use XPATH to fetch the matching elements. The document.evaluate API has a full support can be used with an XPATH expression to get the single node in your case.
const foundElement = document.evaluate('//*[contains(text(), "circle")]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE).snapshotItem(0);
console.log(foundElement);<div class="header circle">this is the header</div>
<div class="header circle">this is the header of circle</div>
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>
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:
document.querySelectorAll('div.header.circle') selects all div elements with the classes header and circle. This returns a NodeList.div elements with both the classes header and circle should already narrow down the number of elements you need to loop through.[...document.querySelectorAll('div.header.circle')] creates an array from the NodeList..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.
In one page, I may only have several bindings, but I have to select all. It is not good.
So I come to ask that can I only select the element that is binding to something (variable or function)
Again, there is no built-in way to directly select elements based on their text content in JavaScript. The DOM API does not provide a method for this, likely due to performance reasons. Searching the entire DOM for a text string could be a very slow operation on a large page.
However, if you are using a library or framework that supports virtual DOM, like React or Vue.js, you can manage this more efficiently. You can bind your elements to a state variable, and then update the state when you need to change the elements. This way, you are not directly manipulating the DOM, which is faster and more efficient.
Here is an example using React:
import React, { useState } from 'react';
function MyComponent() {
const [headerText, setHeaderText] = useState('this is the header');
return (
<div className="header circle" onClick={() => setHeaderText('this is the header of circle')}>
{headerText}
</div>
);
}
export default MyComponent;
In this example, the div's text content is bound to the headerText state variable. When the div is clicked, the setHeaderText function is called to update the state, which in turn updates the div's text content.
This approach allows you to manage your elements' text content more efficiently, without having to select and filter all elements in the DOM.
However, it does require using a library or framework that supports the virtual DOM and state management, like React or Vue.js.
const elements = Array.from(document.querySelectorAll("div")).filter(div => div.textContent.includes('circle'));
This will get you the element that has circle in their textContent.
Note: It will fetch all the elements that has "circle" in their textContent. So you can traverse through the array of element accordingly.
Hope it helps!
