1, each node in the document has attributes NodeName, NodeValue, NodeType
The node name of the NodeName text node is #text, 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 Return all child node list
5, previoussibling before a sibling node nextSibling a sibling node parentnode return to the parent node
6. The HasChildNodes text node can be the child node of the element node, and the text node and the attribute node cannot contain any child nodes.
7, AppendChild (node) Append nodes
8, RemoveChild () Remove a node
You can borrow the parent node of the child node and then remove the child nodes.
9, ReplaceChild () substitution method, there are two parameters, the first parameter to replace the contents of the second parameter
If all two exist in the DOM, the first one will appear in the second position, and the second will disappear.
10, InsertBefore (Newnode,refnode) before Refnode insert NewNode
11, create the node
SetAttribute () adds attributes to an element node
CreateElement () Create an element node
createTextNode () Create a text node
Use these three methods to add any nodes.
12, InnerHTML inside the HTML can be obtained, can also set
Here is an example of linkage selection of the city, the city information in XML
13. When calling a function
1,
Node.onclick = xxx (); Gets the return value of the function, that is, the function is executed
2,
Node.onclick = function () {
xxx ();
}
A reference to the function is obtained and is not executed until 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++) would be
["Shanxi", "Guangdong", "Guangxi", "Sichuan", "Henan", "Hebei"]
["Shanxi", "Guangxi", "Sichuan", "Henan", "Hebei"]
["Shanxi", "Guangxi", "Henan", "Hebei"]
["Shanxi", "Guangxi", "Henan"]
Array out of bounds
Conclusion: The dynamic array needs to be deleted from the back forward
for (int i = xx.length; i>0; i--)
Record an example of a linkage selection
After choosing a province, a corresponding city appears in another select
City.html
Copy Code code 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 Province </option>
</select>
<select id= "City" ><option value= "..." > Please select ...</option></select>
</body>
Cities.js
Copy Code code as follows:
Window.onload = function () {
Parse XML document and get the root node of XML document
var XmlDocument = parsexml ("Cities.xml");
var chinanode = xmldocument.childnodes[1];
Add the onchange event for the Select node of the id= "province" to get the value of the selected province
var provincenode = document.getElementById ("province");
Provincenode.onchange = function () {
* * Empty provice node out <option value= "..." > Please select all child nodes ...</option> * *
var citynode = document.getElementById ("city");
Citynodeoptionnodes array is active, so it needs to be cleared from the forward
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;
Using 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 in 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;
Creates 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 in id= "City"
Citynode.appendchild (Optionnode);
}
};
Functions that parse 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";
Load XML document, get 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 Code code 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>
