DOM
Document Object Model
• The Document Object Model (DOM) is a programming
interface for HTML and XML documents. It represents
the page so that programs can change the document
structure, style, and content dynamically. The DOM
represents the document as a tree of nodes, where each
node corresponds to part of the page, such as an
element or an attribute.
• It basically catalogs the web page into individual objects
that we can select and manipulate.
Example
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a sample paragraph.</p>
</body>
</html>
Document
/
\
DOCTYPE
html
/
\
head
body
/
/
\
title
h1
p
|
|
|
"Sample Page" "Hello, World!" "This is a sample
paragraph."
Common methods to access html
elements using DOM
• document.firstElementChild
• document.lastElementChild
• var heading = document.lastElementChild.firstElementChild
• heading.innerHTML=“Good Bye”;
• heading.style.color=“red”;
• document.querySelector(“input”).click();
Select HTML elements with
Javascript
• document.getElementsByTagName(“li”);//returns the array
• document.getElementsByClassName(“btn”);//return the array
• document.getElementById(“title”);//returns single item
• document.querySelector(“h1”);
• document.querySelector(“#h1”);
• document.querySelector(“li a”);
• document.querySelector(“li.item”);
• document.querySelectorAll(“#list .item”);//returns the array
Manupulating Styles of HTML
Element
• It is similar to all the styles we can change with CSS.
• The only difference here is we cannot use - like “background-color”,
instead use the camelCase like backgroundColor.
Separation of Concern
• document.querySelector(“button”).classList.add(“invisible”);
• document.querySelector(“button”).classList.remove(“invisible”);
• document.querySelector(“button”).classList.toggle(“invisible”);
Text Manipulation
• Difference between innerHtml and textContent.
0
