Document Object Model Cheatsheet DOM
https://youtu.be/KShnPYN-voI?si=wsZtva5f54HJNvbY
A object tree representation of a html document. The browser keeps the dom tree and insync with the html.
when we talk about the dom we are talking about all the elements involved with interacting with it.
- methods
- sub objects
- properties
Methods
are functions attached to the document object. which allow us to do things like select a specific html element.
1
2
//for example select the header on the page
document.querySelector('h1');
Sub Objects
more objects. for example
1
document.querySelector('h1');
Returns the h1 object. To which you can apply events and methods to these sub objects
Properties
within the same h1 object you can go
1
2
3
4
5
header.style.color = "red"
style is a sub object and within it we have properties for every type of css.
## Manipulating the dom with js example
querySelector, eventlistener and style property is what you use 70 - 80% of the time with the dom.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<body>
<div id="app">
<script type="text/javascript">
// Select the div element with 'app' id
const app = document.getElementById("app");
// Create a new H1 element
const header = document.createElement("h1");
// Create a new text node for the H1 element
const text = "Develop. Preview. Ship.";
const headerContent = document.createTextNode(text);
// Append the text to the H1 element
header.appendChild(headerContent);
// Place the H1 element inside the div
app.appendChild(header);
</script>
</div>
</body>
</html>
This post is licensed under CC BY 4.0 by the author.