JavaScript and the DOM
how to take our logic and put it on a webpage
DOM (document object model)
Document = the webpage (for example)
- A document has object(s)
Object = the "stuff" (content but also other things) on the webpage
- An object may also have its own object(s)
Model = the representation of the document and the objects
We can represent the documents and objects in a "tree" diagram
Objects can have "parents" and "children", e.g.
the parent of
<head>is<html>the children of
<head>are<title>and<meta>
One important thing: do not confuse the DOM with HTML:
- the HTML is only one way to visually represent the DOM!
Accessing the DOM with JavaScript
The document object
In JavaScript we can access the document (global) object simply with the reserved object variable name (aka reserved keyword), document
The getElement... methods
Then, we can access DOM elements, such as all <h1> tags with these methods:
let h1 = document.getElementsByTagName('h1')
Note that there, we grab the object representation and not the content of the <h1> tags!
Other methods include:
getElementById(...)- returns the tag object with an
idattribute of...
- returns the tag object with an
getElementsByClassName(...)- returns a list of any element(s) with a
classattribute of...
- returns a list of any element(s) with a
getElementsByTagName(...)returns a list of any element(s) with that tag of
...e.g.
getElementsByTagName('h1')for<h1>tags
Traversing the DOM with JavaScript
We can get the parents and children of each document object with parentNode and children:
let objectsParent = document
.querySelector('.object')
.parentNode
let objectsChildren = document
.querySelector('.object')
.children
We can also just get the first child of each object with firstChild:
let objectsFirstborn = document
.querySelector('.object')
.firstChild
Manipulating the DOM with JavaScript
(innerHTML)
Finally, now for some interesting stuff: we can use the innerHTML property to manipulate the content of each DOM object, for example:
<html>
<head>
...
<script src="index.js"></script>
</head>
<body>
<div id="app">hey</div>
<div id="bar">x</div>
</body>
</html>
document.body.innerHTML = "hi"
If we load up index.html the entire webpage will show just:
hi
...as we have just replaced the entire document's body to consist of only that string!
Manipulating objects
(getElementById)
Now that we know how to manipulate the document's body, we should know how to manipulate the object with the id of app:
document.getElementById('app').innerHTML = "hey hey! ho ho!"
Loading up index.html the webpage will display:
hey hey! ho ho! // #app: used to be "hey"
x // #bar
Note that it will replace only the first <div> :
- we specified to get the
<div>with theidofappand notbar
Creating and appending objects
(appendChild and createElement)
We can:
create elements with the
document.createElementfunctionappend them using the
document.body.appendChildfunction
...and we can chain them as such:
document.body.appendChild(document.createElement('p'))
Selecting and removing objects
(querySelector and removeChild)
Likewise, we can:
point to an element with
document.querySelectorquerySelectortakes one String parameter that resembles the notation of the CSS selector, e.g..my-class,#anId,section.section-blue
delete objects from the DOM using
document.body.removeChild
const blueSection = document.querySelector('section.section-blue')
document.body.removeChild(blueSection)
