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 1. DOM Specs 1. DOM Living standards 1. DOM Reference by MDN

##Things to learn with DOM

###DOM tree 1. DOM tree images 1. 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>
``` 1. query the browser console:

```
window
document
window.document
document.nodeType
document.nodeName
``` 1. **traverse** the dom tree [read: [node types](https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType)]

```
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
``` 1. **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 1. DOM Scripting by Jeremy Keith 1. DOM Manipulation libraries: jQuery, Prototype, Dojo, Moo Tools

##Build Link of this episode All the facts about Jeff Dean - funny <3