Playing with Nodes

Nodes and their reltionships

by Mehmetcan Sinir

HTML

<body>
    <div id="list">
        <ul>
            <li>First</li>
            <li>Second</li>
        </ul>
    </div>
    <form name="contactForm">
        <div id="enteringNames"> 
            <p> Please enter your first and last name below.</p>
            <br/>
            <input type="text" name="enterName" id="firstName" value="First Name"/>
            <input type="text" name="enterName" id="firstName" value="First Name"/>
        </div>
        <div id="choosingColors">
            <p>Please choose your favorite color.</p> 
            <br/>
            <input type="radio" name="colors" id="colorRed"/>
            <label for="colorRed">Red</label>
            <input type="radio" name="colors" id="colorGreen"/>
            <label for="colorGreen">Green</label>
            <input type="radio" name="colors" id="colorBlue"/>
            <label for="colorBlue">Blue</label>
        </div>
        <input type="submit" value="submit"/>
    </form>

JavaScript

//get to the body node
document.body

//get to the first child of the body element in this case "#list'

document.body.childNodes[0]
//also gets to the first child

document.body.firstChild
//get to the next child of the body element in this case form

//create an element, set its innerHTML and append an element as the first element's last child
var div = document.createElement("div");
div.id = "whyFavoriteColor";
div.innerHTML = "<form><p>Please tell us why this is your favorite color:</p><textarea></textarea></form>"
var secondDiv = document.getElementById("choosingColors");
secondDiv.appendChild(div);

// setting the name attribute of a <form>, <img>, <iframe>, <embed>, or <applet> creates a document property with that name
var form = document.contactForm;

//getElementsByTagName
document.getElementsByTagName("div")[0]//gets the first div

//nodeList Objects and HTMLCollections
/*getElementByName or getElementByTagName gets nodeList objects, they are read only arrays. Document.images or document.forms gets HTMLCollection Objects. These all behave like read only arrays, you can browse through these*/
//below we loop through all the images and hide them
for (var i=0; i<document.images.length; i++) {
    document.images[i].style.display="none";
}

//find all elements that have 'warning' in their class attribute
document.getElementsByClassName("warning");
//find all elements that have 'the class error and the class fatal among the descendent of an element named log.
var log = document.getElementsById("log");
var fatal =  log.getElementsByClassName("fatal error");