Benchmark: Reading textContent vs. nodeValue

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>

Previous results

Test case name	Result
Read textContent
Read nodeValue

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Read textContent	22351784.0 Ops/sec
Read nodeValue	30536768.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

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:

Reading textContent vs. nodeValue (version: 1)

Comparing performance of: Read textContent vs Read nodeValue

Created: one year ago by: Guest

Jump to the latest result

Read textContent

Read nodeValue

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):