HTML DOM querySelectorAll() Method

HTML DOM querySelector() Method

Last Updated : 29 Nov, 2024

The querySelector() method returns the first element that matches the specified Selector. It only gives one element from the HTML DOM if found else it returns null. To get all the matching elements, you can use the querySelectorAll() method.

Syntax

// To search in complete documemt
ducument.querySelector(selectors);

// To search inside a specific element 
element.querySelector("html-tag .class-name #element-id...");

selectors: It is a string containing the CSS Selectors.

Return value: The first element that matches the selectors if found else null.

HTML

<!DOCTYPE html>
<html>
<body style="text-align: center">
    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>

    <button onclick="myFunction()">Try it</button>
    <script>
        function myFunction() {

            // Select the first p element
            let e = document.querySelector("p");

            // Dynamically apply styling 
            // to the first p element
            e.style.backgroundColor = "Green";
            e.style.color = "white";
        }
    </script>
</body>
</html>

Output:

HTML-DOM-querySelector-Example

HTML DOM querySelector Method Example

HTML DOM querySelectorAll() Method

GeeksforGeeks

Improve

Article Tags :

Similar Reads

HTML DOM normalize() Method

The normalize() method in HTML is used to merge the adjacent text nodes with the first text node and flush out the empty nodes. The normalize() method does not require any parameter. Syntax: node.normalize() Example 1: In this example, we will use normalize() method. C/C++ Code <!DOCTYPE html>

HTML DOM links Collection

The DOM links collection is used to return the collection of all <a> and <area> elements with the "href" attribute in the HTML document. The elements in the collection are sorted as they appear in the sourcecode. Syntax: document.links Properties: It contains a single property length whi

HTML DOM open() Method

The DOM Open() method in HTML is the combination of the following three steps: Opens an output stream to collect the output.Collects output from the document.write() or document.writeln() methods.Runs the document.close to display the output written to the output stream. Syntax: document.open( MIMEt

HTML DOM designMode Property

The DOM designMode property in HTML is used to specify whether the document is editable or not. It can also be used to set the document editable.Â Syntax: Set: This property is used to set whether the document is editable or not.document.designMode = "on|off";Get: This property is used to return whe

HTML DOM Style borderCollapse Property

The DOM Style borderCollapse property in HTML is used to set or return whether the border of the table collapsed into a single border or not. Syntax: It is used to return the borderCollapse property.object.style.borderCollapse It is used to set borderCollapse property.object.style.borderCollapse = "

HTML DOM Style borderBottom Property

The DOM style borderBottom property is used to set or return the three different border-bottom properties such as border-bottom-width, border-bottom-style, and border-bottom-color of an element. Syntax: It returns the borderBottom Property.object.style.borderBottomIt is used to set the borderBottom

HTML DOM Style color Property

The DOM style color property is used to set or return the color of the text. Syntax: It is used to set the color property.object.style.colorIt is used to return the color property.object.style.color = "color|initial|inherit" Return Values: It returns a string value that represents a text-color of an

HTML DOM cookie Property

Almost every website stores cookies (small text files) on the user's computer for recognition and to keep track of his preferences. DOM cookie property sets or gets all the key/value pairs of cookies associated with the current document. Getting all the Cookies:Â The document.cookie method returns a

HTML DOM isId Property

The isId Property contains a boolean value that returns a true if the Element has an attribute type of ID, otherwise, it returns a false or undefined value. This Property is used for read-only. Syntax: attribute.isId Return Value: It returns a Boolean value i.e. true if the attribute type is ID, els

HTML DOM createElement() Method

In an HTML document, the document.createElement() is a method used to create the HTML element. The element specified using elementName is created or an unknown HTML element is created if the specified elementName is not recognized.Â Syntax let element = document.createElement("elementName");In the a