Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Reading textContent vs. nodeValue
(version: 1)
Comparing performance of:
Read textContent vs Read nodeValue
Created:
one year ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="div">test</div>
Script Preparation code:
var div = document.getElementById('div');
Tests:
Read textContent
div.textContent
Read nodeValue
div.firstChild.nodeValue
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Read textContent
Read nodeValue
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
20 days ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:152.0) Gecko/20100101 Firefox/152.0
Browser/OS:
Firefox 152 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=633225" width="100%" height="500px"></iframe>
Read textContent
2178.6M/s
Read nodeValue
2178.5M/s
View exact numbers
Test name
Executions per second
✓
Read textContent
2,178,580,736 Ops/sec
Read nodeValue
2,178,482,432 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark provided compares two different methods for reading text content from a DOM element in JavaScript: using `textContent` and using `nodeValue` of a node. Let's break down the components of the benchmark and what each method entails. ### Benchmark Overview #### Methods Compared 1. **`div.textContent`**: This property retrieves the text content of the specified `div` element. It returns the text of all child nodes, concatenated into a single string, while ignoring any HTML tags. This is a convenient way to access the visible text of an element directly. 2. **`div.firstChild.nodeValue`**: This approach accesses the `firstChild` of the `div` and retrieves the `nodeValue`, which provides the text content of that particular child node. In this case, it effectively retrieves the text content of the first child of the `div`, which should be a text node containing the string "test". ### Benchmark Results From the benchmark results: - **Read nodeValue**: 30,536,768 executions per second. - **Read textContent**: 22,351,784 executions per second. These results indicate that reading `nodeValue` is faster than `textContent` in this instance on the specific setup and browser tested. ### Pros and Cons of Each Method #### `textContent` **Pros**: - Directly retrieves the textual content of the element and all of its children in a single call. - More straightforward to use when you want the combined text of all child nodes. - Automatically handles all child node text concatenation and ignores HTML tags. **Cons**: - Slightly less performant compared to `nodeValue`, at least in this benchmark. - Can be less granular if you only need the text from a specific child. #### `nodeValue` **Pros**: - More performant in this case as shown by the benchmark results. - Provides direct access to the text node, which can be useful in certain DOM manipulations where finer control is required. **Cons**: - Needs knowledge of the DOM structure (like checking for the first child) to effectively retrieve the desired text. - Does not automatically concatenate text from multiple child nodes, which could lead to additional complexity if not handled properly. ### Other Considerations - The choice between `textContent` and `nodeValue` might depend on the specific structure of the DOM and the context in which the methods are being used. If you are retrieving text from an element that may have multiple child nodes, `textContent` is generally easier to use. - Developers should also consider potential changes in performance across different browsers and devices, as well as real-world usage where the complexity of the DOM may vary greatly. ### Alternatives Other approaches for reading text from the DOM include: - **`innerText`**: This property retrieves the visible text content of an element, factoring in CSS styling like visibility (e.g., hidden elements won't be included). This is more focused on user-visible text than `textContent`, but may also be less performant. - **Using libraries like jQuery**: Libraries can provide more cross-browser compatibility and simplified syntax for DOM manipulation, though they often come with performance overhead compared to native DOM methods. In summary, while both methods serve the purpose of retrieving text content, the choice of which to use may depend on the specific needs of the application regarding performance, complexity, and ease of use.
Related benchmarks
textContent vs nodeValue vs data
textContent vs. innerText vs. nodeValue
textContent vs nodeValue vs data vs innerText
textContent vs nodeValue vs data vs inner html
textContent vs nodeValue vs data vs innerHTML
textContent vs nodeValue vs data vs innerHTML vs append
Reading textContent vs. nodeValue (incl. optional chaining)
Reading textContent vs. nodeValue (incl. optional chaining) [FIXED]
Comments
Confirm delete:
Do you really want to delete benchmark?