HTML DOM (Document Object model)
What is DOM?
DOM is the standard of the World Wide Web Consortium.
The DOM defines the standard for accessing HTML and XML documents.
The Document Object Model (DOM) is a platform-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
The DOM standard is divided into 3 different parts:
- Core DOM-a standard model for any structured document
- XML DOM-a standard model for XML documents
- HTML DOM-A standard model for HTML documents
While accessing the browser, the browser creates the Document object model of the page, while the Web page is loaded.
With the programmable object model, JavaScript has the ability to create dynamic HTML.
- JavaScript can change all HTML elements in a page
- JavaScript can change all HTML attributes in a page
- JavaScript can change all CSS styles in a page
- JavaScript can react to all the events in the page
In the HTML DOM, everything is a node, and the DOM is the HTML that is treated as a node tree, by the actions performed on the node.
Programming Interface
The HTML DOM can be accessed through JavaScript (and other programming languages). All HTML elements are defined as objects, while programming interfaces are object methods and object properties. Methods are actions that you can perform (such as adding or modifying elements). A property is a value that you can get or set (such as the name or content of a node).
Some common HTML DOM properties:
- InnerHTML-Text value of the node (element)
- ParentNode-parent node of the node (element)
- ChildNodes-Child nodes of nodes (elements)
- Attributes-node (element) attribute node
Some common HTML DOM methods:
methods |
Description |
getElementById () |
returns the element with the specified ID. |
getelementsbytagname () |
Returns a list of nodes (a collection/node array) that contains all the elements with the specified label name. |
getelementsbyclassname () |
Returns a list of nodes that contain all the elements with the specified class name. |
appendchild () |
adds a new child node to the specified node. |
removechild () |
deletes child nodes. |
replacechild () |
replaces child nodes. |
insertbefore () |
inserts a new child node in front of the specified child node. |
createattribute () |
creates an attribute node. |
createelement () |
creates an element node. |
createtextnode () |
creates a text node. |
getattribute () |
returns the specified property value. |
setAttribute () |
Sets or modifies the specified property to the specified value. |
Finding HTML elements
Method (i) The simplest way to find HTML elements in the DOM is by using the ID of the element.
Find elements of id= "Intro"
Var
If the element is found, the method returns the element in the form of an object (in X), and if the element is not found, X will contain null.
Method (ii) The simplest way to find HTML elements in the DOM is to find HTML elements by using the ID of the element through the tag name
Find the element that id= "main", and then look for all the <p> elements in "main":
var x=document.getelementbyid ("main"var
tip : Finding HTML elements through the class name is not valid in IE 5,6,7,8.
changing the HTML output stream
In JavaScript, document.write () can be used to write content directly to the HTML output stream.
document.write (Date ());
Change HTML content
The simplest way to modify HTML content is to use the InnerHTML property.
document.getElementById ("P1"). Innerhtml= "New text!";
Changing HTML Properties
To change the attributes of an HTML element, use this syntax: document.getElementById (ID). attribute=New Value
document.getElementById ("image"). src= "Landscape.jpg";
Change HTML style
To change the style of your HTML element, use this syntax: document.getElementById (ID). style.property=New Style
document.getElementById ("P2"). style.color= "Blue";
Respond to Events
We can execute JavaScript when an event occurs, such as when a user clicks on an HTML element.
Examples of HTML events:
use HTML DOM to assign events
HTML DOM allows you to assign events to HTML elements by using JavaScript:
onload and OnUnload events
The onload and OnUnload events are triggered when the user enters or leaves the page.
The OnLoad event can be used to detect the browser type and browser version of the visitor and to load the correct version of the Web page based on that information.
The onload and OnUnload events can be used to process cookies.
onchange Events
OnChange events are often used in conjunction with validation of input fields.
onmouseover and onmouseout events
The onmouseover and onmouseout events can be used to trigger a function when a user moves the mouse over an HTML element or moves out of an element.
onmousedown, onmouseup, and onclick events
OnMouseDown, onmouseup, and onclick form all parts of the mouse click event. First, when the mouse button is clicked, the OnMouseDown event is triggered, and when the mouse button is released, the OnMouseUp event is triggered, and the onclick event is triggered when the mouse click is completed.
Add and remove nodes (HTML elements).
Create a new HTML element
To add a new element to the HTML DOM, you must first create the element (the element node), and then append the element to an existing element.
1 <div id = "div1">
2 <p id = "p1"> This is a paragraph </ p>
3 <p id = "p2"> This is another paragraph </ p>
4 </ div>
5
6 <script>
7 var para = document.createElement ("p");
8 var node = document.createTextNode ("This is a new paragraph.");
9 para.appendChild (node);
10 var element = document.getElementById ("div1");
11 element.appendChild (para);
12 </ script>
Delete an existing HTML element
To delete an HTML element, you must first obtain the parent element of the element:
1 <div id = "div1">
2 <p id = "p1"> This is a paragraph. </ p>
3 <p id = "p2"> This is another paragraph. </ p>
4 </ div>
5
6 <script>
7 var parent = document.getElementById ("div1");
8 var child = document.getElementById ("p1");
9 parent.removeChild (child);
10 </ script>
Tip: It's great to be able to delete an element without referencing the parent element. But I'm sorry. The DOM needs to be clear about the element that needs to be removed, and its parent element.
This is a common solution: find the child element that you want to delete, and then use its ParentNode property to find the parent element:
1var child=document.getelementbyid ("P1"2 child.parentNode.removeChild ( Child);
JavaScript attack (quad) HTML DOM