今天學習JavaScriptDOM加強，javascript靈活性大家都知道。但我們學習的只是使用JavaScript
對頁面的操作，為學習AJAX打下基礎。
JavaScriptDOM對頁面的直接操作，使用戶的體驗更加舒暢。再加上CSS的裝飾，那簡直太完美了！JavaScriptDOM的使用并不復雜，相比那些專業搞JavaScript開發簡單的多。下面我整理一下今日的學習內容。
一、DOM(DocumentObjectModel)
D：html、xml文檔
O：document對象的屬性和方法，它是核心對象，代表整個頁面。
M：模型
DOM樹這個東西，很多培訓機構都有講，看來他是一個經典！（用老佟的）
把上面的圖片旋轉180度，你就會看到一棵樹。
二、節點及其類型
這個是重點，一定要牢記，首先知道了DOM，DOM下面就是這些。把框架記住了，使用JavaScriptDOM那就容易了。
1.節點分為三種類型：
1).元素節點
2).屬性節點
3).文本節點
例如“<a href=”http://www.itcast.com.cn”>傳智播客</a>”，“<a></a>”是元素節點，“href”是屬性節點，“傳智播客”是文本節點。Html和xml就不是這些節點相互套用嗎！
三、屬性和方法
1.查找節點：
document.getElementById(Id);：根據指定的ID屬性值返回元素節點，Id是全局唯一的。如果不存在返回null。
document.getElementsByName(name);：根據指定的name屬性值，返回所有的元素節點。返回一個數組集合，可以調用它的length查看它的數量。
node.hasChildNodes();查看元素節點是否有子節點，有返回true，無返回false。對屬性節點和文本節點無效。
2.節點屬性：
node.nodeName;返回節點的名稱，只讀屬性。
node.nodeType;返回節點的類型，只讀屬性。返回1是元素節點，返回2是屬性節點，返回3是文本節點。
node.nodeValue;返回或設置節點的值，讀/寫屬性。對元素節點無效。
node.parentNode;返回節點的父節點，只讀屬性。
node.childNodes;返回節點的所有子節點，是一個數組集合，只讀屬性。
node.firstChild;返回節點的第一個子節點，只讀屬性。
node.lastChile;返回節點的最后一個子節點，只讀屬性。
node.nextSibling;返回節點的下一個兄弟節點，只讀屬性。
node.previousSibling;返回節點的前一個兄弟節點，只讀屬性。
node.innerHTML; 瀏覽器幾乎都支持該屬性，但不是 DOM 標準的組成部分。用來讀\寫某給定元素里的 HTML內容。
3.節點方法：
paraentNode.replaceChild(newChildNode, oldChildNode);替換節點，返回被替換節點的指針。如果新節點有子節點，也將被插入。
node.getAttribute(attributeName);返回節點屬性值，如果不存在名稱為attributeName的屬性，返回空字符串。
node.setAttribute(attributeName, attributeValue);設置節點屬性值。
document.createElement(nodeName);創建元素節點。
document.createTextNode(nodeName) ;創建一個文本節點。
node.appendChild(newNode);追加一個子節點。
node.insertBefore(newNode, targetNode);向targetNode節點前插入一個新節點。
整體上內容就這么多，不過今天還有三個練習。上邊的內容看起來簡單，但實際應用中并沒那么容易。這也許就是JavaScript吧！——看著簡單，用起來十分難！
4.練習：
1).在一個下拉列表框中選擇省份，在另一個下拉列表框中顯示對應的城市。
省份與城市的數據保存在xml文件中，在此只列出關鍵JavaScript代碼。
Javascript:
| window.onload = function(){ var province = document.getElementById("province"); // 設置<select id="province">的被改變事件 province.onchange = function(){ //----- 每次選擇省份時，要清空<select id="province">下的原有城市 ----- var selectCity = document.getElementById("city"); var oldcities = selectCity.childNodes; // 要保留“請選擇...”，所以從1開始 var len = oldcities.length-1; for(var i=1; i<len;i++){ selectCity.removeChild(selectCity.lastChild); } //----- 獲取城市并顯示 ------ // 獲取當前省份 var province = this.value; if(province != ""){ // 加載XML文件 var cityDoc = parseXml("cities.xml"); // 查找指定省份節點 var provinces = cityDoc.getElementsByTagName("province"); var provinceNode = null; for(var i=0; i < provinces.length; i++){ if(provinces[i].getAttribute("name") == province){ provinceNode = provinces[i]; break; } } // 獲取對應省份的所有城市 var cities = provinceNode.childNodes; // 包裝城市，插入到<select id="city">中 for(var i=0; i<cities.length;i++){ if (cities[i].hasChildNodes()) { // 創建option元素節點 var optionNode = document.createElement("option"); // 創建文本節點 var textNode = document.createTextNode(cities[i].firstChild.nodeValue); // 將文本節點添加到option元素節點 optionNode.appendChild(textNode); // 將option元素節點添加到select元素節點中 selectCity.appendChild(optionNode); } } } } } |
2).添加和刪除聯系人，并在當前頁面動態顯示聯系人信息。
| window.onload = function(){ //------------ 添加聯系人 --------------- //獲取提交按鈕 var sbumitform = document.getElementById("submit"); //設置提交事件 sbumitform.onclick = function(){ // 獲取提交的聯系人信息 var name = document.getElementById("name").value; var phone = document.getElementById("phone").value; var address = document.getElementById("address").value; // 人名不能為空，如果空則返回并提示。使用正則表達式替換。 var reg = /^\s*|\s*$/gi; name = name.replace(reg, ""); if(name == ""){ alert("請輸入姓名！"); return false; } //創建表格中的<tr>節點 var trNode = document.createElement("tr"); //創建表格中的<td>節點，并將信息添加進去 var tdNameNode = document.createElement("td"); tdNameNode.appendChild(document.createTextNode(name)); var tdPhoneNode = document.createElement("td"); tdPhoneNode.appendChild(document.createTextNode(phone)); var tdAddressNode = document.createElement("td"); tdAddressNode.appendChild(document.createTextNode(address)); var tdDeleteNode = document.createElement("td"); var aNode = document.createElement("a"); aNode.setAttribute("href","/delete?id="); aNode.appendChild(document.createTextNode("delete")); tdDeleteNode.appendChild(aNode); //將td添加到tr中 trNode.appendChild(tdNameNode); trNode.appendChild(tdPhoneNode); trNode.appendChild(tdAddressNode); //將tr添加到table中 document.getElementById("contacters").appendChild(trNode); return false; } //------------ 刪除系人 --------------- // 獲取所有a節點 var deletes = document.getElementsByTagName("a"); // 設置它們的onclick事件 for(var i=0; i < deletes.length; i++){ deletes[i].onclick = function(){ // 獲取姓名，并詢問是否刪除 var name = this.parentNode.parentNode.firstChild.firstChild.nodeValue; var doDelete = confirm("確認刪除聯系人"+name+"?"); if(doDelete == true){ // 刪除聯系人 this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); } return false; } } } |
3).人性化選擇喜好：全選、反選、全不選、提交
| function funcheckedAll(){ // 獲取所有選擇項 var items = document.getElementsByName("items"); for(var i=0; i<items.length;i++){ // 設置為選中狀態 items[i].checked = "checked"; } } function funcheckedNo(){ // 獲取所有選擇項 var items = document.getElementsByName("items"); for(var i=0; i<items.length;i++){ // 設置為非選中狀態 items[i].checked = null; } } window.onload = function(){ //為按鈕添加事件處理代碼，FORM中的button就是為javascript而生！ // 全選 var checkedAll = document.getElementById("CheckedAll"); checkedAll.onclick = function(){ funcheckedAll(); } // 全不選 var checkedNo = document.getElementById("CheckedNo"); checkedNo.onclick = function(){ funcheckedNo(); } // 反選 var checkedRev = document.getElementById("CheckedRev"); checkedRev.onclick = function(){ // 獲取所有選擇項 var items = document.getElementsByName("items"); for(var i=0; i<items.length;i++){ // 判斷是否為選中狀態，然后設置為反向狀態 if(items[i].checked == true){ items[i].checked = null; } else { items[i].checked = "checked"; } } } // 提交，顯示所有被選中的項目 var checkedSubmit = document.getElementById("send"); checkedSubmit.onclick = function(){ // 獲取所有選擇項 var items = document.getElementsByName("items"); var itemssend = ""; for(var i=0; i<items.length;i++){ // 判斷是否為選中狀態，然后設置為反向狀態 if(items[i].checked == true){ itemssend += items[i].value +"\r\n"; } } // 如果有被選中的項目，則提示 if(itemssend != "") alert(itemssend); } // 全選/全不選 checkbox var checkedAll_2 = document.getElementById("checkedAll_2"); checkedAll_2.onclick = function(){ // 設置標簽 if(checkedAll_2.checked == true){ funcheckedAll(); } else { funcheckedNo(); } } //設置每一項的onclick事件，它們將影響”全選/全不選“的狀態。 var items = document.getElementsByName("items"); for(var i=0;i<items.length;i++){ items[i].onclick = function(){ // 取出所有項，判斷他們的選中狀態。 var items = document.getElementsByName("items"); var checkedAll = true; for(var i=0;i<items.length;i++){ if(items[i].checked == false){ checkedAll = false; break; } } // 如果全部選中，則設置”全選/全不選“為選中狀態 var checkedAll_2 = document.getElementById("checkedAll_2"); if(checkedAll == true){ checkedAll_2.checked = "checked"; }else{ checkedAll_2.checked = null; } } } } |
Merry Christmas，晚安！