JavaScript Introduction | Document Object Model | Accessing Nodes

Tags:

Accessing Nodes

The following are ways to access HTML DOM nodes in an HTML document.

  1. Using the getElementsByTagName() method
  2. Accessing nodes through relationships between nodes

Using the getElementsByTagName() Method

The getElementsByTagName() method returns all elements with a specific tag name as a node list.
Therefore, by using the node list returned by this method, you can access the desired node.

In the HTML DOM, relationships between nodes are defined by the following properties.

  1. parentNode: parent node
  2. childNodes: child node list
  3. firstChild: first child node
  4. lastChild: last child node
  5. nextSibling: next sibling node
  6. previousSibling: previous sibling node

By using these properties, you can easily access the desired node.

Information About Nodes

Information about a node can be accessed through the following properties.

  1. nodeName
  2. nodeValue
  3. nodeType

These properties provide a way to directly access information about the node without using a separate interface.

nodeName

The nodeName property stores the unique name of a node, so it is a read-only property that cannot be modified.

For element nodes, the nodeName property always stores the tag name of the corresponding HTML element in uppercase.

Node Property Value
Document node #document
Element node Tag name (uppercase English letters)
Attribute node Attribute name
Text node #text 
// Selects the name of the second child node among all child nodes of the HTML document.
document.getElementById("document").innerHTML = document.childNodes[1].nodeName;           // HTML

// Selects the name of the first child node among all child nodes of the html node.
document.getElementById("html").innerHTML = document.childNodes[1].childNodes[0].nodeName; // HEAD

In the example above, the first child node of the HTML document is <!DOCTYPE html>, and the second child node is <html>. Also, the first child node of the <html> node is <head>, and the third child node is <body>.

nodeValue

The nodeValue property stores the value of a node.

Node Property Value
Element node undefined
Attribute node The attribute value of that attribute
Text node The corresponding text string 
// Selects the node value of the first child node of the element whose id is "heading".
var headingText = document.getElementById("heading").firstChild.nodeValue;

document.getElementById("text1").innerHTML = headingText;
document.getElementById("text1").firstChild.nodeValue = headingText;

Until now, the innerHTML property has been used to easily access or change the content of HTML elements.
The same result can also be obtained by using firstChild.nodeValue instead of the innerHTML property.

nodeType

The nodeType property stores the unique type of a node, so it is a read-only property that cannot be modified.

Representative nodeType property values for HTML nodes are as follows.

Node Property Value
Element node 1
Attribute node 2
Text node 3
Comment node 8
Document node 9 
// Selects the type of the first child node of the element whose id is "heading".
var headingType = document.getElementById("heading").firstChild.nodeType;

document.getElementById("head").innerHTML = headingType;           // 3
document.getElementById("document").innerHTML = document.nodeType; // 9

Handling Empty Text Nodes

Most major web browsers currently support the W3C DOM model, but their processing methods differ slightly.
The biggest difference among them is how spaces and line breaks are handled.

Firefox and other browsers treat spaces and line breaks as text nodes.
However, Internet Explorer does not treat spaces or line breaks as text nodes.

Therefore, when you try to access a desired node by using child nodes or sibling nodes, differences can occur between browsers.
The easiest way to remove this difference is to use the nodeType property to check the type of the selected element.

var lastNode;
function findLastChild(parentNode) {
    lastNode = parentNode.lastChild;
    while (lastNode.nodeType != 1) {
        lastNode = lastNode.previousSibling;
    }
}
function printLastChild() {
    var parentNode = document.getElementById("parentNode");
    findLastChild(parentNode);
    document.getElementById("nodename").innerHTML = lastNode.nodeName;
}

In the example above, after finding the last child node, if the type of the found node is not an element node, the previous node is checked again.
By using this approach, the same element node can be selected as the last child node in every browser.