Skip to content

Latest commit

 

History

History
180 lines (138 loc) · 10.2 KB

n2.md

File metadata and controls

180 lines (138 loc) · 10.2 KB
Raw

Stars Badge Forks Badge Pull Requests Badge Issues Badge GitHub contributors Visitors

Don't forget to hit the ⭐ if you like this repo.

JavaScript: Document Object Model (DOM)

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a web page as a hierarchical tree-like structure, where each element in the markup is represented as a node in the tree. The DOM provides a way to access, manipulate, and dynamically update the content, structure, and style of a web page.

In JavaScript, the DOM allows developers to interact with web pages and make changes to the elements and their properties using scripting. Here are some key concepts related to the JavaScript DOM:

  1. Document Object: The top-level object in the DOM hierarchy is the document object. It represents the entire HTML document and serves as an entry point for accessing other elements within the document.

  2. Nodes: Elements, attributes, and text within an HTML document are represented as nodes in the DOM tree. There are different types of nodes, such as element nodes, text nodes, comment nodes, etc.

  3. Element Access and Manipulation: JavaScript provides methods and properties to access and manipulate elements in the DOM. Common methods include getElementById(), getElementsByClassName(), getElementsByTagName(), and querySelector().

  4. Changing Content and Attributes: You can modify the content of elements by changing their innerHTML or textContent properties. Similarly, you can manipulate attributes using methods like getAttribute(), setAttribute(), and removeAttribute().

  5. Event Handling: The DOM enables event-driven programming, where you can define functions to be executed when specific events occur, such as clicking a button or submitting a form. JavaScript provides methods like addEventListener() to attach event handlers to elements.

  6. Style Manipulation: You can modify the style of elements by accessing and modifying their CSS properties using JavaScript. This can be done through the style property of an element or by adding, removing, or toggling CSS classes using the classList property.

  7. DOM Traversal: The DOM allows you to navigate through the elements in the tree structure. You can move between parent, child, and sibling nodes using properties like parentNode, childNodes, firstChild, lastChild, nextSibling, and previousSibling.

  8. Dynamic Updates: JavaScript can dynamically create, add, remove, or modify elements in the DOM based on user interactions or other events. This enables dynamic content generation and interactive user experiences.

By leveraging the JavaScript DOM API, developers can create dynamic and interactive web applications, manipulate the structure and content of web pages, and respond to user actions and events. It forms an essential part of front-end web development and allows for the seamless integration of JavaScript with HTML and CSS.

Code: The usage of JavaScript and the DOM

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1 id="title">Welcome to DOM Example</h1>
    <p id="content">This is a paragraph.</p>
    <button id="btn">Click me!</button>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

// Accessing and modifying content
const titleElement = document.getElementById("title");
titleElement.innerHTML = "Updated Title";

const contentElement = document.getElementById("content");
contentElement.textContent = "This paragraph has been updated dynamically.";

// Modifying attributes
const btnElement = document.getElementById("btn");
btnElement.setAttribute("disabled", true);

// Adding event listener
btnElement.addEventListener("click", function() {
    titleElement.style.color = "red";
    contentElement.classList.add("highlight");
});

In this example, we access HTML elements using their IDs and modify their content and attributes using JavaScript. We retrieve the title and content elements using getElementById() and update their inner HTML and text content, respectively. The btn element is accessed using its ID, and we disable it using the setAttribute() method.

We also add an event listener to the btn element using addEventListener(). When the button is clicked, the event handler function is executed, which changes the color of the title element to red and adds a CSS class (highlight) to the content element.

These dynamic updates demonstrate how JavaScript can interact with the DOM, manipulate content and attributes, and respond to user actions, creating an interactive web page experience.

DOM Structured Tree

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree-like structure called the DOM tree or DOM structured tree. The DOM tree is generated by the browser when it parses an HTML or XML document.

The DOM tree consists of nodes that represent different elements, attributes, and text content present in the document. Here are some key types of nodes in the DOM tree:

  1. Element Nodes: These nodes represent HTML or XML elements such as <div>, <p>, <span>, etc. They form the main building blocks of the DOM tree.

  2. Text Nodes: Text nodes contain the actual textual content within an element. For example, the text "Hello, World!" inside a <p> element would be represented as a text node.

  3. Attribute Nodes: Attribute nodes store the attributes of an element. For instance, the attribute "src" in an <img> tag would be represented as an attribute node.

  4. Comment Nodes: Comment nodes represent comments added within the HTML or XML document. They are denoted by <!-- ... --> syntax.

  5. Document Node: The root of the DOM tree is represented by the document node, which represents the entire HTML or XML document.

The nodes in the DOM tree are organized in a hierarchical structure, with parent-child relationships. Each node can have zero or more child nodes and a single parent node (except for the document node, which has no parent). Nodes that share the same parent are called siblings.

The DOM tree allows developers to access and manipulate the structure and content of a web page using scripting languages like JavaScript. By using DOM methods and properties, developers can traverse the tree, add or remove elements, modify attributes and content, and respond to user interactions.

In summary, the DOM structured tree represents the hierarchical structure of an HTML or XML document, with nodes representing elements, attributes, text, and comments. It provides a powerful interface for developers to interact with and modify web pages dynamically.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <header>
        <h1>Welcome</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>About Us</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 Example Company. All rights reserved.</p>
    </footer>
</body>
</html>

DOM Structured Tree:

Document
├── html
│   ├── head
│   │   └── title
│   │       └── "Example"
│   └── body
│       ├── header
│       │   ├── h1
│       │   │   └── "Welcome"
│       │   └── nav
│       │       └── ul
│       │           ├── li
│       │           │   └── a
│       │           │       └── "Home"
│       │           ├── li
│       │           │   └── a
│       │           │       └── "About"
│       │           └── li
│       │               └── a
│       │                   └── "Contact"
│       ├── main
│       │   └── section
│       │       ├── h2
│       │       │   └── "About Us"
│       │       └── p
│       │           └── "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
│       └── footer
│           └── p
│               └── "&copy; 2023 Example Company. All rights reserved."

In the DOM structured tree, each HTML element is represented as a node, and the indentation shows the parent-child relationship between elements. The text content of an element is shown as a string within double quotes. This representation helps visualize the hierarchical structure of the HTML document as represented by the DOM.

Contribution 🛠️

Please create an Issue for any improvements, suggestions or errors in the content.

You can also contact me using Linkedin for any other queries or feedback.

Visitors