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.

NodenodeType Literal
Element1
Text3
Document9

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

NodenodeType LiteralnodeType Constant
Element1Node.ELEMENT_NODE
Text3Node.TEXT_NODE
Document9Node.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".

NodenodeType LiteralnodeType ConstantnodeName
Element1Node.ELEMENT_NODETag name from markup
Text3Node.TEXT_NODE"#text"
Document9Node.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.

NodenodeType LiteralnodeType ConstantnodeNamenodeValue
Element1Node.ELEMENT_NODETag name from markupnull
Text3Node.TEXT_NODE"#text"null
Document9Node.DOCUMENT_NODE"#document"null
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents