javascript dom操作js強化_javascriptスキルを詳しく解説

1. ドキュメント内の各ノードには、nodeName、nodeValue、nodeType
nodeName という属性があります。テキスト ノードのノード名は、
nodeValue です。1. 要素ノード 2. 属性ノード。 3. テキスト ノードは読み取り専用です。属性
nodeType は要素ノードには使用できず、null
2 を返します。getElementsByTagName はノード コレクション
3、firstChild、lastChild の最初の要素ノード、最後の要素ノードを返します。
4、childNodes はすべての子ノードを返します List
5、previousSibling、前の兄弟ノード、nextSibling、次の兄弟ノード、parentNode、親ノードを返します
6、hasChildNodes、テキスト ノードは子として使用できます要素ノード、テキスト ノード、および属性ノードのノードには、それ以上の子ノードを含めることはできません
7、appendChild(node) はノードを追加します
8、removeChild() はノードを削除します
子ノードを借用して取得できます親ノードを削除してから、子ノードを削除します。
9. replaceChild() 置換メソッドには 2 つのパラメーターがあり、最初のパラメーターの内容を 2 番目のパラメーターの内容で置き換えます。
両方が dom に存在する場合、最初のパラメーターが dom に表示されます。 2 つの位置があり、2 番目の位置は消えます。
10. insertBefore(newnode,refnode) refnode の前に newnode を挿入します
11. ノードを作成します
setAttribute() 要素ノードに属性を追加します
createElement() 要素ノードを作成します
createTextNode( )テキスト ノードを作成する
ノードを追加するには、次の 3 つの方法を使用します。
12. innerHTML内のhtmlを取得または設定できます
ここでは都道府県と市区町村の連携選択を例として、都道府県と市区町村の情報をxmlに記述しています
13. ,
node.onclick = xxx(); 関数の戻り値を取得します。つまり、関数
2,
node.onclick = function(){
xxx(); を実行します。 🎜>}
関数への参照を取得し、イベントがトリガーされた場合にのみ実行します。
14. 動的配列の削除: つまり、配列内の要素が削除された後、次の要素は自動的に 1 スペース前に移動します。
["山東", "山西", "広東", "広西", "四川", "河南", "河北"]
for(int i = 0;i["山西", "広東", "広西", "四川", "河南", "河北"]
["山西", "広西", "四川", "河南" ", "河北"]
["山西", "広西", "河南", "河北"]
["山西", "広西", "河南"]
配列bounds
結論: 動的配列は後ろから前に削除する必要があります
For(int i = xx.length; i>0; i--)
リンケージ選択の例を記録します

州を選択すると、対応する都市が別の選択項目に表示されます

City.html

コードをコピー コードは次のとおりです。

;無題のドキュメント

コードは次のとおりです以下:

window.onload = function(){
// Parse the XML document and get the china root node of the xml document
var xmlDocument = parseXml("cities.xml");
var chinaNode = xmlDocument.childNodes[1];
// Add onchange event for the select node with id="province" to get the value of the selected province
var provinceNode = document.getElementById("province");
provinceNode.onchange = function(){
// ** Clear the provision node out Please select all child nodes of...**
var cityNode = document.getElementById("city");
// The cityNodeOptionNodes array is active, so it needs to be cleared from back to front
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 "']");
// Get the text values ​​of all city child nodes of 3 provinceNodeInXmlFile: cityValue
var cityNodesInXmlFile = provinceNodeInXmlFile.getElementsByTagName("city");
for (var i = 0; i var cityNodeInXmlFile = cityNodesInXmlFile[i];
var cityValue = cityNodeInXmlFile.firstChild.nodeValue;
// Use the obtained text value to create an option node: 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 with id="city"
cityNode.appendChild(optionNode);
}
};
// Function to parse xml files
function parseXml(fileName){
//IE core browser
if (window.ActiveXObject) {
//Create DOM parser
var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = "false";
// Load the XML document and obtain the XML document object
doc.load(fileName);
return doc;
}
//Mozilla browser
else
if (window.DOMParser) {
// Create DOM parser
var p = new DOMParser();
// Create DOM parser
return p.parseFromString(fileName, "text/xml");
}
else {
return false;
}
}
}

cities.xml

Copy code The code is as follows:

Shijiazhuang
Handan
Tangshan
Zhangjiakou
Langfang> ;


Shenyang
Dalian
Anshan
Fushun
Tieling

< ;province name=" Shandong Province">
Jinan
Qingdao
Weihai
Yantai
Weifang