DOM (Document Object Model)

❮ Previous Next ❯

The Document Object Model (DOM) is like a toolbox for working with HTML and XML files. It helps us understand how documents are put together and lets us change and use them easily.

Structure of DOM:

Think of DOM like a tree or a group of trees. The structure model term is used to talk about the tree-shaped way a document is shown. The tree has branches that end in nodes, and each node holds things. You can attach event listeners to nodes, which can be set off when a certain event happens. One big thing about DOM structure models is that they're structured the same way: if two different ways of making DOM are used to show the same document, they will make the same structure with exactly the same things and connections.

Methods of Document Object

write(“string”): Writes the given string on the document.
getElementById(): returns the element having the given id value.
getElementsByName(): returns all the elements having the given name value.
getElementsByTagName(): returns all the elements having the given tag name.
getElementsByClassName(): returns all the elements having the given class name.

Levels of DOM

Level 0: Offers basic ways to interact with something at a simple level.
Level 1: DOM level 1 can be divided into two sections: CORE and HTML.
- CORE Offers basic tools to show any organized file using simple building blocks.
- HTML It offers easy-to-use tools for showing HTML documents.
Level 2: includes six specifications: CORE2, VIEWS, EVENTS, STYLE, TRAVERSAL, and RANGE.
- CORE2: Expands what CORE can do as defined in DOM level 1.
- VIEWS: let programs interactively access and change the stuff in a document.
- EVENTS: Events are like instructions that the browser follows when the user interacts with a web page.
- STYLE:Enables programs to easily and flexibly get to and change the content of style sheets.
- TRAVERSAL: This lets programs move through the document in a flexible way.
- RANGE: This lets programs find different types of content in a document as needed.
Level 3: It has five distinct features: CORE3, LOAD and SAVE, VALIDATION, EVENTS, and XPATH.
- CORE3:Expands what CORE can do, as defined in DOM level 2.
- LOAD and SAVE: This lets the program load stuff from an XML document and put it into a DOM document. It can also save the DOM document back into an XML document by making it into a series of data.
- VALIDATION: This helps the program change the document's content and structure as needed, while making sure the document stays correct.
- EVENTS: Expands what Events can do as described in DOM Level 2.
- XPATH: XPATH is like a map for finding things in a website's structure.

Example: This example shows how to change things on a webpage using the getElementById() Method.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h2> Propertutorials </h2>
    <p id="intro"> A Computer Science portal us. </p>
    <p> This example explains the getElementById method. </p>
    <p id="demo"> </p>
    <script>
      const myelement = document.getElementById("intro");
      document.getElementById("demo").innerHTML =
        "GeeksforGeeks introduction is: " + myelement.innerHTML;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <label>Enter Value 1:</label>
    <input type="text" id="val1" />
    <br />
    <br />
    <label>Enter Value 2:</label>
    <input type="text" id="val2" />
    <br />
    <button onclick="getAdd()">Click To Add</button>
    <p id="result"></p>
    <script>
      function getAdd() {
        // Fetch the value of input with id val1
        const num1 = Number(document.getElementById("val1").value);
        // Fetch the value of input with id val2
        const num2 = Number(document.getElementById("val2").value);
        const add = num1 + num2;
        console.log(add);
        // Displays the result in paragraph using dom
        document.getElementById("result").innerHTML = "Addition : " + add;
        // Changes the color of paragraph tag with red
        document.getElementById("result").style.color = "red";
      }
    </script>
  </body>
</html>

❮ Previous Next ❯

HTML Basics

HTML Tags

HTML Attributes

HTML Graphics

HTML APIs

HTML DOM

HTML Audio/Video

HTML 5 MathML

DOM (Document Object Model)

Structure of DOM:

Methods of Document Object

Levels of DOM

Web Development