What is DOM in HTML - HTML Tutorial



Introduction to the DOM

  • The Document Object Model (DOM) is the data representation of the objects that include the structure and content of a document on the web.
  • It introduces the DOM, look at how the DOM denotes an HTML document in memory and how to use APIs to create web content and applications.
DOM

What is the DOM ?

  • The Document Object Model (DOM) is a programming interface for web documents.
  • It represents the page so that programs can change the document structure, style, and content.
  • The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.
  • A web page is a document that can be either shown in the browser window or as the HTML source. In both cases, it is the same document but the Document Object Model (DOM) representation allows it to be manipulated.
  • As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript.

DOM in HTML Javascript


Why DOM is important ?

  • The DOM is not a programming language, but without it, the JavaScript language wouldn’t be able to access any of the web pages elements in HTML documents, XML documents or their component parts .
  • One important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications.
  • With DOM, JavaScript gets all the power it needs to create dynamic HTML such as changing the HTML elements, attributes, CSS styles, elements and events in the page. We can say that:
    • API = DOM + JavaScript

Types of DOM

  • The W3C DOM standard is separated into 3 different parts:
    • Core DOM — standard model for all document types(All DOM implementations must support the interfaces listed as “fundamental” in the Core specification.)
    • XML DOM — standard model for XML documents (As the name suggests, all XML elements can be accessed through the XML DOM.)
    • HTML DOM — standard model for HTML documents (The HTML DOM is a standard for how to get, change, add, or delete HTML elements.)

Commonly used Interfaces

  • document.getElementById(id)
  • document.getElementsByTagName(name)
  • document.createElement(name)
  • parentNode.appendChild(node)
  • element.innerHTML
  • element.style.left
  • element.setAttribute()
  • element.getAttribute()
  • element.addEventListener()
  • window.content
  • window.onload
  • window.scrollTo()

Finding HTML Elements

  • When you want to access HTML elements with JavaScript, you have to find the elements first.
    • Finding HTML elements by id
    • Finding HTML elements by tag name
    • Finding HTML elements by class name
    • Finding HTML elements by CSS selectors
    • Finding HTML elements by HTML object collections

Finding HTML elements by id

  • The easiest way to find an HTML element in the DOM, is by using the element id.
  • This example finds the element with id="para"
  • If the element is found, the method will return the element as an object (in myElement).
  • If the element is not found, myElement will contain null.

finding-html-elements-by-id

Sample Code

<!DOCTYPE html>
<html>
    <body>
            <h2>JavaScript HTML DOM - Wikitechy</h2>
            <p id="para">Finding HTML Elements by Id</p>
            <p id="demo"></p>
            <script>
                            const element = document.getElementById("para");
                            document.getElementById("demo").innerHTML = "The text from the para paragraph is: " 
                            + element.innerHTML;
                           </script>        
    </body>
</html>

Output

JavaScript HTML DOM - Wikitechy
Finding HTML Elements by Id

The text from the para paragraph is: Finding HTML Elements by Id

Finding HTML Elements by Tag Name

  • This example finds all <p> elements:

finding-html-elements-by-tag-name

Sample Code

<!DOCTYPE html>
<html>
    <body>
            <h2>JavaScript HTML DOM - Wikitechy</h2>
            <p>Finding HTML Elements by Tag Name</p>
            <p id="demo"></p>
            <script>
                           const element = document.getElementsByTagName("p");

                           document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' + element[0].innerHTML;
                           </script>        
    </body>
</html>

Output

JavaScript HTML DOM - Wikitechy
Finding HTML Elements by Tag Name

The text in first paragraph (index 0) is: Finding HTML Elements by Tag Name

Finding HTML Elements by Class Name

  • To find all HTML elements with the same class name, use getElementsByClassName().
  • This example returns a list of all elements with class="para".

finding-html-elements-by-class-name

Sample Code

<!DOCTYPE html>
<html>
    <body>
            <h2>Finding HTML Elements by Class Name  - Wikitechy</h2>
           
            <p class="para">Hello World!</p>
            <p id="demo"></p>
            <script>
                           const a = document.getElementsByClassName("para");
                           document.getElementById("demo").innerHTML = 
                           'The first paragraph (index 0) with class="para" is: ' + a[0].innerHTML;

                           </script>        
    </body>
</html>

Output

Finding HTML Elements by Class Name - Wikitechy
Hello World!

The first paragraph (index 0) with class="para" is: Hello World!

Finding HTML Elements by CSS Selectors

  • To find all HTML elements that matches a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the querySelectorAll() method.
  • This example returns a list of all <p> elements with class="para".

finding-html-elements-by-query-selector

Sample Code

<!DOCTYPE html>
<html>
    <body>
            <h2>Finding HTML Elements by Query Selector - Wikitechy</h2>
           
            <p class="para">Hello World!</p>
            <p id="demo"></p>
            <script>
                           const x = document.querySelectorAll("p.para");
                           document.getElementById("demo").innerHTML = 
                           'The first paragraph (index 0) with class="para" is: ' + x[0].innerHTML;
                           </script>        
    </body>
</html>

Output

Finding HTML Elements by Query Selector - Wikitechy
Hello World!

The first paragraph (index 0) with class="para" is: Hello World!

Finding HTML Elements by HTML Object Collections

  • HTML object collections are also accessible:
    • document.anchors
    • document.forms
    • document.images
    • document.links
    • document.scripts

html-elements-using-document-anchors

Sample Code - document.anchors

<!DOCTYPE html>
<html>
    <body>
            <h2>HTML Elements Using document.anchors</h2>
           
            <a name="html">HTML</a><br>
            <a name="css">CSS</a><br>
            <a name="php">PHP</a><br>
            <p id="demo"></p>
            <script>
                           document.getElementById("demo").innerHTML =
                           "Number of anchors are: " + document.anchors.length;
                           </script>        
    </body>
</html>

Output

HTML Elements Using document.anchors
HTML
CSS
PHP
Number of anchors are: 3

Related Searches to What is DOM in HTML