DOM, Traversal

by Ryan Morris

HTML

<div id="container">
    <ul id="nav" data-user-id="55" class="main-nav">
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">Info</a>

        </li>
        <li><a id="contact" href="#" title="contact" class="highlight">Contact</a>

        </li>
    </ul>
    <section id="welcome">
        
         <h1>Welcome!</h1>

         <h2>This is a splash bar. <a href="#">Check out more information.</a></h2>

    </section>
    <div id="body">
        <p class="summary">This is some text about...</p>
        <p class="description">More text...</p>
    </div>
    <form id="login" name="login" action="#" method="post">
        <label>Username
            <input type="text" name="username">
        </label>
            
            <label>Password
            <input type="password" name="username">
        </label>
    </form>
</div>

CSS

body {
    font-family: Tahoma, Geneva, sans-serif;
}
a {
    color:#666;
}
h1 {
    font-size:2em;
    margin:0 0 5px 0;
}
h2 {
    font-size:1em;
}

label{
   float:left;
    clear:left;
}
#nav {
    list-style:none;
    margin:0 0 20px 0;
    padding:0;
    overflow:auto;
    float:right;
}
#nav li {
    margin:0 2px 0 0;
    padding:0;
    float:left;
}
#nav li a {
    display:block;
    padding:5px;
    background-color:#ececec;
}
#nav li a:hover {
    background-color:yellow;
}
#welcome {
    border:1px solid #000;
    padding:10px;
    background-color:#eee;
    clear:both;
}

JavaScript

// following the tree patter
// element.parentNode & childeNodes[] 
// we can reach h1 in #welcome section by...

// document - html - body (skipping text nodes here...) - container - welcome - h1
var welcomeEl = document.childNodes[1].childNodes[2].childNodes[1].childNodes[3].childNodes[1];
console.log(welcomeEl);

// same thing but skipping text nodes
var welcomeEl = document.childNodes[1].children[1].children[0].children[1].children[0];
console.log(welcomeEl);

// fetch by id
var welcomeEl = document.getElementById("welcome");
console.log(welcomeEl);

// fetch by tag name
var listItemElements = document.getElementsByTagName('li');
console.log(listItemElements);

// fetch ONLY list items under #nav
var navListItems = document.getElementById("nav").getElementsByTagName('li');
console.log(navListItems);

// query selector!
var contactLink = document.querySelector("a[title='contact']");
console.log(contactLink);

var navEl = document.querySelector("#nav");
console.log(navEl);

var navListItems = document.querySelectorAll("#nav li");
console.log(navListItems);


// some node properties
console.log(contactLink.nodeName);
console.log(contactLink.tagName);
console.log(contactLink.nodeType);
console.log(contactLink.nodeValue);
console.log(contactLink.innerHTML);
console.log(contactLink.innerText);

// some element properties
console.log(contactLink.id);
console.log(contactLink.title);
console.log(contactLink.className);

// data-*
//console.log(navEl.datalist);
console.log(navEl.getAttribute('data-user-id'));

console.log(navEl.innerHTML);