Skip to content


DOM Navigation Javascript Cheat Sheet

This is a cheatsheet i wrote, so i don’t have to remember some simple javascript DOM stuff

http://pastie.org/761588

Also check out this sweet page of DOM attributes you can get with javascript http://www.howtocreate.co.uk/tutorials/javascript/domstructure


Sample Dom-
<body>
<h1> Hello World</h1>
<div id="america">
 I am an <em> american</em>, but I wish I was <span id="superman">superman</span>.</div>
<form>
 <input onclick="guess();" type="button" value="What Am I?" />
 </form>
</div>
</body>

Sample JS

var element = document;
 alert(element.lastChild.nodeName);// will return "HTML"
 alert(element.lastChild.nodeValue); // will return "null"

var element = document.getElementById("america");
alert(document.getElementById("america").parentNode.nodeName); // will return 'body'
alert(document.getElementById("america").nodeName ) ; // will return 'div
alert(document.getElementsByTagName("h1")[0].firstChild); // will return " Hello World"

document.getElementById("superman").firstChild // will return text "superman"
Valid Selectors
parentNode            // returns immediate parent node
childNodes            // returns an array of child nodes
firstChild            // gets first child of element
lastChild             // gets last child of element
getElementsByTagName    // gets element by tag name, such as "div" for <div> and "p" for <p> and "h1" for <h1>
getElementById          // gets element by id such as 'Element:something' for <div id="something">
getAttributeNode        // gets the attributes of element getAttributeNode("id") returns id attribute

Posted in Uncategorized, Web Development, javascript.

0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

Some HTML is OK

(required)

(required, but never shared)

or, reply to this post via trackback.