directory
Summary of the DOM
The DOM layer
In the document Object model, each object can be called a node, and several concepts of nodes are described below.
Now that you know about nodes, there are three types of nodes in the document model.
The DOM level
DOM object node properties
Accessing a Specified node
(1) the nodeName attribute
(2) nodeType attribute
(3) the nodeValue properties
node
Create a node
1. Create a node
2. Create multiple nodes
Insert the node
Copy the node
Delete and replace nodes
The removChild() method is used to remove a node. This method is used to remove a child node.
2. Replace the node
The DOM corresponding to DHTML
InnerHTML and innerText properties
OuterHTML and outerText properties
The Document Object Model, also known as the DOM, is an interface for programmatically accessing and manipulating Web pages (also known as documents). Through the study of the document object model, we can master the hierarchical relationship of elements in the page, which is helpful for the development and understanding of JavaScript programs. By reading this article, you can:
- Understand DOM document objects
- Understand the level of DOM objects
- Master the node properties of DOM objects
- How to get specified elements in a document
- Learn about DOM objects that correspond to DHTML
Summary of the DOM
DOM stands for Document Object Model and is defined by the W3C (World Wide Web) Committee. Here are the meanings of each word.
Document:
Create a Web page and add it to the Web, and DOM creates a document object based on that page. Without a document, DOM would be a dead end.
Object:
An object is an independent collection of data. For example, a document object is a data set of elements and content in a document. The variables associated with a particular object are called the properties of that object. The functions that can be called from a particular object are called the methods of that object.
Model:
The model represents the document object as a tree model. In this tree model, elements and content in a web page are represented as interconnected nodes.
The DOM is an interface for accessing and manipulating Web pages, and for accessing other standard components of the page. DOM resolves the conflict between JavaScript and JScript by defining a standard way for developers to access data, scripts, and presentation level objects in a site.
The DOM layer
The hierarchical structure of the document object model is tree structure, which represents various contents in the document in the way of tree nodes.
In the document Object model, each object can be called a node, and several concepts of nodes are described below.
1. Root node:
The top-level < HTML > node is called the root node.
2. Parent node:
The nodes above a node are the node’s parent. For example, < HTML > is the parent of <head> and <body>, and <head> is the parent of <title>.
3. Child node:
The nodes below a node are the children of that node. For example, <head> and <body> are children of < HTML >, and <title> is a child of <head>.
4. Sibling nodes:
If multiple nodes are at the same level and have the same parent node, they are called siblings. For example, <head> and <body> are siblings.
5. Children:
A combination of children of a node is called a descendant of that node. For example, <head> and <body> are descendants of < HTML >.
6. Leaf node:
The nodes at the bottom of the tree are called leaf nodes. For example, “heading content”, “heading 3”, and “bold content” are leaf nodes.
Now that you know about nodes, there are three types of nodes in the document model.
Element node: In HTML, a series of tags, such as <body>, <p>, <a>, are the element nodes of this document. Element nodes form the semantic logical structure of the document model.
Text node: Part of the content contained within an element node, such as text in a <p> tag. In general, text nodes that are not empty are visible and rendered in the browser.
Attribute node: Attributes of an element node, such as the href and title attributes of the <a> tag. In general, most attribute nodes are hidden behind the browser and are not visible. Attribute nodes are always contained within element nodes.
The DOM level
The W3C standardized DOM level 1 in October 1998, defining not only the basic interface but also all HTML interfaces. DOM Level 2 was standardized in November 2000, in which the core interface was updated and a standard API was defined for using document events and CSS style sheets. Netscape Navigator 6.0 and Microsoft Internet Explorer 5.0 both support the W3C DOM Level 1 standard. Currently, Browsers like Netscape and Firefox (FF Firefox) support DOM Level 2, but Internet Explorer (IE) does not fully support DOM Level 2.
DOM object node properties
In DOM, you can query the name, type, node value, child node and sibling node by using node attributes. The common node attributes of DOM are shown in the table.
| attribute | instructions |
|---|---|
| nodeName | The name of the node |
| nodeValue | The value of a node, normally applied only to text nodes |
| nodeType | Types of nodes |
| parentNode | Returns the parent of the current node |
| childNodes | Child node list |
| firstChild | Returns the first byte point of the current node |
| lastChild | Returns the last byte point of the current node |
| previousSibling | Returns the previous sibling of the current node |
| nextSibling | Returns the next sibling of the current node |
| attributes | A list of attributes for the element |
Accessing a Specified node
The getElementById() method is used to access the node with the specified id, and the nodeName, nodeType, and nodeValue attributes are used to display the nodeName, nodeType, and nodeValue, respectively.
(1) the nodeName attribute
The nodeName property is used to get the name of a node.
Grammar:
[sName=]obj.nodeName
Parameter description: sName: string variable used to store the name of a node
(2) nodeType attribute
The nodeType property is used to get the type of a node.
Grammar: [sType =] obj. NodeType
Parameter Description:
SType: string variable used to store the type of the node. The value of this type is numeric. The following table describes the parameter types
| type | The numerical | The node name | instructions |
|---|---|---|---|
| Element | 1 | tag | Any HTML or XML markup |
| Attributes | 2 | attribute | Attributes in tags |
| Text | 3 | #text | Contains the text in the tag |
| (Comment) | 8 | #comment | HTML comments |
| Document | 9 | #document | The document object |
| DocumentType (documentType) | 10 | DOCTYPE | DTD specification |
(3) the nodeValue properties
The nodeValue property returns the value of the node
Grammar:
[txt=]obj.nodeValue
Example: Access the specified node
In the dialog box that is displayed, the name, type, and value of the specified node are displayed
<! DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="b1">
<h3>No. 3 title</h3>
<b>The bold content</b>
<script>
var by=document.getElementById("b1"); // Access node B1
var str;
str="Node name:"+by.nodeName+"\n"; // Get the node name
str+="Node type:"+by.nodeType+"\n"; // Get the node type
str+=""+by.nodeValue+"\n"; // Get the node value
alert(str); // A dialog box is displayed
</script>
</body>
</html>
Copy the code
node
Create a node
1. Create a node
Create a new node by using the createElement() and createTextNode() methods in the document object to generate a new element and a text node, and add the new node to the end of the current node using the appendChild() method. The appendChild() method adds the new child node to the end of the current node.
Grammar:
obj.appendChild(newChild)
Parameter description :newChild: indicates the newChild node
Example: Create a new node
In this example, the “Create new node” text is automatically displayed after the page is reloaded, and the text is bolded by using the <b> tag
<! DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="createchild()">
<script>
function createchild(){
var b=document.createElement("b"); // Create a newly generated node element
var txt=document.createTextNode("Create a new node!); // Create the node text
// Add the new node B to the page
b.appendChild(txt);
document.body.appendChild(b);
}
</script>
</body>
</html>
Copy the code
2. Create multiple nodes
Create multiple nodes by using a loop statement that uses the createElement() method and createTextNode() element and generates text nodes, and then add the new node to the page using the appendChild() method. Example: Create multiple nodes (1). In this example, multiple
nodes are automatically created after the page loads, and different text content is displayed in each node.
<! DOCTYPE html> <html> <head> <meta charset="utf-8">
<title></title>
</head>
<body onload="c()">
<script>
function c(){
var text=["First node"."Second node"."Third node"."Fourth node"."Fifth node"."Sixth node"];
for(var i=0; i<text.length; i++){// Iterate over the node
var ce=document.createElement("p"); // Create node elements
var ctxt=document.createTextNode(text[i]); // Create the node text
ce.appendChild(ctxt);
document.body.appendChild(ce);
}
}
</script>
</body>
</html>
Copy the code
Add nodes to the page using the appendChild() method using a loop statement. The appendChild() method refreshes the page every time a new node is added, making the browser slow. You can solve this problem here by using the createDocumentFragment() method. This method is used to create a file fragment node.
Insert the node
Insert nodes are implemented using the insertBefore() method. This method adds a new child node to the end of the current node.
Grammar:
obj.insertBefore(new,ref)
Parameter Description:
New: indicates the new child node
Ref: Specifies a node
Example: Insert a node
Enter the text to be inserted in the text box of the page, such as df, and then click the Insert button to insert the text into the page.
<! DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function cnode(str){ // Create a node
var newp=document.createElement("p");
var newtxt=document.createTextNode(str);
newp.appendChild(newtxt);
return newp;
}
function innode(nodeid,str){ // Insert the node
var node=document.getElementById(nodeid);
var newnode=cnode(str);
if(node.parentNode)
node.parentNode.insertBefore(newnode,node);
}
</script>
</head>
<body >
<h2 id="h">Insert the node on top</h2>
<form id="frm" name="frm">Enter text:<input type="text" name="txt" />
<input type="button" value="Insert" onclick="innode('h',document.frm.txt.value);"/>
</form>
</body>
</html>
Copy the code
Copy the node
The copy node is implemented using the cloneNode() method.
Grammar:
Obj. cloneNode(deep)
Deep: This parameter is a Boolean value indicating whether deep replication is performed. When the value is true, it indicates deep replication. When the value is false, it indicates simple replication. Simple replication only replicates the current node, but does not replicate its children.
Delete and replace nodes
The removChild() method is used to remove a node. This method is used to remove a child node.
Grammar:
obj removeChild(oldChild)
Parameter Description:
OldChild: indicates the node to be deleted.
2. Replace the node
The replacement node is implemented using the replaceChild0 method. This method is used to replace an old node with a new one.
Grammar:
obj. replaceChild(new,old)
Parameter Description:
New: indicates the new node after replacement. Old: indicates the old node to be replaced.
Example: Replace a node
<head>
<title> </title>
<script language="javascript">
function repN(str,bj){
var rep=document.getElementByld('b1');
if(rep)
{
var newNode=document.createElement(bj);
newNode.id="b1";
var newText=document.createTextNode(str) newNode.appendChild(newText); rep.parentNode.replaceChild(newNode.rep); }}</script>
</head>
<body>
<b id="b1">You can replace text content</b>
<br/>Notes: <іnрut ID =" BJ "tyре="tе t" s іzе="15" />Enter text:<input id="txt" type=":"text" size="15" /><br/>
<input type="button" value="Replacement" onclick="repN(txt.value.bj.value)" />
</body>
Copy the code
The DOM corresponding to DHTML
Web page objects can be obtained through DOM technology. This section looks at another way to get web objects through the DHTML object model. Using this method, you can get the objects you need in a web page without knowing the specific hierarchy of the document object model. The innerHTML, innerText, outerHTML, and outerText properties make it easy to read and modify the contents of HTML elements.
instructions
The innerHTML property is supported by most browsers. The innerText, outerHTML, and outerText properties are supported only by Internet Explorer.
InnerHTML and innerText properties
The innerHTML attribute declares the HTML text contained in the element, excluding the opening and closing tags of the element itself. Setting this property can be used to replace the content of an element with the specified HTML text.
Example: Code for modifying the contents of the <div> tag with the innerHTML attribute:
<! DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body >
<div id="clock"></div>
<script type="text/javascript">
document.getElementById("clock").innerHTML="2011-<b>07</b>-22";
</script>
</body>
</html>
Copy the code
The InnerText attribute is similar to the innerHTML attribute, except that it can only declare the content of the text contained in the element. Even if you specify HTML text, it treats it as plain text and prints it as is.
You can also get the content of an element using the innerHTML and innerText attributes. If the element contains only text, the innerHTML and innerText properties return the same value. If the element contains both text and other elements, the two attributes return different values.
| The HTML code | InnerHTML attribute | The InnerText attribute |
|---|---|---|
|
Tomorrow’s science and technology
|
“Technology of Tomorrow” | “Technology of Tomorrow” |
|
Tomorrow’s science and technology
|
“Tomorrow’s science and technology“ | “Technology of Tomorrow” |
| “” | “” |
OuterHTML and outerText properties
The outerHTML and outerText properties are similar to the innerHTML and innerText properties, except that the outerHTML and outerText properties replace the entire target node, meaning they also modify the element itself.
The return values obtained through the outerHTML and outerText properties for a particular code are listed below, as shown in the table.
| The HTML code | OuterHTML properties | OuterText properties |
|---|---|---|
|
Tomorrow’s science and technology
|
Tomorrow’s science and technology
|
“Technology of Tomorrow” |
|
2011 –
07– 22 |
2017 –
07– 22 |
“2017-07-22” |
| “” |