Document Object Model

6 minute read

Published:

This lesson covers Document Object Model (DOM).

  • JS is used to program logical decisions for webpage
  • JS changes the HTML rendered by the browser.
  • Document Object Model (DOM) represents the current programmatic representation of HTML elements
  • JS is used to modify DOM (or HTML Elements) in response to user input.
Example DOM Tree (https://info340.github.io/img/html/dom-tree.jpg)
  • Tree
    • hierarchical data structure, where each element (called a node) contains references to child elements.
    • start of the tree is called the root node
    • hierarchical sequences of nodes are called branches
    • node that does not have any children is called a leaf
  • DOM
    • Considering web page’s content to be a tree of HTML elements is called Document Object Model.
    • DOM is object oriented representation of the webpage that can be modified by JS
    • DOM represents the document as nodes and objects
    • DOM also provides API which allows computer applications to programmatically (e.g., through JavaScript code) interact with it: accessing and manipulating the tree of elements.

DOM Manipulation

  • current HTML element rendered in the browser is the DOM and is represented by global object - document
  • Properties and call methods of document can manuplate web content
//element with id="foo"
let fooElem = document.getElementById('foo');

//elements with class="row"
let rowElems = document.getElementsByClassName('row'); //note the plural!

//<li> elements
let liElems = document.getElementsByTagName('li'); //note the plural!

/*easiest to select by reusing CSS selectors! */
let cssSelector = 'header p, .title > p';  //a string of a CSS selector

//selects FIRST element that matches css selector
let elem = document.querySelector(cssSelector);

//matches ALL elements that match css selector
let elems = document.querySelectorAll(cssSelector); // use for loop
//get a reference to the FIRST <p> element
let elem = document.querySelector('p');

console.log(elem); //to demonstrate

let text = elem.textContent; //the text content of the elem
elem.textContent = "This is different content!"; //change the content

let html = elem.innerHTML; //content including HTML
elem.innerHTML = "This is <em>different</em> content!"; //interpreted as HTML

Examples, https://www.w3schools.com/js/js_htmldom.asp

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>DOM</title>
  </head>

  <body>
    <h1> My First Page for DOM</h1>
    <p id="demo"> Demo </p>

    <script>
      let elt = document.getElementById('demo');
      elt.textContent = "<h2>Hello World!</h2>";
    </script>

  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>DOM</title>
  </head>

  <body>
    <h1> My First Page for DOM</h1>
    <p id="demo"> Demo </p>

    <script>
      let elt = document.getElementById('demo');
      elt.innerHTML = "<h2>Hello World!</h2>";
    </script>

  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>DOM</title>
  </head>

  <body>
    <h1> My First Page for DOM</h1>

    <p> Hello World! </p>
    <p> This is a <b>JavaScript</b> class.</p>

    <script type="text/javascript">
      var elts = document.getElementsByTagName("p");
      elts[0].textContent = "Which class is this?";

    </script>

  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>DOM</title>
  </head>

  <body>
    <h1> My First Page for DOM</h1>

    <p class="js"> This is JavaScript Class </p>
    <p class="ip"> JavaScript is part of Internet Programming Class </p>

    <p id='demo'></p>

    <script type="text/javascript">
      var elts_js = document.getElementsByClassName('js');

      var elts_ip = document.getElementsByClassName('ip');

      let msg = elts_js[0].innerHTML + ', ' + elts_ip[0].innerHTML;

      var elt_demo = document.getElementById('demo');

      elt_demo.innerHTML = msg;


    </script>

  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>DOM</title>
  </head>

  <body>
    <img id='image' src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" width="120" height="120">

    <script type="text/javascript">
      let elt = document.getElementById('image');
      
      elt.src = "https://i.pinimg.com/originals/f9/21/35/f92135950f88020f5f5019ff8714cba4.jpg";

    </script>

  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>DOM</title>
  </head>

  <body>
    <p id="p1">Hello world</p>
    <p id="p2">Hello world</p>

    <script type="text/javascript">
      let elt = document.getElementById("p1");

      elt.style.color = "blue";
      elt.style.fontSize = "larger";
      elt.style.fontFamily = "Arial";

    </script>

  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>DOM</title>
  </head>

  <body>
    <p id="p1">Hello world</p>

    <button type="button" onclick="update()"> Click me!</button>

    <script type="text/javascript">
      function update(){
        let elt = document.getElementById('p1');
        p1.style.color = 'red';
        p1.style.fontSize = 'larger';
      }

    </script>

  </body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Id</h2>

<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>

<p id="demo"></p>

<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML = 
"The text from the intro paragraph is " + myElement.innerHTML;
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Tag Name</h2>

<p>Hello World!</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

<p id="demo"></p>

<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
'The text in first paragraph (index 0) is: ' + x[0].innerHTML;
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Tag Name</h2>

<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
</div>

<p id="demo"></p>

<script>
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Class Name</h2>

<p>Hello World!</p>

<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>

<p id="demo"></p>

<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Query Selector</h2>

<p>Hello World!</p>

<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>

<p id="demo"></p>

<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript can Change HTML</h2>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
var element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

<p>JavaScript changed "Old Heading" to "New Heading".</p>

</body>
</html> 
<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif" width="160" height="120">

<script>
document.getElementById("image").src = "landscape.jpg";
</script>

<p>The original image was smiley.gif, but the script changed it to landscape.jpg</p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

</body>
</html>
<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">Click Me</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
var id = null;
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  clearInterval(id);
  id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}
</script>

</body>
</html>