DOM
DOM API (Document Object Model)
DOM API doesn't work in node; we need to run script in web browser.
DOM is hierarchical structure created by browser to depict html elements (in the form objects) to be used by JavaScript. DOM manipulation provides a way to manage and utilize html elements.
Difference between DOM and DOM API - DOM is set of objects in tree format created by browser dynamically (JavaScript representation of HTML page). DOM API is a way to use these objects. Without DOM API we cannot manipulate DOM.
DOM is created internally with Tree data structure.
Why DOM is important?
- Because it can allow to access HTML element
- Returns Array of elements
- getElementById() - return element by ID
- getElementsByClassName() - returns collection/array of objects
- getElementsByTagName() -
- Returns only first occurrence of an element
- querySelector()
- querySelectorAll()
- Change Control
- Event Handling
- Create/remove elements dynamically
querySelector() :
Returns the first element that is a descendant of node that matches selectors.
getEelementsByTagname() -
// DOM : Document Object Model
let e = document.getElementsByTagName('h1');// returns array of objects
console.log(e);
console.log(e[1].tagName);
console.log(e[1].textContent);
e.textContent = "Hello World! ";
querySelectorAll() - returns list of nodes object nodes.
// DOM : Document Object Model
let e = document.querySelectorAll('h1');
// returns array of objects
console.log(e);
console.log(e[1].tagName);
console.log(e[1].textContent);
e.textContent = "Hello World! ";
InnerHTML , textContent and innerText:
InnerHTML provides html tags along with the primary tag.
InnerText provides text content with formatted text truncating spaces from left and right
textcontent provides text as is without any formatting.
<!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>
<h1><u> JavaScript x x x x 1 </u></h1>
<h1>React</h1>
<script src="functions.js"></script>
</body>
</html>
We can use style attribute to use CSS properties. Only difference is that all the properties are represented in camel case notation without any hyphens.
Create elements dynamically
Using DOM properties we can create dynamic contents in JavaScript.
Properties -
createElement()
Here, we have appended a paragraph in body of the document. To remove we can simply call remove method
EEvent Handling
The activities which happen on the html elements are called Events.
Such as prompting to submit form of the page when submit button is clicked by user, JavaScript can react to the actions.
Example -
Using HTML default onclick attribute.
JavaScript function
// created function to call latter.
function makeMeRed()
{
let h = document.getElementById("heading");
h.style.color = "red";
}
HTML Snippet
<body>
<h1 id = "heading"> JavaScript 1</h1>
<h2>JavaScript 2</h2>
<div>
<button id = "b1" onclick="makeMeRed()">Click me! </button>
</div>
<script src="functions.js"></script>
</body>
Using eventListener API
We can use event listener API in JavaScript to add event listeners which is API of browser to listen to action such as user click.
JavaScript Code
let b1 = document.getElementById("b1");
let b2 = document.getElementById("b2");
// created function to call latter.
b1.addEventListener('click',makeMeRed);
b2.addEventListener('click',()=>{
let h = document.getElementById("heading");
h.style.color = "blue";
});
function makeMeRed()
{
let h = document.getElementById("heading");
h.style.color = "aqua";
}
HTML Snippet
<body>
<h1 id = "heading"> JavaScript 1</h1>
<h2>JavaScript 2</h2>
<div>
<button id = "b1" >Click me! </button>
<button id = "b2" > Revert to blue </button>
</div>
<script src="functions.js"></script>
</body>
Comments
Post a Comment