javascript dom 操作詳解 js加強

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1 、文檔裡的每個節點都有屬性 nodeName 、 nodeValue 、 nodeType
nodeName 文本節點的的節點名是 #text , nodeName 是唯讀屬性
nodeValue 1 元素節點 2 屬性節點 3 文本節點唯讀屬性
nodeType 不能用於元素節點返回 null
2 、 getElementsByTagName 返回一個節點集合
3 、 firstChild 、 lastChild 第一個元素節點，最後一個元素節點
4 、 childNodes 返回所有子節點列表
5 、 previousSibling 前一個兄弟節點 nextSibling 後一個兄弟節點 parentNode 返回父節點
6 、 hasChildNodes 文本節點可以作為元素節點的子節點，文本節點和屬性節點不可能再包含任何子節點
7 、 appendChild(node) 追加節點
8 、 removeChild() 移除一個節點
可以借用子節點的得到父節點，然後移除子節點。
9 、 replaceChild() 替換方法，有兩個參數，把第一個參數的內容替換掉第二個參數的內容
如果兩個都存在在 dom 中，第一個會出現在第二個的位置，而第二個將消失。
10 、 insertBefore(newnode,refnode) 在 refnode 之前插入 newnode
11 、建立節點
setAttribute() 為一個元素節點增加屬性
createElement() 建立一個元素節點
createTextNode() 建立一個文本節點
用這三個方法可以添加任何節點。
12 、 innerHTML 內部的 html 既可以得到，也可以設定
這裡有一個例子，聯動選擇地市，地市資訊在 xml 中
13 、調用函數時
1 、
node.onclick = xxx(); 得到函數的傳回值，也就是執行了該函數
2 、
node.onclick = function(){
xxx();
}
得到了該函數的引用，只有觸發該事件時才執行。
14 、動態數組的刪除：即數組中的某個元素刪除後後面的元素會自動向前一格。
[“ 山東 ”, “ 山西 ”, “ 廣東 ”, “ 廣西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
如果用 for(int i = 0 ;i<xx.length; i++) 會是
[“ 山西 ”, “ 廣東 ”, “ 廣西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 廣西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 廣西 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 廣西 ”, “ 河南 ”]
數組越界
結論：動態數組需要從後向前刪除
For(int i = xx.length ; i>0 ; i--)
記錄一個聯動選擇的例子

選擇一個省以後，會有相應的地市出現在另一個 select 中

City.html

複製代碼代碼如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="cities.js"></script>
</head>
<body>
<select id="province">
<option value=""> 請選擇 ...</option>
<option value=" 河北省 "> 河北省 </option>
<option value=" 遼寧省 "> 遼寧省 </option>
<option value=" 山東省 "> 山東省 </option>
</select>
<select id="city"><option value="..."> 請選擇 ...</option></select>
</body>
</html>

cities.js 複製代碼代碼如下:window.onload = function(){
// 解析 XML 文檔 , 得到 xml 文檔的 china 根節點
var xmlDocument = parseXml("cities.xml");
var chinaNode = xmlDocument.childNodes[1];
// 為 id="province" 的 select 節點添加 onchange 事件 , 擷取選擇的省的 value
var provinceNode = document.getElementById("province");
provinceNode.onchange = function(){
// ** 清空 provice 節點出 <option value="..."> 請選擇 ...</option> 的所有子節點 **
var cityNode = document.getElementById("city");
// cityNodeOptionNodes 數組時活動的 , 所以需要從後向前清
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;
// 用 provinceValue 去 xml 文檔中擷取對應的 province 節點
var provinceNodeInXmlFile = xmlDocument.selectSingleNode("china/province[@name='" + provinceValue + "']");
// 擷取 3 provinceNodeInXmlFile 的所有 city 子節點的文本值 : cityValue
var cityNodesInXmlFile = provinceNodeInXmlFile.getElementsByTagName("city");
for (var i = 0; i < cityNodesInXmlFile.length; i++) {
var cityNodeInXmlFile = cityNodesInXmlFile[i];
var cityValue = cityNodeInXmlFile.firstChild.nodeValue;
// 利用得到的文本值建立 option 節點 : <option value='cityValue'>cityValue</option>
var optionNode = document.createElement("option");
optionNode.setAttribute("value", cityValue);
var optionNodeTextNode = document.createTextNode(cityValue);
optionNode.appendChild(optionNodeTextNode);
// 把建立好的 option 節點添加到 id="city" 的 select 節點中
cityNode.appendChild(optionNode);
}
};
// 解析 xml 檔案的函數
function parseXml(fileName){
//IE 核心的瀏覽器
if (window.ActiveXObject) {
// 建立 DOM 解析器
var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = "false";
// 載入 XML 文檔 , 擷取 XML 文檔對象
doc.load(fileName);
return doc;
}
//Mozilla 瀏覽器
else
if (window.DOMParser) {
// 建立 DOM 解析器
var p = new DOMParser();
// 建立 DOM 解析器
return p.parseFromString(fileName, "text/xml");
}
else {
return false;
}
}
}

cities.xml 複製代碼代碼如下:<?xml version="1.0" encoding="GB2312"?>
<china>
<province name=" 河北省 ">
<city> 石家莊 </city>
<city> 邯鄲 </city>
<city> 唐山 </city>
<city> 張家口 </city>
<city> 廊坊 </city>
</province>
<province name=" 遼寧省 ">
<city> 瀋陽 </city>
<city> 大連 </city>
<city> 鞍山 </city>
<city> 撫順 </city>
<city> 鐵嶺 </city>
</province>
<province name=" 山東省 ">
<city> 濟南 </city>
<city> 青島 </city>
<city> 威海 </city>
<city> 煙台 </city>
<city> 濰坊 </city>
</province>
</china>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More