Quering the DOM tree

Take the below html open it with Firefox/ Chrome and press F12 to enable Developer tool.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Firebug</title>
</head>

<body>
    <div>
        <h4>Talk to me:</h4>
        <ul>
            <li id="twitter" class="sprite"><a href="http://www.twitter.com">Twitter</a></li>
            <li id="facebook" class="sprite"><a href="http://www.facebook.com">Facebook</a></li>
            <li id="flickr" class="sprite"><a href="http://www.flickr.com">Flickr</a></li>
            <li id="linkedin" class="sprite"><a href="http://www.linkedin.com">LinkedIn</a></li>
        </ul>
    </div>
</body>

</html>

document

The root to the DOM tree represents this simple XHTML file is a Document node. Then query this object by way of the document member of window. In other words, document is an identifier for a global variable.

document;

// Document dom.html

nodeType Literal

The nodeType is an integer between 1 and 12 that tells you the kind of node.

document.nodeType;

// 9

You can get node type for any nodes, nodeType will always be 9 for a Document node. And for Element and Text nodes, nodeType will be 1 and 3, respectively.

Node	nodeType Literal
Element	1
Text	3
Document	9

Using nodeType you can write an if condition comparing nodeType to 3.

if (nodeFromTree.nodeType === 1) {
    // do something to Element node
}

nodeType Constant

Instead of using integer values you can use the below equivalent nodeType constants.

nodeType Literals and Constants for Commonly Scripted Nodes

Node	nodeType Literal	nodeType Constant
Element	1	Node.ELEMENT_NODE
Text	3	Node.TEXT_NODE
Document	9	Node.DOCUMENT_NODE

The above example modified as below.

if (nodeFromTree.nodeType === Node.ELEMENT_NODE) {
    // do something to Element node
}

nodeName

Use nodeName member to query any node. For a Document node, this will always be the string "#document".

document.nodeName;

// "#document"

For Element nodes, nodeName will be the name of the markup tag in uppercase letters, such as "DIV", for a <div> element and "LI" for an <li> element. nodeName always contains a string of uppercase letters.

For a Text node, nodeName will always be the string "#text".

Node	nodeType Literal	nodeType Constant	nodeName
Element	1	Node.ELEMENT_NODE	Tag name from markup
Text	3	Node.TEXT_NODE	"#text"
Document	9	Node.DOCUMENT_NODE	"#document"

nodeValue

In addition to nodeType and nodeName, every node regardless of type has a nodeValue member.

document.nodeValue;

// null

For a Document or Element node, nodeValue will always be null. For a Text node, nodeValue will contain the text content from your markup.

Node	nodeType Literal	nodeType Constant	nodeName	nodeValue
Element	1	Node.ELEMENT_NODE	Tag name from markup	null
Text	3	Node.TEXT_NODE	"#text"	null
Document	9	Node.DOCUMENT_NODE	"#document"	null