🪴 TJ's Notes 1.0

JavaScript DOM

5 min read

Here’s a comprehensive note on JavaScript and the DOM:

JavaScript and the DOM (Document Object Model)

Introduction

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of an HTML document as a tree of objects, where each object corresponds to a part of the document (such as an element, attribute, or text). JavaScript interacts with the DOM to dynamically manipulate the content, structure, and style of web pages.

What is the DOM?

The DOM is a hierarchical representation of an HTML or XML document that can be modified by programming languages like JavaScript. In the DOM:

  • The document is the root of the tree.
  • Elements (like <div>, <p>, <a>) are nodes in the tree.
  • Attributes (like class, id, href) are properties of elements.
  • Text inside elements are also nodes.

Basic Structure of the DOM Tree:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>This is a paragraph.</p>
</body>
</html>

This HTML document is represented by the following DOM tree:

Document
 ├── html
      ├── head
      |    └── title
      └── body
           ├── h1
           └── p

JavaScript can access and manipulate any of these elements, attributes, or text content through the DOM.

Accessing DOM Elements

To manipulate HTML elements in JavaScript, we need to first select or access the elements from the DOM. There are several methods for selecting elements:

1. getElementById

This method selects an element by its unique id attribute.

<p id="example">This is an example.</p>
 
<script>
    var element = document.getElementById("example");
    console.log(element);  // Outputs: <p id="example">This is an example.</p>
</script>

2. getElementsByClassName

This method returns a collection of all elements that have the specified class name.

<div class="box">Box 1</div>
<div class="box">Box 2</div>
 
<script>
    var elements = document.getElementsByClassName("box");
    console.log(elements);  // Outputs an HTMLCollection of elements with class "box"
</script>

3. getElementsByTagName

This method returns a collection of all elements with the specified tag name.

<h1>Heading</h1>
<p>First paragraph</p>
<p>Second paragraph</p>
 
<script>
    var paragraphs = document.getElementsByTagName("p");
    console.log(paragraphs);  // Outputs all <p> elements
</script>

4. querySelector and querySelectorAll

  • querySelector returns the first element that matches the specified CSS selector.
  • querySelectorAll returns all elements that match the specified CSS selector.
<div class="container">
    <p class="text">First paragraph</p>
    <p class="text">Second paragraph</p>
</div>
 
<script>
    var firstText = document.querySelector(".text");  // Selects the first element with class 'text'
    var allTexts = document.querySelectorAll(".text");  // Selects all elements with class 'text'
    console.log(firstText);
    console.log(allTexts);
</script>

Manipulating DOM Elements

Once we have selected an element, we can manipulate its content, style, and attributes.

1. Changing HTML Content

You can change the inner content (HTML) of an element using innerHTML or textContent.

Example:

<p id="demo">This is a demo paragraph.</p>
 
<script>
    document.getElementById("demo").innerHTML = "Updated content!";
</script>

2. Changing Element Styles

You can change the CSS of an element directly from JavaScript using the style property.

Example:

<p id="styleMe">Style me using JavaScript!</p>
 
<script>
    document.getElementById("styleMe").style.color = "red";  // Changes the text color to red
    document.getElementById("styleMe").style.fontSize = "24px";  // Increases font size
</script>

3. Adding or Removing Classes

Instead of directly manipulating styles, it’s a best practice to add or remove classes using JavaScript.

Example:

<p id="classDemo" class="blue">This text is blue.</p>
 
<script>
    document.getElementById("classDemo").classList.add("highlight");  // Adds a new class 'highlight'
    document.getElementById("classDemo").classList.remove("blue");    // Removes the 'blue' class
</script>

4. Manipulating Attributes

Attributes like src, href, alt, etc., can be modified using setAttribute and getAttribute.

Example:

<img id="myImage" src="image1.jpg" alt="Image 1">
 
<script>
    var img = document.getElementById("myImage");
    img.setAttribute("src", "image2.jpg");  // Changes the image source to "image2.jpg"
    console.log(img.getAttribute("alt"));    // Outputs: "Image 1"
</script>

5. Adding or Removing Elements

JavaScript can dynamically create, append, or remove elements from the DOM.

Example (Creating and Appending Elements):

<ul id="myList">
    <li>Item 1</li>
</ul>
 
<script>
    var newItem = document.createElement("li");  // Create a new <li> element
    newItem.textContent = "Item 2";  // Set the content of the new item
    document.getElementById("myList").appendChild(newItem);  // Append the new item to the list
</script>

Example (Removing Elements):

<script>
    var item = document.getElementById("myList");
    item.removeChild(item.lastElementChild);  // Removes the last item from the list
</script>

Event Handling in the DOM

Events are actions that happen in the browser, such as clicks, key presses, or mouse movements. JavaScript can listen for these events and respond accordingly.

1. Adding Event Listeners

You can attach event listeners to DOM elements using addEventListener.

Example:

<button id="myButton">Click me!</button>
 
<script>
    document.getElementById("myButton").addEventListener("click", function() {
        alert("Button was clicked!");
    });
</script>

2. Common DOM Events

  • Click Event: Triggered when an element is clicked.
  • Mouseover Event: Triggered when the mouse pointer moves over an element.
  • Keydown Event: Triggered when a key is pressed down.
  • Submit Event: Triggered when a form is submitted.

Example of a Form Event:

<form id="myForm">
    <input type="text" name="name">
    <input type="submit" value="Submit">
</form>
 
<script>
    document.getElementById("myForm").addEventListener("submit", function(event) {
        event.preventDefault();  // Prevent form from submitting
        alert("Form submitted!");
    });
</script>

DOM Traversal

DOM traversal refers to navigating between elements in the DOM hierarchy. You can use various properties to move between parent, child, and sibling elements.

Example of Traversal:

<div id="parent">
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
</div>
 
<script>
    var parent = document.getElementById("parent");
    var firstChild = parent.firstElementChild;  // Gets the first child element
    var nextSibling = firstChild.nextElementSibling;  // Gets the next sibling element
    console.log(nextSibling.textContent);  // Outputs: "Second Paragraph"
</script>

Conclusion

The DOM is an essential part of web development, enabling dynamic interaction between HTML and JavaScript. Mastering DOM manipulation, events, and traversal will allow you to create highly interactive and responsive websites. By learning how to access, manipulate, and respond to the DOM, you can build web applications that provide rich user experiences.

References

Graph View

Backlinks