DOM and DHTML

Modifying Web Pages

Randy J. Fortier
randy.fortier@uoit.ca
@randy_fortier

Outline

  • Document Object Model (DOM)
  • Manipulating the DOM with JavaScript (DHTML)
    • Accessing DOM objects
    • DOM object properties
    • Modifying DOM objects

DOM and DHTML

The Document Object Model

The Document Object Model (DOM)

  • Basically, a DOM is a parse tree
    • The browser builds a DOM from the HTML and CSS files for each page
    • You can create a DOM from any XML file, but HTML is the most common
  • A DOM is a hierarchical data structure
    • Elements (tags)
    • Attributes
    • Attribute values
    • Text content

XML File

  • Let's examine the DOM of this XML file:

<inventory>
   <item quantity="1">Hammer</item>
   <item quantity="21">Nut</item>
   <item quantity="30">Bolt</item>
</inventory>
                        

XML File

  • Let's examine the DOM of this XML file:
The DOM of the XML file

HTML File

  • Let's examine the DOM of this HTML file:

<html>
   <head>
      <title>Title</title>
   </head>
   <body>
      <div class="abc">Content1</div>
      <p style="def">Content2</div>
   </body>
</html>

                        

HTML File

  • Let's examine the DOM of this HTML file:
The DOM of the HTML file

DOM and DHTML

Dynamic HTML

Dynamic HTML (DHTML)

  • Obtaining DOM objects:

window.onload = function() {
   var div = document.getElementById("myDiv");
   var divChild = div.getElementById("myP");
   var allPs = document.getElementsByTagName("p");
   var firstName = document.querySelector("#firstName"); // id
   var comments = document.querySelectorAll(".comment"); // CSS class
   var rows = document.querySelectorAll("tr");           // element name
   var even = rows.querySelectorAll(":nth-child(2n)");   // pseudoclass
};
                        

Dynamic HTML (DHTML)

  • DOM object properties about the element:

window.onload = function() {
   var div = document.getElementById("myDiv");
   console.log(div.id);           // the unique ID for the element
   console.log(div.innerHTML);    // the content of the element, as HTML
   console.log(div.nodeName);     // the name of the HTML element (e.g. div)
   console.log(div.className);    // the CSS class(es) assigned to the element
   console.log(div.style);        // a dictionary with all the CSS properties for this element 
                                  // (e.g. element.style.backgroundColor)
   console.log(div.clientWidth); 
   console.log(div.clientHeight); // the screen dimensions of this element
};
                        

Dynamic HTML (DHTML)

  • DOM object properties about the element's children:

window.onload = function() {
   var div = document.getElementById("myDiv");
   console.log(div.childNodes); // a NodeList of children
   console.log(div.firstChild);
   console.log(div.lastChild);
   div.removeChild(div.lastChild);
   div.replaceChild(newNode, div.lastChild));
};
                        

Dynamic HTML (DHTML)

  • DOM object properties about the element's other relationships:

window.onload = function() {
   var div = document.getElementById("myDiv");
   console.log(div.parentNode);      // parent node of this element
   console.log(div.nextSibling);     // next child with the same parent
   console.log(div.previousSibling); // prev child with the same parent
};
                        

Dynamic HTML (DHTML)

  • Attribute names and values:

window.onload = function() {
   var img = document.getElementById("logo");
   var attrib = img.getAttribute("alt");
   console.log(attrib.name + ": " + attrib.value);
};
                        

Dynamic HTML (DHTML)

  • Modifying DOM elements:

var div1 = document.getElementById("div1");
div1.innerHTML = 'Hi from JavaScript';

var div2 = document.getElementById("div2");
div2.innerHTML = '

Dynamic paragraph

'; var div3 = document.getElementById("div3"); div3.style.color = '#ff0000'; div3.style.width = '300px';

Dynamic HTML (DHTML)

  • CSS Style attributes
    • Many CSS properties have dashes:
      • border-radius: 10px;
      • margin-left: 0;
    • This is invalid syntax, so camel case instead:
      • div.style.borderRadius = '10px';
      • div.style.marginLeft = '0';

Wrap-Up

  • In this section, we learned about:
    • DOM
      • XML
      • HTML
    • Accessing DOM objects in JavaScript
    • DOM object attributes
    • Modifying DOM objects