Press → key to advance. Zoom in/out: Ctrl or Command + +/-.

Basic JS: VI

Estelle Weyl

Introducing the DOM

Uses of JS in Websites

  • Interactive effects
  • Dynamically modifying web pages
  • Changing the HTML the browser originally downloaded

What we're going to do:

  • Identify an element on the page
  • Do something to the element

The DOM

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="UTF-8">
  <title>A Basic Web Page</title>
 </head>

 <body>
  <p> 
    <strong>important text</strong> and 
    <a href="#">a link</a>.
  </p>
 </body>
</html>
ancestor | parent | node | textnode | sibling | child | descendent

DOM Tree

              html
          ______|____________
          |                 |
        head             body
    ______|____             |
    |         |             |
   title     meta         p
    |                 ______|_________
    |                 |     |    |   |
A basic web page   strong  and  a   .
                      |          |
                      |          |
              important text   a link

Selecting an element

document.getElementById();

document.getElementsByTagName();

document.getElementsByClassName();  //IE9

document.querySelector(); //IE8
 
document.querySelectorAll(); //IE8

Test Page

<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="UTF-8">
   <title>A Basic Web Page</title>
 </head>
 <body
 <div id="box">
  <ul>
   <li>Some <strong>imp text</strong></li>
   <li>And <a href="http://x.com">a link</a>.</li>
   <li class="cl">With a class</li>
   <li class="cl">another classed</li>
   <li class="di">Has an ID</li> 
  </ul>
 </div>
 </body>
</html>

Play with Page in Console!!!

var box = document.getElementById('box');
var box = document.querySelector('#box');

var lis = box.getElementsByTagName('li');
var lis = box.querySelectorAll('li');


var classed = lis.getElementsClassName('cl');
var classed = box.querySelectorAll('.cl');

lis.length?
box.length?
classed.length?
  • Some imp text
  • And a link.
  • With a class
  • another classed
  • Has an ID

Child, Parent, Siblings

              html (parent)
          ______|____________
          |                 |
        head  siblings   body (children)
        
      
           p  (parent)
     ______|_________
     |     |    |   |
  strong  and  a   . (children and siblings)

children

var box = document.querySelector("#box");

var ul = box.getElementsByTagName("ul")[0];

// includes empty text nodes too
var kids = ul.childNodes;  

// text if textnode, value if attribute node, null if element
var first = kids[0].nodeValue;

Parents

var lis = box.getElementsByTagName('li');
var ul = lis[1].parentNode;

Siblings

var firstli = lis[1].prevSibling;
var thirdli = lis[1].nextSibling;

Changing Content

We need to find a DOM node so that we can add content to it, before it, after it, etc.

<div id="changeme">
  <ul>
   <li>Some <strong>imp text</strong></li>
   <li>And <a href="http://x.com">a link</a>.</li>
   <li class="cl">With a class</li>
   <li class="cl">another classed</li>
   <li class="di">Has an ID</li> 
  </ul>
</div>
//find elements
var lis = document.querySelectorAll('#changeme li');
//change the content of one
lis[2].innerHTML = 'JavaScript Rocks';

Change Content

  • Some imp text
  • And a link.
  • With a class
  • another classed
  • Has an ID
//find elements
var lis = document.querySelectorAll('#changeme li');

//change the content of one
lis[2].innerHTML = 'JavaScript Rocks';

//find another elements
var strong = lis[0].getElementsByTagName('strong');

//change that content too
strong[0].innerHTML = 'emboldened content';

Add an element

  1. Create an element.
  2. Set attributes on that element.
  3. Create your textnode.
  4. Add content to that element by appending the textnode to the element you created.
  5. Targe the DOM node this new element will be next to.
  6. Add that node next to the the targeted node.
var newLI = document.createElement('li');
newLI.setAttribute('class', 'myClass');
var textNode = document.createTextNode("some text");
newLI.appendChild(textNode);
var myUL = document.querySelector("#changeme ul");
myUL.appendChild(newLI);

Remove Elements

  1. Find the node you want to remove.
  2. Find the parent of that node.
  3. Remove the parent's child.
var lis = document.querySelectorAll('#changeme li');
lis[4].parentNode.removeChild(lis[4]);
var box = document.getElementById('changeme');
var list = box.getElementsByTagName('ul')[0];
var fifthitem = box.getElementsByTagName('li')[4];
var item = list.removeChild(fifthitem);

Exercises

Slide 11 displays the text created by the markup on slide 10. Let's play with it! In the console on slide 11 do the following:

  • Change the text of the link
  • Change the bold text
  • Change the text of one of the list items.
  • Add a list item
  • Add some bold text as a child of one of the list items
  • Remove every node you just added

Next

Go