Chapter 7. Text Nodes

7.1 Text Object Overview

Text in an HTML document is represented by instances of the Text() constructor function, which produces text nodes. When an HTML document is parsed, the text mixed in among the elements of an HTML page is converted to text nodes.

Live code

<!DOCTYPE html>
<html lang="en">
<body>

<p>hi</p>

<script>
//select 'hi' text node
var textHi = document.querySelector('p').firstChild

console.log(textHi.constructor); //logs Text()

//logs Text {textContent="hi", length=2, wholeText="hi", ...}
console.log(textHi);

</script>
</body>
</html>

The preceding code concludes that the Text() constructor function constructs the text node, but keep in mind that Text inherits from CharacterData, Node, and Object.

7.2 Text Object and Properties

To get accurate information pertaining to the available properties and methods on a Text node, it’s best to ignore the specification and to ask the browser what is available. Examine the arrays created in the following code detailing the properties and methods available from a text node.

Live code

<!DOCTYPE html>
<html lang="en">
<body>

<p>hi</p>

<script>
var text = document.querySelector('p').firstChild;

//text own properties
console.log(Object.keys(text).sort());

//text own properties and inherited properties
var textPropertiesIncludeInherited = [];
for(var p in text){
    textPropertiesIncludeInherited.push(p);
}
console.log(textPropertiesIncludeInherited.sort());

//text inherited properties only var textPropertiesOnlyInherited ...

Get DOM Enlightenment now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial