With the HTML DOM, you can navigate the node tree using node relationships.
The getElementsByTagName() method returns a node list. A node list is an array of nodes.
The following code selects all <p> nodes in a document:
The nodes can be accessed by index number. To access the second <p> you can write:
Note: The index starts at 0.
The length property defines the number of nodes in a node-list.
You can loop through a node-list by using the length property:
You can use the three node properties; parentNode, firstChild, and lastChild, to navigate in the document structure.
Look at the following HTML fragment:
The firstChild property can be used to access the text of an element:
There are two special properties that allow access to the full document:
In addition to the innerHTML property, you can also use the childNodes and nodeValue properties to get the content of an element.
The following code gets the value of the <p> element with id="intro":
In the example above, getElementById is a method, while childNodes and nodeValue are properties.
In this tutorial we will use the innerHTML property. However, learning the method above is useful for understanding the tree structure and the navigation of the DOM.
The perfect solution for professionals who need to balance work, family, and career building.
More than 10 000 certificates already issued!
The HTML Certificate documents your knowledge of HTML.
The HTML5 Certificate documents your knowledge of advanced HTML5.
The CSS Certificate documents your knowledge of advanced CSS.
The jQuery Certificate documents your knowledge of jQuery.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
Your message has been sent to W3Schools.