JS enhanced operation Implementation code.
1, each node in the document has attributes NodeName, NodeValue, NodeType
The node name of the NodeName text node is #text and NodeName is a read-only property
NodeValue 1 element Node 2 attribute node 3 text node read-only property
NodeType cannot be used for element nodes to return null
2. getElementsByTagName returns a collection of nodes
3, FirstChild, LastChild first element node, last element node
4. ChildNodes returns a list of all child nodes
5. PreviousSibling before a sibling node nextSibling a sibling node parentnode returns the parent node
6. HasChildNodes text nodes can be child nodes of element nodes, text nodes and attribute nodes cannot contain any child nodes
7, AppendChild (node) Append node
8, RemoveChild () Remove a node
You can borrow a child node to get the parent node, and then remove the child nodes.
9, ReplaceChild () substitution method, there are two parameters, the contents of the first parameter is replaced by the contents of the second parameter
If two are present in the DOM, the first one appears in the second position, and the second disappears.
10. InsertBefore (newnode,refnode) Insert NewNode before Refnode
11. Create a Node
SetAttribute () Adds a property to an element node
CreateElement () Create an element node
createTextNode () Create a text node
Use these three methods to add any node.
12, InnerHTML internal HTML can be obtained, you can also set
Here is an example of linkage selection to the city, the city information in XML
13. When calling a function
1.
Node.onclick = xxx (); Get the return value of the function, that is, the function was executed
2.
Node.onclick = function () {
xxx ();
}
A reference to the function is obtained and is executed only if the event is triggered.
14, dynamic array deletion: that is, an element in the array after the deletion of the elements will automatically forward a grid.
["Shandong", "Shanxi", "Guangdong", "Guangxi", "Sichuan", "Henan", "Hebei")
If the for (int i = 0;i<xx.length; i++) will be
["Shanxi", "Guangdong", "Guangxi", "Sichuan", "Henan", "Hebei")
["Shanxi", "Guangxi", "Sichuan", "Henan", "Hebei")
["Shanxi", "Guangxi", "Henan", "Hebei"]
["Shanxi", "Guangxi", "Henan"]
Array out of bounds
Conclusion: Dynamic arrays need to be removed from the back and forward
for (int i = xx.length; i>0; i--)
Record an example of a linkage selection
After selecting a province, a corresponding city will appear in another select
City.html
Copy CodeThe code is as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>untitled document</title>
<script type= "Text/javascript" src= "Cities.js" ></script>
<body>
<select id= "Province" >
<option value= "" > Please select ...</option>
<option value= "Hebei province" > Hebei province </option>
<option value= "Liaoning province" > Liaoning Province </option>
<option value= "Shandong Province" > Shandong </option>
</select>
<select id= "City" ><option value= "..." > Please select ...</option></select>
</body>
Cities.js
Copy CodeThe code is as follows:
Window.onload = function () {
Parse the XML document to get the China root node of the XML document
var xmlDocument = parsexml ("Cities.xml");
var chinanode = xmldocument.childnodes[1];
Add the onchange event for the Select node of id= "province" to get the value of the selected province
var provincenode = document.getElementById ("province");
Provincenode.onchange = function () {
* * Empty provice node out <option value= "..." > Select all child nodes of ...</option> * *
var citynode = document.getElementById ("city");
The citynodeoptionnodes array is active, so it needs to be cleared from behind
var citynodeoptionnodes = citynode.getelementsbytagname ("option");
var length = Citynodeoptionnodes.length;
for (var i = length-1; i > 0; i--) {
Citynode.removechild (Citynodeoptionnodes[i]);
}
var provincevalue = This.value;
Use Provincevalue to get the corresponding province node in the XML document
var provincenodeinxmlfile = Xmldocument.selectsinglenode ("china/province[@name = '" + Provincevalue + "']");
Gets the text value of all city child nodes of the 3 provincenodeinxmlfile: Cityvalue
var citynodesinxmlfile = provincenodeinxmlfile.getelementsbytagname ("city");
for (var i = 0; i < citynodesinxmlfile.length; i++) {
var citynodeinxmlfile = citynodesinxmlfile[i];
var cityvalue = CityNodeInXmlFile.firstChild.nodeValue;
Create an option node with the resulting text value: <option value= ' Cityvalue ' >cityValue</option>
var optionnode = document.createelement ("option");
Optionnode.setattribute ("value", cityvalue);
var optionnodetextnode = document.createTextNode (Cityvalue);
Optionnode.appendchild (Optionnodetextnode);
Add the created option node to the Select node of id= "City"
Citynode.appendchild (Optionnode);
}
};
Functions for parsing XML files
function Parsexml (fileName) {
Browser for IE kernel
if (window. ActiveXObject) {
Creating a DOM Parser
var doc = new ActiveXObject ("Microsoft.XMLDOM");
Doc.async = "false";
Loading an XML document to get an XML Document object
Doc.load (FileName);
return doc;
}
Mozilla Browser
Else
if (window. Domparser) {
Creating a DOM Parser
var p = new Domparser ();
Creating a DOM Parser
Return p.parsefromstring (FileName, "text/xml");
}
else {
return false;
}
}
}
Cities.xml
Copy CodeThe code is as follows:
<?xml version= "1.0" encoding= "GB2312"?>
<china>
<province name= "Hebei province" >
<city> Shijiazhuang </city>
<city> Handan </city>
<city> Tangshan </city>
<city> Zhangjiakou </city>
<city> Langfang </city>
</province>
<province name= "Liaoning Province" >
<city> Shenyang </city>
<city> Dalian </city>
<city> Anshan </city>
<city> Fushun </city>
<city> Tieling </city>
</province>
<province name= "Shandong Province" >
<city> Jinan </city>
<city> Qingdao </city>
<city> Weihai </city>
<city> Yantai </city>
<city> Weifang </city>
</province>
</china>
JavaScript DOM operation details JS Enhanced
