Javascript DOM Access and Manipulation
● DOM stands for Document Object Model.
● It is a powerful tool that allows you to interact with and manipulate the elements on a
web page.
● The Document part refers to the webpage you see in the browser.
● Specifically, the HTML Document which handles the structure of the page's content.
● This includes the text, images, links, and other elements that make up the page.
● Object means the elements like images, headers, and paragraphs are treated like objects.
● Each object has its properties (like id, class, style) and methods. Using these properties
and methods, you can manipulate the elements.
● The Model in DOM means it's a representation or copy of the HTML document as a
hierarchical tree.
● This tree includes all the elements. And it captures the parent-child relationships between
them.
● The DOM is always identical to the HTML document. Browsers ensure that they are in
sync. So if something changes in the HTML, the DOM changes too, and vice versa.
, ● At the top of the hierarchy is the Document object.
● It has only one child – the html element.
● The html element, also known as the root element, has two children, the head and body
elements.
● And each of them also have their own children elements.
● The parent-child relationship between the elements is what allows you to traverse or
move between and select them.
What You Can Do With the DOM
DOM manipulation allows developers to interact with the structure, style, and content of web
pages. The following are some of the things you can do with the DOM:
● Change and remove existing elements in the DOM.
● Create and add new elements to the page.
● Change the styles for elements.
● Add event listeners to the elements to make them interactive.
Accessing the DOM Elements
JavaScript provides multiple ways to access elements in the DOM.
document.getElementById()
Finds an element by its id. document.getElementById("demo") selects the <p> element with the
id demo.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM</title>
</head>
<body>
<p id="demo">Hello, World!</p>
<script>
let element = document.getElementById("demo");
, console.log(element.innerText);
</script>
</body>
</html>
document.getElementsByClassName()
Finds elements by their class name.
Returns an HTMLCollection (array-like) of all elements with class "example".
Use elements[index] to access specific elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM</title>
</head>
<body>
<p class="example">First paragraph</p>
<p class="example">Second paragraph</p>
<script>
let elements = document.getElementsByClassName("example");
console.log(elements[1].innerText);
</script>
</body>
</html>
document.getElementsByTagName()
Finds elements by their tag name.
● DOM stands for Document Object Model.
● It is a powerful tool that allows you to interact with and manipulate the elements on a
web page.
● The Document part refers to the webpage you see in the browser.
● Specifically, the HTML Document which handles the structure of the page's content.
● This includes the text, images, links, and other elements that make up the page.
● Object means the elements like images, headers, and paragraphs are treated like objects.
● Each object has its properties (like id, class, style) and methods. Using these properties
and methods, you can manipulate the elements.
● The Model in DOM means it's a representation or copy of the HTML document as a
hierarchical tree.
● This tree includes all the elements. And it captures the parent-child relationships between
them.
● The DOM is always identical to the HTML document. Browsers ensure that they are in
sync. So if something changes in the HTML, the DOM changes too, and vice versa.
, ● At the top of the hierarchy is the Document object.
● It has only one child – the html element.
● The html element, also known as the root element, has two children, the head and body
elements.
● And each of them also have their own children elements.
● The parent-child relationship between the elements is what allows you to traverse or
move between and select them.
What You Can Do With the DOM
DOM manipulation allows developers to interact with the structure, style, and content of web
pages. The following are some of the things you can do with the DOM:
● Change and remove existing elements in the DOM.
● Create and add new elements to the page.
● Change the styles for elements.
● Add event listeners to the elements to make them interactive.
Accessing the DOM Elements
JavaScript provides multiple ways to access elements in the DOM.
document.getElementById()
Finds an element by its id. document.getElementById("demo") selects the <p> element with the
id demo.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM</title>
</head>
<body>
<p id="demo">Hello, World!</p>
<script>
let element = document.getElementById("demo");
, console.log(element.innerText);
</script>
</body>
</html>
document.getElementsByClassName()
Finds elements by their class name.
Returns an HTMLCollection (array-like) of all elements with class "example".
Use elements[index] to access specific elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM</title>
</head>
<body>
<p class="example">First paragraph</p>
<p class="example">Second paragraph</p>
<script>
let elements = document.getElementsByClassName("example");
console.log(elements[1].innerText);
</script>
</body>
</html>
document.getElementsByTagName()
Finds elements by their tag name.
