Scribd Logo
Upload

Welcome to Scribd!

  • 12 views

    The Document Object Model

    Uploaded by

    abcdefgop73

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    The Document Object Model

    Uploaded by

    abcdefgop73
    12 views3 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    12 views3 pages

    The Document Object Model

    Uploaded by

    abcdefgop73

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    You are on page 1of 3

    The Document Object Model (DOM) is a programming interface for web documents.

    It represents the
    structure of a document as a tree of nodes, where each node corresponds to a part of the document,
    such as an element, attribute, or text. The DOM allows programming languages, such as JavaScript, to
    interact with and manipulate web pages dynamically.

    Key Concepts of the DOM

    1. Nodes and Elements:

    o The DOM represents the document as a tree of nodes. The most common types of
    nodes are elements, attributes, and text.

    o Elements are the building blocks of an HTML document (e.g., <div>, <p>, <a>).

    2. Tree Structure:

    o The DOM is structured as a tree. The document itself is the root, with various child
    nodes branching out from it.

    o For example, an HTML document has a root node (<html>), which has children nodes
    like <head> and <body>.

    3. Interacting with the DOM:

    o You can use JavaScript to access and manipulate the DOM. This includes creating,
    modifying, and deleting elements, attributes, and text within a document.

    Example of DOM Manipulation

    Here is a simple example demonstrating how to interact with the DOM using JavaScript:

    HTML

    html

    Copy code

    <!DOCTYPE html>

    <html>

    <head>

    <title>DOM Example</title>

    </head>

    <body>

    <h1 id="title">Hello, World!</h1>

    <p>This is a paragraph.</p>

    <button id="changeTitle">Change Title</button>


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

    </body>

    </html>

    JavaScript (script.js)

    javascript

    Copy code

    // Accessing an element by its ID

    let titleElement = document.getElementById('title');

    // Changing the text content of the element

    titleElement.textContent = 'Hello, DOM!';

    // Adding an event listener to the button

    document.getElementById('changeTitle').addEventListener('click', function() {

    titleElement.textContent = 'Title Changed!';

    });

    DOM Methods and Properties

    Here are some commonly used DOM methods and properties:

     Selecting Elements:

    o document.getElementById('id')

    o document.getElementsByClassName('class')

    o document.getElementsByTagName('tag')

    o document.querySelector('selector')

    o document.querySelectorAll('selector')

     Modifying Elements:

    o element.textContent or element.innerHTML

    o element.setAttribute('attribute', 'value')

    o element.style.property = 'value'
    o element.classList.add('class')

    o element.classList.remove('class')

     Creating and Appending Elements:

    o document.createElement('tag')

    o parentElement.appendChild(newElement)

    You might also like