Document Object Model
(DOM)
Mendel Rosenblum
CS142 Lecture Notes - DOM
Browser JavaScript interface to HTML document
● HTML document exposed as a collection of JavaScript objects and methods
The Document Object Model (DOM)
● JavaScript can query or modify the HTML document
● Accessible via the JavaScript global scope, aliases:
window
this (When not using 'use strict';)
CS142 Lecture Notes - DOM
DOM hierarchy
● Rooted at window.document (html tag)
● Follows HTML document structure
window.document.head
window.document.body
● Tree nodes (DOM objects) have tons (~250) of properties, most private
Objects (representing elements, raw text, etc.) have a common set of
properties and methods called a DOM "Node"
CS142 Lecture Notes - DOM
DOM Node properties and methods
● Identification
nodeName property is element type (uppercase: P, DIV, etc.) or #text
● Encode document's hierarchical structure
parentNode, nextSibling, previousSibling, firstChild, lastChild .
● Provide accessor and mutator methods
E.g. getAttribute, setAttribute methods, etc..
CS142 Lecture Notes - DOM
<p>Sample <b>bold</b> display</p>
parentNode
nodeName: P
parentNode
nodeType: 1 (Element)
firstChild
lastChild
parentNode
previousSibing previousSibing
nodeName: #text nodeName: B nodeName: #text
nodeType: 3 (Text) nodeType: 1 nodeType: 3 (Text)
nodeValue: "Sample " nodeValue: " display"
nextSibing nextSibing
firstChild
lastChild parentNode
nodeName: #text
nodeType: 3 (Text)
nodeValue: "bold"
CS142 Lecture Notes - DOM
Accessing DOM Nodes
● Walk DOM hierarchy (not recommended)
element = document.body.firstChild.nextSibling.firstChild;
element.setAttribute(…
● Use DOM lookup method. An example using ids:
HTML: <div id="div42">...</div>
element = document.getElementById("div42");
element.setAttribute(…
● Many: getElementsByClassName(), getElementsByTagName(), …
○ Can start lookup at any element:
document.body.firstChild.getElementsByTagName()
CS142 Lecture Notes - DOM
More commonly used Node properties/methods
● textContent - text content of a node and its descendants
Previous slide example: P Node textContext is "Sample bold display"
● innerHTML - HTML syntax describing the element's descendants.
Previous slide example: P Node innerHTML is "Sample <b>bold</b> display"
● outerHTML - similar but includes element "<p>Sample <b>bold</b> display</p>"
● getAttribute()/setAttribute() - Get or set the attribute of an element
CS142 Lecture Notes - DOM
Common DOM mutating operations
● Change the content of an element
element.innerHTML = "This text is <i>important</i>";
Replaces content but retains attributes. DOM Node structure updated.
● Change an <img tag src attribute (e.g. toggle appearance on click)
img.src="newImage.jpg";
● Make element visible or invisible (e.g., for expandable sections, modals)
Invisible: element.style.display = "none";
Visible: element.style.display = "";
CS142 Lecture Notes - DOM
DOM and CSS interactions
● Can update an element's class
element.className = "active";
● Can update element's style
element.style.color = "#ff0000"; // Not preferred way!
● Can also query DOM by CSS selector
document.querySelector() and document.querySelectorAll()
CS142 Lecture Notes - DOM
Changing the Node structure
● Create a new element (can also cloneNode() an existing one)
element = document.createElement("P");
or
element = document.createTextNode("My Text");
● Add it to an existing one
parent.appendChild(element);
or
parent.insertBefore(element, sibling);
● Can also remove Nodes: node.removeChild(oldNode);
● But, setting innerHTML can be simpler and more efficient.
CS142 Lecture Notes - DOM
More DOM operations
● Redirect to a new page
window.location.href = "newPage.html";
Note: Can result in JavaScript script execution termination
● Communicating with the user
console.log("Reached point A"); // Message to browser log
alert("Wow!"); confirm("OK?"); // Popup dialog
CS142 Lecture Notes - DOM
DOM's Coordinate System
● The screen origin is at the upper left; y increases as you go down
● The position of an element is determined by the upper-left outside corner of
its margin
● Read location with element.offsetLeft, element.offsetTop
● Coordinates are relative to element.offsetParent, which is not necessarily
the same as element.parentNode
CS142 Lecture Notes - DOM
DOM Coordinates
<div class="div1"><div class="div2"><div class="div3"></div></div>/</div>
X
Y
div1
offsetTop
div2
offsetLeft offsetTop offsetParent
offsetLeft div3
offsetHeight offsetParent
offsetWidth
CS142 Lecture Notes - DOM
Positioning elements
● Normally elements are positioned automatically by the browser as part of the
document
● To pull an element out of the document flow and position it explicitly:
element.style.position = "absolute"; // anything but "static"
element.style.left = "40px";
element.style.top = "10px";
"absolute" - the element no longer occupies space in the document flow.
● The origin inside an offsetParent (for positioning descendants) is just inside
the upper-left corner of its border.
CS142 Lecture Notes - DOM
Positioning context
● Each element has an offsetParent (some ancestor element).
● When an element is positioned, coordinates such as element.style.left
are relative to its offsetParent.
● Default offsetParent is the <body> element.
● Some elements define a new positioning context:
○ position CSS attribute is absolute (element is explicitly positioned)
○ position CSS attribute is relative (element is positioned automatically by the browser in
the usual way)
○ This element will become the offsetParent for all its descendents (unless overridden by
another positioning context)
CS142 Lecture Notes - DOM
Positioning Children
Parent margin
Parent border
top/offsetTop Parent padding
left/offsetLeft
Child margin
Child border
CS142 Lecture Notes - DOM
Element dimensions
● Reading dimensions: element.offsetWidth and element.offsetHeight
Include contents, padding, border, but not margin
● Updating dimensions: element.style.width and element.style.height
CS142 Lecture Notes - DOM
Positioning
<body>
<div id="div1">
<p>div1</p>
</div>
#div1 {
width: 50px;
height: 200px;
background: #ffe0e0;
}
CS142 Lecture Notes - DOM
Positioning
…
<div id="div2">
<p>div2</p>
<div id="div2-1">
<p>div2-1</p>
</div>
</div>
#div2 {width: 300px; height:
200px; position: relative;
background: #d0e0ff;}
#div2-1 {width: 150px; height:
80px; position: absolute;
top: 50px; left: 100px;
background: #d0e0ff;}
CS142 Lecture Notes - DOM
Positioning
...
<div id="div3">
<p>div3</p>
<div id="div3-1">
<p>div3-1</p>
</div>
</div>
#div3 {width: 300px; height:
200px; background: #ffffe0;}
#div3-1 {width: 150px; height:
80px; position: absolute; top:
50px; left: 100px; background:
#ffffe0;}
CS142 Lecture Notes - DOM
