O'Reilly logo

DOM Enlightenment by Cody Lindley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required