Hello, readers Welcome to my first blog. In this blog, we will look at various DOM methods used in JavaScript. HTML DOM methods are actions we can perform on HTML elements. HTML DOM properties are values of HTML Elements that we can set or Change.
The HTML DOM can be accessed with JavaScript.The programming interface is the properties and methods of each object. Now we will discuss various types of methods by which we can select CSS selectors.
Single Element Selector
1. Accessing Elements by ID:
2.querySelector:
1. Accessing Elements by ID: It returns an element that matches the specified Id.
Syntax: document.getElementById(elementName);
<h1 id = "demo">This is heading</h1>
var x = document.getElementById("#demo); //here we are selecting h1 element having Id demo
x.style.color = "red"; //here we are styling selected element and applying red color on it
2.querySelector: It returns the first element that matches the specified CSS selector(i.e. className, tagName or ID) in the document.
document.querySelector("#my-class"); //here we are selecting element by ID
document.querySelector(".my-class"); //here we are selecting element by className
document.querySelector("p"); //here we are selecting element by tagName
Multiple Element Selector
1. querySelectAll
2. getElementsByTagName
3. getElementsByClassName
1. querySelectAll( ): It returns a list of document's elements that matches the specified group of selectors. It returns all elements in the document as a static NodeList object. The node can be accessed by index numbers. Index starts with 0. Every element will have a unique ID.
document.querySelectorAll(".heading"); // it will return list of all elements having class heading
document.querySelectorAll("p.animation"); // it will return all p tag elements in document with class animation
2. getElementsByTagName( ): It returns a list of document's elements that matches the specified tagName. It returns all elements in the document as a static NodeList object. The node can be accessed by index numbers using for loop or forEach loop. Index starts with 0.
Syntax: document.getElementByTagName("TagName");
<p> this is para1 </p>
<p> this is para2 </p>
let mytag = document.getElementByTagName("p"); // it returns list of elements having p tag
for(let i=0; i<mytag.length; i++) // we are modifying every p tag using for loop
{
mytag[i].style.color = "red";
}
3. getElementsByClassName( ) It returns a list of document's elements that matches the specified class name. It returns all elements in the document as a static NodeList object. The node can be accessed by index numbers using for loop or forEach loop. Index starts with 0. Multiple elements may or may not have the same class name.
Syntax: document.getElementByClassName(".ClassName");
<div class = "demo"> class 1 </div>
<div class = "demo"> class 2 </div>
let myClass = document.getElementByClassName(".demo"); //it returns list of elements having class name demo
I hope you enjoyed reading this post as much as I enjoyed writing it, I’d be very grateful if you’d ♥ it & share it with your developer friend👨🏽💻 Thank you! Keep Learning and keep coding. 🤠