A DOM text node stores character data within a DOM tree. It represents text content rather than an HTML element with a tag name. One element can contain several text nodes separated by other nodes, and adjacent text nodes can also exist as distinct objects.[ref]
For example, start with an empty paragraph and append document.createTextNode("A") followed by document.createTextNode("B"). The paragraph has two child nodes, its combined text content is AB, and it has no element children. Calling paragraph.normalize() merges adjacent text nodes and removes empty ones, so this example then has one text child containing AB.[ref]
The distinction matters when editing. An operation expecting the first child to be an element can instead encounter a whitespace text node produced between tags. Traversing all child nodes and traversing only element children answer different questions.
Text insertion also differs from parsing markup. Assigning paragraph.textContent = "<em>Hi</em>" supplies literal text containing angle brackets; it does not create an emphasis element. A parser-driven operation has different semantics. Finally, rendered whitespace can be collapsed or wrapped by CSS, so the number and contents of text nodes alone do not determine the exact visible line layout.

Articles by others on the same topic (0)

There are currently no matching articles.