050 DOM

06 Sep 2013

DOM or Document Object Model is a cross-platform and language-independent convention for representing and interacting with objects found in HTML. In this episode, we will explore traversing the DOM tree, adding/removing attributes/elements/style and also what is document fragments.

Download video: mp4

Sample code: Github

Version: DOM Level 3

Similar episodes: 014 Local web servers

Background on DOM

  1. Wikipedia: DOM
  2. DOM Specs
  3. DOM Living standards
  4. DOM Reference by MDN

Things to learn with DOM

DOM tree

  1. DOM tree images
  2. prepare a simple index.html

    <head>
        ...
        <style>.info{color: mediumturquoise;}</style>
        ...
    <body>
        <h1 class="info" style="text-align:center;">Select a shape below:</h1>
        <ul id="list">
          <li>circle</li>
          <li>square</li>
          <li>rectangle</li>
          <li>oval</li>
        </ul>
        <div></div>
    </body>
    
  3. query the browser console:

    window
    document
    window.document
    document.nodeType
    document.nodeName
    
  4. traverse the dom tree [read: node types]

    document.body.firstChild
    
    document.body.firstElementChild
    document.body.firstElementChild.nodeName
    document.body.firstElementChild.nodeType
    document.body.firstElementChild.firstChild
    
    document.body.firstElementChild.nextElementSibling
    document.body.firstElementChild.nextElementSibling.nodeName
    document.body.firstElementChild.nextElementSibling.nodeType
    
    document.nodeType
    
    document.body.childNodes[0]
    document.body.childNodes[1]
    document.body.childNodes[2]
    
    document.doctype
    document.head
    document.title
    document.URL
    document.lastModified
    
  5. query the DOM tree

    document.querySelector('h1')
    document.querySelector('li')
    
    document.getElementsByTagName('li')
    document.getElementsByTagName('li')[1]
    
    document.getElementsByClassName('info')
    document.getElementsByClassName('info')[0].nodeName
    
    document.getElementById('list')
    

attributes - get, set, remove, check

  1. get attribute

    document.querySelector('h1').getAttribute('class')
    document.querySelector('ul').getAttribute('id')
    
  2. set attribute

    document.querySelector('h1').setAttribute('class', 'warning')
    document.querySelector('h1').getAttribute('class')
    
  3. remove attribute

    document.querySelector('h1').removeAttribute('class')
    document.querySelector('h1').getAttribute('class')
    
  4. check if that attribute exists

    document.querySelector('ul').hasAttribute('id')
    document.querySelector('ul').hasAttribute('class')
    

elements - create, remove

  1. create element

    var para = document.createElement('p')
    para.textContent = 'hello world!!'
    
  2. append to the document (before and after) + remove

    document.body.appendChild(para)
    document.body.removeChild(para)
    document.body.insertBefore(para, document.body.querySelector('h1'))
    

styles

  1. check in-line styles

    var header = document.querySelector('h1')
    header.style
    
  2. get computed styles

    window.getComputedStyle(header).color
    

document fragments

  1. lives in the memory external to the live DOM
  2. create a little list

    var frag = document.createDocumentFragment();
    var ul = document.createElement('ul');
    frag.appendChild(ul);
    
    ["blue", "green", "red", "blue", "pink"].forEach(function(e) {
        var li = document.createElement("li");
        li.textContent = e;
        ul.appendChild(li);
    });
    
    document.body.appendChild(frag);
    

More Resources on DOM

  1. DOM Enlightenment by Cody Lindley
  2. DOM Scripting by Jeremy Keith
  3. DOM Manipulation libraries: jQuery, Prototype, Dojo, Moo Tools

Build Link of this episode

All the facts about Jeff Dean - funny <3