Document Object Model
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>