What’s the DOM? #2
In this article, I’m going to teach the DOM methods.
Accessing HTML elements via class
If you want to access your HTML element and add changes to it the one approach is accessing by its class name.
For example, you have a paragraph(p) tag and want to access it by its class name.
we have p tag with para class name now I want to add changes to it or access it in my JS file.
As I mentioned yesterday that whole the page in a browser is called a document. Through a document that has all the HTML elements inside itself, we can gain access to them through the DOM methods.
If you have multiple elements that have the same class in this case para we can access all of them as an array via getElementsByClassName(className).
Accessing HTML elements via tag name
Accessing HTML elements by tag name is ideal to the previous method just has a subtle difference that we change ClassName to TagName.
if you want to access all p tag elements like array use getElementsByTagName(tagName).
Accessing HTML elements via ID
If you want to access your HTML element via ID you can use getElementById(id) and getElementsById(id).
Accessing HTML elements via query selector
One of the modern and easy approaches to access every kinda HTML element such as ID,CLASS,and Tag we use document.querySelector(id or classsname or tags). This is one of the common approaches that every developer use in their day to day coding.
if you want to access all HTML elements have same tag,class or id we can use document.querySelectorAll(id,class or tag)
For more info refer to W3Schools or MDN
if you have any criticism, question or any difficulty let me know in the comment section below.
