Accessing Element Content

To implement useful functionality, it is not enough to navigate to a document tree node. You often need to query the content of a specific node, or a set of nodes.

Three simple ways to access node content

The DOM provides three simple ways to access node content.

Method 1

The first and most obvious way is to use the HTML element and attribute navigation methods to access child elements and attributes. Sooner or later you reach a node that does not have any child.

Method 2

The second way is to use the textContent property of the node you have grasped. It retrieves the concatenated text within the element, excluding all other nodes.

Method 3

The third and most frequently used way is to obtain the value of the innerHTML property, which retrieves the textual representation of the HTML markup embedded within the element.

The Listing below demonstrates using the textContent and innerHTML properties.

Listing: Using the textContent and innerHTML properties.