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.
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.
Why DOM is important ?
- 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.
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
Finding HTML Elements
- 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 Tag Name
- This example finds all <p> elements:
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 - 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 - 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:
Sample Code - document.anchors
HTML Elements Using document.anchors HTML CSS PHP Number of anchors are: 3