We generally use global variable
document to select the required HTML element. These are some of the ways to select HTML element :
const element = document.querySelector(".className"); const element = div.querySelector("#id");
querySelector() method works on
document, HTML tags(h1, p, div...) to select one HTML element with the given
#id. This method will return the 1st matched element from the DOM or document. If we apply this method on some html tags then that would help to select childs of that tag whereas document helps to select its child elements (i.e. all elements in HTML are childs of document).
const elements = document.querySelectorAll(".className"); const elements = div.querySelectorAll("tagName");
querySelectorAll() method returns an array with all the matches found. We use this to select multiple elements having same CSS class or tag.
Recommended to use
when we have to attach the same event handler or functionality to multiple elements, otherwise if we try to select multiple elements using tag name or class and try to attach different event handler depending on the element's position in the returned array then it might happen that position of the element in the HTML document changes in future which will produce wrong output eventually since event handlers need to be altered in that case.
const element = document.getElementById("id")
getElementById() is an another method to select an element using
id. We could do the same thing using querySelector() but we 're using "#" before the "id" while doing the same using querySelector(), in this case "#" is not required to select as we are using getElementById()
It's not like that we can only select existing HTML elements only, we can also create HTML element using DOM.
There're 3 steps to create a new HTML element. Follow the attached code to do so.
const newElement = document.createElement("tagName"); //to create a new element with the given tag(p, div,...) newElement.textContent = "textContentForNewElement"; //to add textContent to the new element document.querySelector("parentTagName").appendChild(newElement); //to append the new element in the any existing element of the document as a child
The above mentioned code will do the following
- create new element,
- add content for that,
- append the newly created element to the HTML document as a child of the given parent tag.
Once it's selected, we can manipulate as per our choice to fulfill the requirement - we can
- get content or value of an element,
- change content or value of an element,
- change styles, attributes, add or remove CSS classes from an element.
const element = document.querySelector(".className"); let msg = element.textContent;
This is for
<div>... tags which contain some text as content of the page, we can get that content as mentioned above to do some work.
const element = document.querySelector("#id"); let msg = element.value;
This is for input elements like textbox where we take some input from user and do our work after that.
const element = document.querySelector(".className"); element.textContent = "newContent";
For input elements like textbox
const element = document.querySelector(".className"); element.value = "newValue";
NOTE :- Notice when we are using
textContentand when we're using
- To change style of an element, we need to do the following after selecting the element from the DOM :
element.style.backgroundColor = "color"; //this is to set or change the background color of an element
- To set or change some attributes of an element, do the following step after selecting the element from the DOM :
element.src = "pathOfTheImageFile"; //this is to set or change the `src` attribute of an `<img>` element
- Add the CSS class to an element
- Remove the CSS class from an element
- Toggle the CSS class from an element i.e. remove the class from the element if it's present else add the class to the selected element.
- To get whether the CSS class is present or not with the selected element, it returns true or false based on the availability.
var isPresent = element.classList.contains("className");
There're tons of events which we can attach to an element, once that is selected. This is how you can attach one event to an element.
if there's any event that we want to execute once then we can remove that event as well once it's executed.
I have decided to discuss about DOM only in this blog, events will take may be another blog post to discuss.
Please feel free to share your comments on this blog post. Happy Learning :)