Loading course content...
Table of Contents
Understanding the DOM Tree in JavaScript
Code Playground is only enabled on larger screen sizes.
Starting from this lesson, we are going to move on to the more practical uses of JavaScript, and discuss how it works in the frontend part of an application.
Frontend is the part of the app that is displayed to the user, meaning your JavaScript code will be embedded into the webpage, and runs inside the browser environment.
There are two ways to embed JavaScript code. You can either use in-page JavaScript like this:
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>Lorem ipsum dolor. . .</p>
<p>Lorem ipsum dolor. . .</p>
<script>
// Your JavaScript code here
</script>
</body>
</html>Alternatively, you can put your JavaScript code in a separate file:
text
.
├── index.html
└── script.jsAnd then import it into your HTML document.
script.js
javascript
function example() {
alert("Hello, world");
}index.html
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button onclick="example()">Click Me</button>
<script src="./script.js"></script>
</body>
</html>In most cases, the second method is recommended. As your project grows, putting everything in a single file will make future maintenance difficult.
It is best to load JavaScript right before the closing <body> tag, so that it does not block the rendering of the rest of the page.
For our example, the script.js contains an example() function, which executes alert().
script.js
javascript
function example() {
alert("Hello, world");
}alert() is a built-in function in the browser environment, which creates a pop up alert box.
Inside index.html, we have a <button> element with an onclick attribute. This attribute is an event handler for the "click" action:
index.html
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button onclick="example()">Click Me</button>
<script src="./script.js"></script>
</body>
</html>When the button is clicked, the function example() will be executed, and the alert box will pop up.
What is the DOM tree
DOM stands for Document Object Model. When the browser renders a web page, it will parse the HTML document and create a DOM tree.
For example, given the following HTML document:
index.html
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>Lorem ipsum dolor. . .</p>
<p>Ipsum enim molestiae. . .</p>
</body>
</html>The browser will create a tree structure which looks like this:
There are several different kinds of node in the DOM, including element node, text node, comment node, and so on.
Each node is represented by a JavaScript object, allowing you to access its content, attributes, styles, etc.
These nodes are interconnected, allowing you to move up and down in the DOM tree, and access any node you want.
The node objects can be accessed through the document object. For example, document.body refers to the <html> element:
script.js
javascript
console.log(document.body);text
<body>
<button onclick="example()">Click Me</button>
<script src="./script.js"></script></body><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <button onclick="example()">Click Me</button> <script src="./script.js"></script> </body> </html>