Html dom tutorial, html dom tutorial
HTML DOM
DOM is the Document Object Model ).
DOM defines the criteria for accessing HTML and XML documents: "The W3C Document Object Model (DOM) is an interface neutral to the platform and language, it allows programs and scripts to dynamically access and update the content, structure, and style of a document."
Html dom is a standard for getting, modifying, adding, or deleting HTML elements. DOM expresses HTML documents as a tree structure. As shown in:
In html dom, everything is a node. DOM is the HTML of the node tree.
With html dom, all nodes in the tree can be accessed through JavaScript. All HTML elements (nodes) can be modified or created or deleted.
According to W3C html dom standards, all content in HTML documents is node:
Nodes in the node tree have hierarchical relationships with each other.
Terms such as parent, child, and sibling are used to describe these relationships. The parent node has a subnode. Sub-nodes of the same level are called siblings ).
The following figure shows a part of the node tree and the relationship between nodes:
See the following html snippet:
<html>
<head>
<title> DOM Tutorial </ title>
</ head>
<body>
<h1> DOM first lesson </ h1>
<p> Hello world! </ p>
</ body>
</ html>
From the HTML above:
The <html> node has no parent node; it is the root node
The parent of <head> and <body> are <html> nodes
The parent node of the text node "Hello world!" Is the <p> node
and:
The <html> node has two child nodes: <head> and <body>
The <head> node has one child node: the <title> node
The <title> node also has a child node: the text node "DOM Tutorial"
The <h1> and <p> nodes are sibling nodes and are children of <body>
and:
The <head> element is the first child of the <html> element
The <body> element is the last child of the <html> element
The <h1> element is the first child of the <body> element
The <p> element is the last child of the <body> element
In this example: <title> DOM Tutorial </ title>, element node <title>, contains a text node with the value "DOM Tutorial". The value of the text node can be accessed through the node's innerHTML property.
Third, the HTML DOM method
Methods are actions we can perform on nodes (HTML elements).
Programming interface
The HTML DOM is accessible through JavaScript (and other programming languages). All HTML elements are defined as objects, while programming interfaces are object methods and object attributes. Methods are actions 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 methods:
Method Description
getElementById () Returns the element with the specified ID.
getElementsByTagName () Returns a node list (collection / node array) containing all elements with the specified tag name.
getElementsByClassName () Returns a list of nodes containing all elements with the specified class name.
appendChild () Adds a new child node to the specified node.
removeChild () Removes a child node.
replaceChild () Replaces a child node.
insertBefore () Inserts a new child node before the specified child node.
createAttribute () Creates an attribute node.
createElement () Creates an element node.
createTextNode () Creates a text node.
getAttribute () Returns the specified attribute value.
setAttribute () Sets or modifies the specified attribute to the specified value.
Some commonly used HTML DOM attributes:
innerHTML-the text value of the node (element)
parentNode-the parent of the node (element)
childNodes-child nodes of a node (element)
attributes-the node's (element) attribute nodes
A simple example is as follows:
<! DOCTYPE html>
<html>
<body>
<p id = "intro"> Hello World! </ p>
<p> This example demonstrates the <b> getElementById </ b> method! </ p>
<script>
x = document.getElementById ("intro");
document.write ("<p> Text from intro paragraph:" + x.innerHTML + "</ p>");
</ script>
</ body>
</ html>
Fourth, HTML DOM attributes
Attributes are the values of nodes (HTML elements) and can be obtained or set.
The easiest way to get or replace the content of an element is to use the innerHTML attribute. The innerHTML attribute can be used to get or change arbitrary HTML elements, including <html> and <body>.
The following code gets the innerHTML of the <p> element with id = "intro":
<html>
<body>
<p id = "intro"> Hello World! </ p>
<script>
var txt = document.getElementById ("intro"). innerHTML;
document.write (txt);
</ script>
</ body>
</ html>
In addition to the innerHTML property, you can also use the childNodes and nodeValue properties to get the content of the element. Examples are as follows:
<! DOCTYPE html>
<html>
<body>
<p id = "intro"> Hello World! </ p>
<script>
txt = document.getElementById ("intro"). childNodes [0] .nodeValue;
document.write (txt);
</ script>
</ body>
</ html>
nodeName property
The nodeName attribute specifies the name of the node.
nodeName is read-only
The nodeName of the element node is the same as the tag name
NodeName of the attribute node is the same as the attribute name
NodeName of text node is always #text
Document node's nodeName is always #document
Note: nodeName always contains uppercase tag names for HTML elements.
nodeValue property
The nodeValue property specifies the value of the node.
The nodeValue of the element node is undefined or null
The nodeValue of the text node is the text itself
NodeValue of the attribute node is the attribute value
Five, HTML DOM access
Visit HTML DOM-find HTML elements.
Accessing HTML elements (nodes)
Accessing HTML elements is equivalent to accessing nodes
You can access HTML elements in different ways:
By using the getElementById () method: returns the element with the specified ID;
By using the getElementsByTagName () method: returns all elements with the specified tag name;
By using the getElementsByClassName () method: Returns all HTML elements with the same class name.
Example of getElementsByTagName () method:
<! DOCTYPE html>
<html>
<body>
<p> Hello World! </ p>
<div id = "main">
<p> DOM is useful! </ p>
<p> This example demonstrates the <b> getElementsByTagName </ b> method. </ p>
</ div>
<script>
x = document.getElementById ("main"). getElementsByTagName ("p");
document.write ("The first paragraph of text in the div:" + x [0] .innerHTML);
</ script>
</ body>
</ html>
Six, HTML DOM-modification
Modifying the HTML DOM means many different aspects (changing elements, attributes, styles, and events):
Change HTML content
Change HTML attributes
Create new HTML element
Remove existing HTML elements
Change CSS style
Change event (handler)
Example of changing CSS style:
<html>
<body>
<p id = "p2"> Hello world! </ p>
<script>
document.getElementById ("p2"). style.color = "blue";
</ script>
</ body>
</ html>
Create a new HTML element (To add a new element to the HTML DOM, you must first create the element (element node) and then append it to an existing element)
The appendChild () method adds a new child node to the end of the child node of the node, as an example:
<! DOCTYPE html>
<html>
<body>
<div id = "div1">
<p id = "p1"> This is a paragraph. </ p>
<p id = "p2"> This is another paragraph. </ p>
</ div>
<script>
var para = document.createElement ("p");
var node = document.createTextNode ("This is new.");
para.appendChild (node);
var element = document.getElementById ("div1");
element.appendChild (para);
</ script>
</ body>
</ html>
The insertBefore () method inserts a new child node before an existing child node, for example:
<p id = "p1"> This is a paragraph. </ p>
<p id = "p2"> This is another paragraph. </ p>
</ div>
<script>
var para = document.createElement ("p");
var node = document.createTextNode ("This is new.");
para.appendChild (node);
var element = document.getElementById ("div1");
var child = document.getElementById ("p1");
element.insertBefore (para, child);
</ script>
Using events
The HTML DOM allows you to execute code when events occur.
When the HTML element "something happens", the browser generates an event:
Click on element
Load page
Change input field
Example: Change the background color of the <body> element (the following two pieces of code have the same effect)
<html>
<body>
<input type = "button" onclick = "document.body.style.backgroundColor = 'lavender';"
value = "Change background color" />
</ body>
</ html>
<html>
<body>
<script>
function ChangeBackground ()
{
document.body.style.backgroundColor = "lavender";
}
</ script>
<input type = "button" onclick = "ChangeBackground ()"
value = "Change background color" />
</ body>
</ html>
Change the text of the <p> element, for example:
<html>
<body>
<p id = "p1"> Hello world! </ p>
<script>
function ChangeText ()
{
document.getElementById ("p1"). innerHTML = "New text!";
}
</ script>
<input type = "button" onclick = "ChangeText ()" value = "Change text">
</ body>
</ html>
If you want to delete an HTML element, you must know the parent element of the element, for example:
<div id = "div1">
<p id = "p1"> This is a paragraph. </ p>
<p id = "p2"> This is another paragraph. </ p>
</ div>
<script>
var parent = document.getElementById ("div1");
var child = document.getElementById ("p1");
parent.removeChild (child);
</ script>
or:
<div id = "div1">
<p id = "p1"> This is a paragraph. </ p>
<p id = "p2"> This is another paragraph. </ p>
</ div>
<script>
var child = document.getElementById ("p1");
child.parentNode.removeChild (child);
</ script>
To replace elements in the HTML DOM, use the replaceChild () method with the syntax node.replaceChild (newnode, oldnode), for example:
<div id = "div1">
<p id = "p1"> This is a paragraph. </ p>
<p id = "p2"> This is another paragraph. </ p>
</ div>
<script>
var para = document.createElement ("p");
var node = document.createTextNode ("This is new.");
para.appendChild (node);
var parent = document.getElementById ("div1");
var child = document.getElementById ("p1");
parent.replaceChild (para, child);
</ script>
Seven, HTML DOM-navigation
With the HTML DOM, you can use node relationships to navigate the node tree.
List of HTML DOM nodes
The getElementsByTagName () method returns a list of nodes. The node list is an array of nodes. The following code selects all <p> nodes in the document, for example:
<! DOCTYPE html>
<html>
<body>
<p> Hello World! </ p>
<p> DOM is useful! </ p>
<script>
x = document.getElementsByTagName ("p");
document.write ("The innerHTML of the second paragraph is:" + x [1] .innerHTML);
</ script>
</ body>
</ html>
HTML DOM node list length
The length property defines the number of nodes in the node list. You can use the length property to cycle through the list of nodes, for example:
<! DOCTYPE html>
<html>
<body>
<p> Hello World! </ p>
<p> DOM is useful! </ p>
<p> This example demonstrates the <b> length </ b> attribute. </ p>
<script>
x = document.getElementsByTagName ("p");
for (i = 0; i <x.length; i ++)
{
document.write (x [i] .innerHTML);
document.write ("<br>");
}
</ script>
</ body>
</ html>
Navigation node relationship
You can use three node attributes: parentNode, firstChild, and lastChild to navigate through the document structure. Examples are as follows:
<! DOCTYPE html>
<html>
<body>
<p id = "intro"> Hello World! </ p>
<script>
x = document.getElementById ("intro");
document.write (x.firstChild.nodeValue);
</ script>
</ body>
</ html>
DOM root node
There are two special properties that can access all documents:
document.documentElement-all documents
document.body-the body of the document
Examples are as follows:
<! DOCTYPE html>
<html>
<body>
<p> Hello World! </ p>
<div>
<p> DOM is useful! </ p>
<p> This example demonstrates the <b> document.body </ b> attribute. </ p>
</ div>
<script>
alert (document.body.innerHTML);
</ script>
</ body>
</ html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
