After understanding the frameworks and nodes of DOM (text object model), the most important thing is to use these nodes to process html web pages
For a DOM node node, there are a series of properties and methods to use. Commonly used are the following table.
Improved: http://www.w3school.com.cn/xmldom/dom_element.asp
1. Access nodes
BOM provides some boundary methods to access nodes. Commonly used are getElementsByTagName() and getElementById()
The code copy is as follows:
<script type="text/javascript">
function searchDOM(){
var oLi = document.getElementsByTagName("li");
var j =oLi.length;
var j2 =oLi[5].tagName;
var j3 =oLi[0].childNodes[0].nodeValue;
document.write(j+"<br>"+j2+"<br>"+j3+"<br>");
}
</script>
<body>
<body onload="searchDOM()">
<div id-"in"></div>
<ul>Client Language
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
<ul>Server side language
<li>ASP.NET</li>
<li>JSP</li>
<li>PHP</li>
</ul>
</body>
document.getElementById()
The code copy is as follows:
<script type="text/javascript">
window.onload = function(){
function findid(){
var j4 =oli2.tagName;
document.write(j4);
}
var oli2 = document.getElementById("inn");
oli2.onclick = findid;
}
</script>
<li id="inn">PHP</li>
The code copy is as follows:
<html>
<body id="myid">
<div></div>
<script type="text/javascript">
x=document.getElementsByTagName('div')[0];
document.write("div CSS class: " + x.className);
document.write("<br />");
document.write("An alternate way: ");
document.write(document.getElementById('myid').className);
</script>
</body>
</html>
//id get className
2. Detect node type
The node type can be detected through the nodeType of the node, and one parameter returns 12 integer values.
Expression format such as document.nodeType
What is really useful is the three types mentioned by the model nodes in the DOM (I) model
Element nodes, text nodes and attribute nodes
1. The element node returns the value of element node is 1
2. The attribute node returns the value of attribute node is 2
3. Text node return value is 3
The code copy is as follows:
<script type="text/javascript">
window.onload = function(){
function findid(){
var j5 =oli2.nodeType;
document.write("nodeType:"+ j5 +"<br>");
}
var oli2 = document.getElementById("inn");
oli2.onclick = findid;
}
</script>
<li id="inn">CSS</li>
Return: nodeType: 1
This means that some node can be processed separately, which is very practical when searching for nodes. It will be discussed later.
3. Use father-son-brother relationship to find nodes
On the first section access node, use the childNodes attribute of the node to access the text node contained in the element node.
This section uses the father-son-brother relationship of nodes to find nodes
*Use the hasChildNodes and childNodes attributes to get all nodes contained in this node
The code copy is as follows:
<head>
<title>childNodes</title>
<script language="javascript">
window.onload = function myDOMISpector(){
var oUl = document.getElementById("myList"); //Get the <ul> tag
var DOMString = "";
if(oUl.hasChildNodes()){ //Judge whether there are child nodes
var oCh = oUl.childNodes;
for(var i=0;i<oCh.length;i++) //Search one by one
DOMString += oCh[i].nodeName + "<br>";
}
document.write(DOMString);
}
</script>
</head>
<body>
<ul id="myList">
<li>Sweet and Sour Ribs</li>
<li>Cage Steamed Pork</li>
<li>Kimchi Fish</li>
<li>Chestnut roast chicken</li>
<li>Mapo Tofu</li>
</ul>
</body>
4.DOM gets the parent node of the node
The code copy is as follows:
<script language="javascript">
window.onload = function(){
var food = document.getElementById("mydarfood");
document.write(food.parentNode.tagName)
}
</script>
</head>
<body>
<ul>
<li>Sweet and Sour Ribs</li>
<li>Cage Steamed Pork</li>
<li>Kimchi Fish</li>
<li id="mydearfood">Chestnut roast chicken</li>
<li>Mapo Tofu</li>
</ul>
//Return to ul
Using the parent node, the parent node of the specified node was successfully obtained
5. Use parentNode property
The code copy is as follows:
<head>
<title>childNodes</title>
<script language="javascript">
window.onload = function(){
var food = document.getElementById("mydarfood");
var parentElm = food.parentNode;
while(parentElm.className != "colorful" && parentElm != document.body)
parentElm = parentElm.parentNode; //Look up all the way up
document.write("tageName:"+parentElm.tagName+"<br>");
document.write("claaName:"+parentElm.className+"<br>");
document.write("typeOf:"+typeof(food)+"<br>");
}
</script>
</head>
<body>
<div>
<ul>
<span>
<li>Sweet and Sour Ribs</li>
<li>Cage Steamed Pork</li>
<li>Kimchi Fish</li>
<li id="mydearfood">Chestnut roast chicken</li>
<li>Mapo Tofu</li>
</span>
</ul>
</div>
</body><br>//Output<br>//tageName:DIV<br>claaName:colorful<br>typeOf:object
Start with a child node and search for the parent node upward until the node's class name is "colorful"
6.dom's brotherhood
The code copy is as follows:
<head>
<title>childNodes</title>
<script language="javascript">
window.onload = function(){
var foods = document.getElementById("mydarfood");
var nextF = foods.nextSibling;
alert("nextSibling:"+nextF.tagName +"<br>");
}
</script>
</head>
<body>
<div>
<ul>
<span>
<li>Sweet and Sour Ribs</li>
<li>Cage Steamed Pork</li>
<li>Kimchi Fish</li>
<li id="mydearfood">Chestnut roast chicken</li>
<li>Mapo Tofu</li>
<li>Mapo Tofu</li>
<li>Mapo Tofu</li>
</span>
</ul>
</div>
</body>
It looks great to access sibling nodes using nextsibling and previousSibling properties.
But it only works for ie browser
In order to have good compatibility with the code, nodeType must be used to make the judgment
The following is compatibility:
The code copy is as follows:
<head>
<title>Siblings</title>
<script language="javascript">
function nextSib(node){
var tempLast = node.parentNode.lastChild;
//Judge whether it is the last node, if so, return null
if(node == tempLast)
return null;
var tempObj = node.nextSibling;
//Search for the subsequent brother nodes one by one until the element node is found
while(tempObj.nodeType!=1 && tempObj.nextSibling!=null)
tempObj = tempObj.nextSibling;
//Three-point operator, if it is an element node, it returns the node itself, otherwise it returns null
return (tempObj.nodeType==1)?tempObj:null;
}
function prevSib(node){
var tempFirst = node.parentNode.firstChild;
//Judge whether it is the first node, if so, return null
if(node == tempFirst)
return null;
var tempObj = node.previousSibling;
//Search for the previous brother nodes one by one until the element node is found
while(tempObj.nodeType!=1 && tempObj.previousSibling!=null)
tempObj = tempObj.previousSibling;
return (tempObj.nodeType==1)?tempObj:null;
}
function myDOMISpector(){
var myItem = document.getElementById("myDearFood");
//Get the next element brother node
var nextListItem = nextSib(myItem);
//Get the previous element brother node
var preListItem = prevSib(myItem);
alert("Last item:" + ((nextListItem!=null)?nextListItem.firstChild.nodeValue:null) + "PreListItem:" + ((preListItem!=null)?preListItem.firstChild.nodeValue:null) );
}
</script>
</head>
<body onload="myDOMISpector()">
<ul>
<li>Sweet and Sour Ribs</li>
<li>Cage Steamed Pork</li>
<li>Kimchi Fish</li>
<li id="myDearFood">Chestnut roast chicken</li>
<li>Mapo Tofu</li>
</ul>
</body>
7. Set node properties
The code copy is as follows:
<head>
<title>childNodes</title>
<script language="javascript">
window.onload = function(){
//Get pictures
var imgDataBe = document.getElementsByTagName("img")[0];
//Get the title attribute of the picture
imgDataBe.setAttribute("src","02.gif");
imgDataBe.setAttribute("title","Friendly Slope");
document.write(imgDataBe.getAttribute("title"));
document.write(imgDataBe.getAttribute("alt"));
document.write(imgDataBe.getAttribute("node-data"));
document.write(imgDataBe.getAttribute("node_data"));
}
</script>
</head>
<body>
<div>
<img src="01.jpg" node-data="222" node_data="3333">
<img src="01.jpg">
</body>
Use setAttribute() method to set node attributes
The code copy is as follows:
<head>
<title>childNodes</title>
<meta charset="utf-8" />
<script language="javascript">
window.onload = function() {
var bkk = document.getElementById("new5");
var clickbk = document.getElementById("qiehuan");
clickbk.onclick = dsqiehuan;
function dsqiehuan() {
bkk.setAttribute("class", "xxx")
}
}
</script>
<style>
.xxx{color:#ddd}
</style>
</head>
<body>
<div id="new5">
555
</div>
<em id="qiehuan">Switch</em>
</body>
8.createElement() Create node
The code copy is as follows:
<head>
<title>childNodes</title>
<meta charset="utf-8" />
<script language="javascript">
window.onload = function() {
var oP = document.createElement("p");
var oText = document.createTextNode("create node using dom");
var oText1 = document.createTextNode("Create node 123 using dom");
oP.appendChild(oText);
oP.appendChild(oText1);
document.body.appendChild(oP);
}
</script>
</head>
<body>
<p>There was originally a P here, test createElement()</p>
</body>
9.removeChild removes node
The code copy is as follows:
<head>
<title>childNodes</title>
<meta charset="utf-8" />
<script language="javascript">
window.onload = function() {
var oP = document.getElementsByTagName("p")[0];
oP.parentNode.removeChild(oP);//The ending is .removeChild(oP), not .removeChild("oP")
}
</script>
</head>
<body>
<p>There was originally a P here, test createElement()</p>
</body>
10.insertBefore() Insert node before a specific node
The code copy is as follows:
<head>
<title>childNodes</title>
<meta charset="utf-8" />
<script language="javascript">
window.onload = function() {
var oPold = document.getElementsByTagName("p")[0];
var oPnew = document.createElement("p");
var oText = document.createTextNode("new node")
oPnew.appendChild(oText);
oPold.parentNode.insertBefore(oPnew,oPold);//Receive two parameters, one is the new parameter and the other is the old node parameter
}
</script>
</head>
<body>
<p>There was originally a P</p>
</body>
11. Insert new elements after a specific node (added January 9, 2015)
The methods provided by DOM can only add new elements before the target element using insertBefore(), or use the appendchild() method to add new elements at the end of the childNodes of the parent element (example: address).
In practice, it is often used to add new elements at the end of a specific element. The DOM method does not have the insertBefore() method, but using existing knowledge can be used to write.
The code idea is as follows
The code copy is as follows:
function insertAfter(newElement, targetElement) {
var outdoor = targetElement.parentNode; //Find the parent element of the target element
if (adarent.lastChild == targetElement) //If the target is the last element
outdoor.appendChild(newElement); //Add directly to the last element
else //Before inserting to the parent element node of the next element
outdoor.insertBefore(newElement, targetElement.nextSibling)
Example: (Append outside the element) Original instance: Address
The code copy is as follows:
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="interP()">
<p>First</p>
<p id="target">Second</p>
<script type="text/javascript">
function insertAfter(newElement, targetElement) {
var outdoor = targetElement.parentNode; //Find the parent element of the target element
if (adarent.lastChild == targetElement) //If the target is the last element
outdoor.appendChild(newElement); //Add directly to the last element
else //Before inserting to the parent element node of the next element
outdoor.insertBefore(newElement, targetElement.nextSibling)
}
function interP() {
var ooParent = document.getElementById("target");
var ooonewP = document.createElement("a");
oonewP.setAttribute("href","http://www.qq.com");
var ootextP = document.createTextNode("link");
oonewP.appendChild(ooetextP);
insertAfter(ooonewP, ooParent);
}
</script>
</body>
Example: Added in the element
12. Add document fragmentation to improve execution efficiency
The code copy is as follows:
<head>
<title>childNodes</title>
<meta charset="utf-8" />
<script language="javascript">
window.onload = function() {
var oPold = document.getElementsByTagName("p")[0];
var aColors = ["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple"];
var oFragment = document.createDocumentFragment(); //Create document fragmentation
for(var i=0;i<aColors.length;i++){
var oP = document.createElement("p");
var oText = document.createTextNode(aColors[i]);
oP.appendChild(oText);
oFragment.appendChild(oP); //Add nodes to fragments first
}
//document.body.appendChild(oFragment); //Added to the page at last one
oPold.parentNode.insertBefore(oFragment,oPold);//Combined with insertBefore to add document fragments to the node
}
</script>
</head>
<body>
<p>There was originally a P</p>
</body>