Techniques for Finding DOM Elements
The below table illustrates the various techniques for Finding DOM Elements with their description and syntax.
Methods |
Descriptions |
Syntax |
---|---|---|
id | It returns the HTML element with the specified id value. | document.getElementById(“mybox”) |
tag name | It returns all the HTML element with the specified name value. | document.getElementsByTagName(“a”) |
class name | It returns the element with the specified id value. | document.getElementsByClassName(“box”) |
CSS selectors | Used to find any element(s) for styling purpose. | document.querySelectorAll(selectors) |
Example: The example illustrates how to find the element and make operations using CSS Selectors property.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >HTML DOM</ title > </ head > < body > < h1 id = "mybox" >w3wiki</ h1 > < h3 > HTML DOM using property querySelectorAll </ h3 > < script > const element = document.querySelectorAll("h1")[0] element.style.color = "green"; </ script > </ body > </ html > |
Output:
What is HTML DOM ?
HTML DOM stands for the Document Object Model is a tree-like structure that offers dynamic interaction and manipulation of the content, structure, and style of an HTML document. It is an interface for web documents. Based on user activity The HTML DOM offers to create interactive web pages where elements can be added, removed, or modified.
Table of Content
- Significance of HTML DOM
- HTML DOM Structure
- Adding New Element to the DOM
- Techniques for Finding DOM Elements
- Event Listeners
- Accessing the DOM
Contact Us