DOM基礎
DOM
一、概述
- 文檔對象模型
樹狀結構
二、特點
- 好處
可以對樹中的節點進行任意操作，比如：增刪改查。 - 弊端
如果標記性文檔的體積很大，較爲浪費內存空間。
三、DOM模型有三種
- DOM level 1
將html文檔封裝成對象。 - DOM level 2
在level 1基礎上加入了新功能，比如解析名稱空間。 - DOM level 3
將xml文檔封裝成對象。
四、DHTML
- 動態的HTML
不是一門語言，是多項技術綜合體的簡稱。
其中包含了HTML、CSS、DOM、Javascript。 - HTML
用標籤封裝數據。 - CSS
對數據進行樣式定義。 - DOM
將文檔、標籤以及其它內容封裝爲對象。 - JS
負責頁面的行爲定義。
五、常見對象
- BOM
瀏覽器對象模型 - Navigator對象
windows.navigator.appName/appVersion - History對象
windows.history.back/forword/go(n)Location對象
location.protocol/href
六、常見方法
- alert("");
confirm("");
setTimeOut("", time);
setInterval("",time);
clearInterval(interval);
moveBy(x,y);
moveTo(x,y);
open("url", time, "長寬等");
close();
七、常見事件
- onload
onunload
八、練習-廣告彈窗
- open("", time, "");
setInterval("focus()", 1000);
九、獲取節點
- Document對象
- getElementById
1、節點三個必備的屬性：
nodeName、nodeType、nodeValue
2、常見節點有三種：
1：標籤型節點 沒有值
2：屬性節點 有值
3、文本節點 有值
3、innerHtml - getElementsByName
node[0].value - getElementsByTagName
node[0].target - 節點中的節點
getElementById("").getElementByTagName("");
十、節點
- 父節點
parentNode - 子節點集合
childNodes
firstNode
lastNode - 上一個兄弟節點
previousSibling - 下一個兄弟節點
nextSibling - 注意：
儘量少用兄弟節點，因爲在解析的時候會出現不同瀏覽器解析不一致。
會解析出標籤間的空白文本節點。
十一、創建文本節點
- var node = document.createTextNode("")
divNode.appendChild(node);
十二、創建元素節點
- var oButNode = document.createElement("input");
oButNode.type="button";
oButNode.value="xxx";
divNode.appendChild(oButNode); - var oButNode = document.getElementById("");
oDivNode.innerHTML = "";
十三、刪除節點
- oDivNode.removeNode(Bollean);
oDivNode.parentNode.removeChild(oDivNode);
十四、替換
- oDivNode_1.replaceNode(oDivNode_3);
oDivNode_1.parentNode.replaceChild(oDivNode_3, oDivNode_1);
十五、克隆
- var oCopyDiv_3 = oDivNode_3.cloneNode(true);
oDivNode_1.replaceNode(oCopyDiv_3);
oDivNode_1.parentNode.replaceChild(oCopyDiv_3, oDivNode_1);
Dom 示例
一、新聞字體 大中小樣式改變
- 思路：通過style改變
1、用標籤封裝數據
2、定義頁面樣式
3、確定事件源和事件，以及被處理的節點。
事件源：a標籤，
事件：onclick，
被處理得節點div="newstext"
href="javascript:void(0)" οnclick="changeFond('xxpx')" - 通過className改變
封裝樣式
href="javascript:void(0)" οnclick="changeFond('selectorName')"
二、展開閉合列表 改變overflow (visiable、hidden)
- 通過style改變
οnclick="list()" - 通過className改變
οnclick=“list(this)" - 多個列表，當前的展開的同時，其它閉合。
三、好友菜單 改變display (block、none)
- 通過className改變
- 多個列表，當前的展開的同時，其它閉合。
四、創建表格
- 在頁面中創建一個m行n列的表格
1、事件源。
2、必須有一個表格節點的存儲位置 - 思路
通過createElement創建元素的形式創建。
通過表格節點對象的形式創建。
inserRow、insertCell
disabled=true|false
指定行和列
五、刪除表格的行和列
- 刪除行
oTabNode.rows.length
oTabNode.deleteRow(index) - 刪除列
oTabNode.rows[0].cells.length
oTabNode.deleteCell(index)
六、行顏色間隔顯示並高亮
- rows遍歷設置間隔顯示
rows遍歷設置onMouseOver、onMouseOut事件
七、表格排序
- 思路：
1、排序就需要數組。獲取需要參與排序的行對象數組。
2、對行數組中的每一行的年齡單元格的數據進行比較，
並完成行對象在數組中的位置置換。
3、將排好序的數組重新添加回數組。
八、全選商品列表
- 遍歷將全選的box的checked狀態
賦值給所有的itembox的checked。
九、郵件列表
- 全選、取消全選、反選、刪除
十、問卷調查
- 顯示或隱藏
十一、性格測試
- 顯示或隱藏
十二、下拉菜單
- 選擇顏色
1、獲取下拉框選中選項的顏色的值
oSelectNode.options[oSelectNode.selectdIndex].value
2、把獲取到的顏色的值，賦值給目標對象的color屬性
document.getElementById("text").style.color = colorVal; - 選擇城市
1、定義數組內容
var collCities = [['a'],['b1','b2'],['c1','c2'],['d1','d2'];
2、選中時，獲取選中索引,獲取子數組。
var index = oSelectNode.selectdIndex;
var arrCities = collCities[index];
3、刪除之前options
a、循環刪除對象
b、oSubSelNode.length = 0;
4、遍歷數組，並將數組的元素封裝成option對象，添加到子菜單中去
for (var x = 0; x < arrCities.length; x++) {
var oOptNode = document.createElement("option");
oOptNode.innerHTML = arrCities[x];
oSubSelNode.appendChild(oOptNode);
}
十三、添加刪除附件
- 添加和刪除
