![]() const ele = document.querySelectorAll("p") Ĭonsole.log(ele) // return nodelist collection of p tag It returns the Nodelist collection which is not live. This method returns all the elements that match the passed selector. The document.querySelectorAll() method is an extension of the querySelector method. How to use the document.querySelectorAll() method When selecting using a tag, simply select directly.When selecting using id, use (#) at the start.When selecting using class, use (.) at the start.Take a look at the below example: const id = document.querySelector("#idname") // using idĬonst classname = document.querySelector(".classname") // using classĬonst tag = document.querySelector("p") // using tagname Now here, we can pass classname, id, and tagname. The document.querySelector() method returns the first element that matches the passed selector. It returns an HTMLCollection which is a live collection.Įxample: const paragraph = document.getElementByTagName("p") Ĭonst heading = document.getElementByTagName("h1") Ĭonsole.log(paragraph) // p element HTMLCollectionĬonsole.log(heading) // h1 element HTMLCollection How to use the document.querySelector() method The document.getElementByTagName() method returns the HTMLCollection of elements that match the passed tag name. ![]() So what does it mean that the HTMLCollection is "live"? Well, it means that once we get the HTMLCollection for a class name, if we add an element with the same class name, then the HTMLCollection gets updated automatically.Įxample: const ele = document.getElementB圜lassName("ClassName") Ĭonsole.log(ele) // Logs Live HTMLCollection How to use the document.getElementByTagName() method We can search for multiple class names by passing the class names separated by whitespaces. The document.getElementB圜lassName() method returns an HTMLCollection of elements that match the passed class's name. Since the ids of HTML elements are supposed to be unique, this is a faster way to select an element with ids.Įxample: const ele = document.getElementById("IDName") Ĭonsole.log(ele) // This will log the whole HTML element How to use the document.getElementB圜lassName() method The getElementById() method returns an element whose id matches a passed string. How to use the document.getElementById() method ![]() These are the methods we'll look at here: There are multiple ways we can select HTML elements in JavaScript. With the help of the DOM, we can select, delete, and create element in JavaScript. How to Select, Create, and Delete Elements Using the DOM We mostly work with the document which has most commonly used methods like document.queryselector(), document.getElementBy Id(), and so on. The Node in the above diagram is represented by a JavaScript object. These individual parts of the document are known as nodes. In the DOM, all parts of the document, such as elements, attributes, text, and so on are organized in a hierarchical tree-like structure that consists of parents and children. Nodes are in the DOM aka Document Object model. Even the document object (of the HTML DOM) is a property of the window object. ![]() Global functions are methods of the window object. Global variables are properties of the window object. All global JavaScript objects, functions, and variables automatically become members of the window object. Element, and its children, as well as Document and Window are the most common event targets, but other objects can be event targets, too. In other words, any target of events implements the three methods associated with this interface. The EventTarget interface is implemented by objects which can receive events and may have listeners for them. You can understand better how it works with the help of the below diagram: The parent element is called the EventTarget. The DOM is organized in a really clever manner. The DOM is a very complex API which has methods and properties to interact with the DOM tree. The DOM tree is generated from an HTML document, which you can then interact with. With the help of the DOM, you can write JavaScript to create, modify, and delete HTML elements, set styles, classes and attributes, and listen and respond to events. It's the interface between JavaScript and the web browser. What is the DOM?ĭOM stands for Document Object Model. In this article, you'll learn what the DOM is and how it works. Understanding how the DOM and events work in JavaScript is key if you want to be an effective front end developer.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |