Quick Contact

    JavaScript DOM Selectors

    Introduction

    JavaScript is most typically used to retrieve or modify that content or values of HTML elements on a website, as well as to perform effects such as show, hidden, movements, and so on. However, before you can take any action, you must first locate or select the target HTML element.

    In the sections that follow, students will learn some of the most common methods for selecting components on a website and doing something with them using JavaScript.

    Selecting the Topmost Elements

    The uppermost components of an HTML document are immediately accessible as document attributes. For example, the < html> element may be accessible via the document.documentElement property, the < head> element via the document.head property, as well as the < body> element via the document.body property.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>JavaScript Select Topmost Elements< /title>
    < /head>
    < body>
    < script>
    
    document.write(document.documentElement.getAttribute("lang")); 
    document.write("< br>");
    
    
    document.body.style.background = "orange";
    
    
    document.write(document.head.firstElementChild.nodeName); 
    < /script>
    < /body>
    < /html>
    

    Output

    But be cautious. If you use document.body before the < body> tag (for example, inside the < head>), this will return null rather than the body component. Because the < body> element was not processed by the browser there at point when the script has executed, document.body is genuinely null at that time.

    Selecting Elements by ID

    The getElementById() function allows you to choose an element based on its unique ID. This is the simplest method for locating an HTML element in the DOM tree.

    The example below selects and highlights an element with the ID property id=”mark.”

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>JavaScript Select an Element by its ID Attribute< /title>
    < /head>
    < body>
    < p id="mark">This is a paragraph of text.< /p>
    < p>This is another paragraph of text.< /p>
    
    < script>
    
    var match = document.getElementById("mark");
    
    
    match.style.background = "Orange";
    < /script>
    < /body>
    < /html>
    

    Output

    This is a paragraph of text.

    This is another paragraph of text.

    If a matching component is found on the page, the getElementById() method returns it as an object; otherwise, it returns null.

    Note:

    Any HTML element can have an id attribute. The value of this attribute must be unique within a page i.e. no two elements in the same page can have the same ID.

    Selecting Elements by Class Name

    Similarly, the getElementsByClassName() function may be used to pick all items with certain class names. This function produces an array-like object containing all child items with the supplied class names. Consider the following example:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>JavaScript Select Elements by Class Name< /title>
    < /head>
    < body>
    < p class="test">This is a paragraph of text.< /p>
    < div class="block test">This is another paragraph of text.< /div>
    < p>This is one more paragraph of text.< /p>
    < hr>
    
    < script>
    var matches = document.getElementsByClassName("test");
    document.write("Number of selected elements: " + matches.length);
    matches[0].style.fontWeight = "bold";
    matches[matches.length - 1].style.fontStyle = "italic";
    for(varelem in matches) {  
    matches[elem].style.background = "orange";
        }
    < /script>
    < /body>
    < /html>
    

    Output

    This is a paragraph of text.

    This is another paragraph of text.

    This is one more paragraph of text.

    ________________________________________

    Number of selected elements: 2

    Selecting Elements by Tag Name

    You may also use the getElementsByTagName() function to pick HTML elements by tag name. This function also produces an array-like object containing all child components with the supplied tag name.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>JavaScript Select Elements by Tag Name< /title>
    < /head>
    < body>
    < p>This is a paragraph of text.< /p>
    < div class="test">This is another paragraph of text.< /div>
    < p>This is one more paragraph of text.< /p>
    < hr>
    
    < script>
    
    var matches = document.getElementsByTagName("p");
    
    
    document.write("Number of selected elements: " + matches.length);
    
    
    for(varelem in matches) {  
    matches[elem].style.background = "Orange";
        }
    < /script>
    < /body>
    < /html>
    

    Output

    This is a paragraph of text.

    This is another paragraph of text.

    This is one more paragraph of text.

    ________________________________________

    Number of selected elements: 2

    Selecting Elements with CSS Selectors

    To pick components which match the supplied CSS selector, use the querySelectorAll() function. CSS selectors are a strong and fast method of choosing HTML components in a page. Please see the CSS instructional section for further information.

    This function produces a list of all the items whose selectors match the supplied ones. As seen in the following example, you may explore it just like any other array:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>JavaScript Select Elements with CSS Selectors< /title>
    < /head>
    < body>
    < ul>
    < li>Coffee< /li>
    < li class="tick">Juice< /li>
    < li>Tea< /li>
    < /ul>
    
    < script>
    
    var matches = document.querySelectorAll("ul li");
    
    
    document.write("Number of selected elements: " + matches.length + "< hr>")
    
    
    for(varelem of matches) {  
    document.write(elem.innerHTML + "< br>");
        }
    
    
    matches = document.querySelectorAll("ulli.tick");
    matches[0].style.textDecoration = "line-through";
    < /script>
    < /body>
    < /html>
    

    Output

    • Coffee
    • Juice
    • Tea

    Number of selected elements: 3

    ________________________________________

    Coffee

    Juice

    Tea

    FAQS

    Q1. What are selectors?

    A selector is a series of basic selections separated by combinators. White space, “>,” and “+” are examples of combinators. Between a combinator and the simple selectors that surround it, white space may occur. Subjects of the selector are document tree items that match a selection.

    Q2. What are the JavaScript selectors?

    Selectors are utilized to “find” (select) HTML components based on their tag name, id, classes, types, attributes, attribute values, and many other criteria. Our CSS Selector Reference contains a complete list of all selectors.

    Q3. What are the 5 types of selector?

    There are many basic different types of selectors.

    • Element Selector.
    • Id Selector.
    • Class Selector.
    • Universal Selector.
    • Group Selector.
    • Attribute Selector.

    Q4. What are DOM objects in JavaScript?

    The Document Object Model (DOM) is an online document programming interface. It depicts the page so program may modify the structure, style, and content of the document. The document is represented by the DOM as nodes and objects, allowing computer languages to interact with the page.

    Q5. Which of the selectors will be used to select all DOM elements?

    The selectAll() function retrieves all matching items in the HTML document depending on the CSS selector supplied. The following example chooses all items based on their tag names. As you can see in the above result, the style property was applied to all

    elements.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.