Blog

You are currently viewing JavaScript Cheat Sheet 11.1.5: jQuery DOM Selectors

JavaScript Cheat Sheet 11.1.5: jQuery DOM Selectors

jQuery DOM Selectors Tutorial

Welcome to the JavaScript / jQuery DOM Selectors tutorial! In this tutorial, we’ll cover the basics of selecting elements from the HTML document using JavaScript and jQuery. Understanding DOM selectors is fundamental to web development as it allows you to manipulate and interact with the elements on a webpage.

What is DOM?

DOM stands for Document Object Model. It is a programming interface for web documents. When a web page is loaded, the browser creates a Document Object Model of the page, which is essentially a tree-like structure where each node represents an element in the document. JavaScript can manipulate this DOM to change the structure, content, and style of the webpage dynamically.

What are DOM Selectors?

DOM Selectors are methods that allow you to select specific elements from the DOM so you can work with them programmatically. These selectors enable you to find elements by their ID, class, tag name, attributes, etc.

Using JavaScript DOM Selectors

JavaScript provides several methods for selecting elements from the DOM. Let’s explore some of the commonly used ones:

1. getElementById

This method allows you to select an element by its ID attribute.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript DOM Selector</title>
</head>
<body>
    <div id="myDiv">Hello World!</div>
    <script>
        var element = document.getElementById("myDiv");
        console.log(element.textContent); // Output: Hello World!
    </script>
</body>
</html>

Explanation:

  • We have an HTML document with a <div> element having an ID of “myDiv”.
  • In JavaScript, document.getElementById("myDiv") selects this element.
  • We then access the textContent property of the selected element to get its content.

2. getElementsByClassName

This method selects elements by their class name.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript DOM Selector</title>
</head>
<body>
    <div class="myClass">Element 1</div>
    <div class="myClass">Element 2</div>
    <script>
        var elements = document.getElementsByClassName("myClass");
        for (var i = 0; i < elements.length; i++) {
            console.log(elements[i].textContent); // Output: Element 1, Element 2
        }
    </script>
</body>
</html>

Explanation:

  • We have two <div> elements with the class “myClass”.
  • document.getElementsByClassName("myClass") selects both elements and returns a NodeList.
  • We iterate over this NodeList and log the textContent of each element.

3. getElementsByTagName

This method selects elements by their tag name.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript DOM Selector</title>
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <script>
        var paragraphs = document.getElementsByTagName("p");
        for (var i = 0; i < paragraphs.length; i++) {
            console.log(paragraphs[i].textContent); // Output: Paragraph 1, Paragraph 2
        }
    </script>
</body>
</html>

Explanation:

  • We have two <p> elements.
  • document.getElementsByTagName("p") selects both <p> elements and returns a NodeList.
  • We iterate over this NodeList and log the textContent of each element.

Using jQuery DOM Selectors

jQuery provides a simpler syntax for DOM manipulation compared to vanilla JavaScript. Let’s see how we can achieve the same results using jQuery:

1. Selecting by ID

jQuery uses the # symbol to select elements by ID.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery DOM Selector</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="myDiv">Hello World!</div>
    <script>
        var element = $("#myDiv");
        console.log(element.text()); // Output: Hello World!
    </script>
</body>
</html>

Explanation:

  • We include the jQuery library using a <script> tag.
  • $("#myDiv") selects the element with the ID “myDiv”.
  • We use the text() method to get the text content of the selected element.

2. Selecting by Class Name

jQuery uses the .classname syntax to select elements by class name.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery DOM Selector</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="myClass">Element 1</div>
    <div class="myClass">Element 2</div>
    <script>
        $(".myClass").each(function() {
            console.log($(this).text()); // Output: Element 1, Element 2
        });
    </script>
</body>
</html>

Explanation:

  • We include the jQuery library.
  • $(".myClass") selects all elements with the class “myClass”.
  • We use the each() method to iterate over the selected elements and log their text content.

3. Selecting by Tag Name

jQuery uses the tag name directly to select elements by tag name.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery DOM Selector</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <script>
        $("p").each(function() {
            console.log($(this).text()); // Output: Paragraph 1, Paragraph 2
        });
    </script>
</body>
</html>

Explanation:

  • We include the jQuery library.
  • $("p") selects all <p> elements.
  • We use the each() method to iterate over the selected elements and log their text content.

Conclusion

In this tutorial, we covered the basics of DOM selectors in JavaScript and jQuery. You should now have a good understanding of how to select elements from the DOM using various methods. Practice using these selectors in different scenarios to solidify your understanding. Happy coding!

Tags: , ,

Leave a Reply