Table of contents
No headings in the article.
Title: Understanding DOM Query Selector in JavaScript
Introduction In web development, manipulating the Document Object Model (DOM) is a common task. The DOM provides a structured representation of HTML elements, allowing JavaScript to interact with and modify them dynamically. One powerful tool for accessing and manipulating DOM elements is the DOM Query Selector. In this blog post, we will explore the basics of DOM Query Selector and demonstrate its usage with examples.
1. Selecting Elements with Query Selector DOM Query Selector allows us to select elements based on various criteria such as tag name, id, or class. The following selectors can be used:
Tag Name: To select elements by their HTML tag name, we use the tag name directly. For example,
document.querySelector("body")will select the<body>element.ID: To select elements by their unique ID, we use the
#symbol followed by the ID value. For example,document.querySelector("#username")will select the element with the ID "username".Class: To select elements by their class name, we use the
.symbol followed by the class name. For example,document.querySelectorAll(".block")will select all elements with the class "block".
2. Modifying Elements with Query Selector Once we have selected an element using the Query Selector, we can modify its content, attributes, or style. Here are a few examples:
Changing Inner Text: To change the text content of an element, we can use the
innerTextproperty. For instance,username.innerText = "Changed"will replace the text inside the element with the ID "username" with the word "Changed".Changing HTML: To replace the HTML content of an element, we can use the
innerHTMLproperty. For example,body.innerHTML = "<h1>Hacked !!</h1>"will replace the entire content of the<body>element with an<h1>heading saying "Hacked!!".Modifying Style: We can also modify the style of an element using properties such as
style.background. For instance,elements.item(i).style.background = "tomato"will change the background color of elements with the class "block" to tomato.
3. Iterating Over Selected Elements DOM Query Selector provides methods like querySelectorAll and getElementsByClassName that return a collection of elements matching the selector. We can iterate over these collections and perform actions on each element. For example:
Using
querySelectorAll: We can select multiple elements using a specific class and iterate over them using theforEachfunction.document.querySelectorAll(".block").forEach((e) => { console.log(e.innerHTML); })will log the HTML content of each element with the class "block".Using
getElementsByClassName: We can select elements by class name and perform operations on them using a loop. For example,const elements = document.getElementsByClassName("block");followed by aforloop will allow us to modify or access each element individually.
4. Removing Elements DOM Query Selector can also be used to remove elements from the DOM. For example, elements[i].innerHTML = "" will remove the content inside the elements with the class "block1". You can adjust the selector and apply it to other elements as well.
Conclusion DOM Query Selector is a powerful tool that allows JavaScript to access and manipulate elements in the DOM. With its flexible selector syntax and methods like querySelector and querySelectorAll, we can easily target specific elements and perform various operations on them. Whether it's changing text, modifying HTML, iterating over elements, or removing elements, DOM Query Selector simplifies the process of dynamically interacting with the web page's structure. By understanding and mastering this feature, you can enhance your web development skills and create more interactive and dynamic web applications.