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.
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.
Sample Code
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:
Sample Code
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".
Sample Code
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".
Sample Code
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
Sample Code - document.anchors
Output
HTML Elements Using document.anchors
HTML
CSS
PHP
Number of anchors are: 3
What is HTML DOMJavaScript HTML DOMIntroduction to the DOMWhat is the Document Object ModelDocument Object Model domwhat is dom in javascriptwhat is javascript domdom full formdom in javascriptdom javascriptdom meaningwhat is domwhat is a domwhat is the domwhat is dom in html mcqdom exampledom in javascript with exampledocument object model