一、什么是DOM

DOM是Document Object Model（文檔對象模型）的縮寫 ，由w3c制定Web標準

二、節點類型（了解）

1、每個節點都有一個nodeType屬性，用于表明節點的類型。

2、常用節點類型與對應nodeType值：

備注：
用于判斷獲取到的元素屬于什么類型節點
元素節點 <==> 1
文本節點 <==> 3
屬性節點 <==> 2

三、獲取元素節點(2、3條可以通過任意元素對象去調用)

1、document.getElementById("id名")

*、獲取id名所在的元素（速度最快） ，返回值為元素對象或者null
*、須通過document調用

2、getElementsByClassName("class名")

* 獲取到類名所在的元素組成的類數組。通過索引操作具體元素對象。返回值為類數組或者[]。
* 元素節點均可調用

3、getElementsByTagName("標簽名")

* 獲取到標簽名所在的元素組成的類數組。通過索引獲取到具體的元素
* 元素節點均可調用

4、document.getElementsByName("名字")

* 獲取到**表單**名字所在的元素組成的類數組
*必須通過document調用

5、獲取body及html

document.body ==> 獲取body
document.documentElement ==> 獲取html

四、利用節點關系，獲取所有節點

利用節點關系，獲取元素、文本節點利用元素關系，獲取元素節點

獲取父級節點：ele.parentNode * 得到節點的父節點	獲取父級節點：ele.parentElement * 得到節點的父元素節點
獲取子節點：ele.childNodes * 得到ele元素的全部子節點列表(類數組) ele.firstChild * 獲得ele元素的第一個子節點 ele.lastChild * 獲得ele元素的最后一個子節點	獲取子節點：ele.children * 得到ele元素的全部子元素節點列表ele.firstElementChild * 獲得ele元素的第一個子節點ele.lastElementChild * 獲得ele元素的最后一個子節點
獲取兄弟節點：ele.nextSibling * 獲得節點的下一個兄弟節點ele.previousSibling * 得到節點的上一個兄弟節點	獲取兄弟節點：ele.nextElementSibling * 獲得節點的下一個兄弟節點ele.previousElementSibling * 得到節點的上一個兄弟節點

?

五、三大節點的三大屬性

1、元素節點

* nodeType 1
* nodeName 元素名大寫
* nodeValue null

2、屬性節點

* nodeType 2
* nodeName 屬性名
* nodeValue 屬性值

3. 文本節點

* nodeType 3
* nodeName #text
* nodeValue 文本內容

六、節點的增刪改查

1、節點的創建

(1) document.**createElement**(“標簽名”)
* 創建一個元素節點
?
(2) document.createTextNode(“文本”)
* 創建文本節點(了解)
?
(3) document.createAttribute(“屬性名”)
* 創建一個屬性節點(了解)

2、節點的插入

備注：以下parent表示父級元素，ele表示元素
(1) parent.appendChild(插入的節點) ?
* 向節點的子節點列表的結尾添加新的子節點
?
(2) parent.insertBefore(new,node) ?
* 在指定的子節點node前插入新的子節點new。
?
例：往子節點前面插入一個新節點
var h2 = document.createElement('h2');
h2.innerHTML = '哈哈哈';
document.body.insertBefore(h2,h3);
?
(3) ele.setAttributeNode(attrNode)
* 在指定元素中插入一個屬性節點（了解）

演示：利用創建節點方法，生成三種節點，并往元素節點插入內容及屬性

1.創建元素節點
var h3 = document.createElement("h3");
?
2.創建文本節點，并往h3元素節點插入文本節點
var txt = document.createTextNode("啦啦啦");
h3.appendChild(txt);
常用方法 =====> h3.innerHTML = "啦啦啦"；
?
3.創建屬性節點，并往h3元素節點插入屬性節點
var title = document.createAttribute("title");
title.nodeValue = 'xxx';
h3.setAttributeNode(title)；
常用方法 =====> h3.title = "xxx"
?
4.將元素節點插入body里面
document.body.appendChild(h1);

案例:生成表格

1 //1.獲取文本框、按鈕、及輸出元素 2 //2.封裝表格函數（保證單一原則,即一個函數只做一件事） 3 function createTable(r,c){ 4 //2.1 創建table>tbody>tr>td,記得插入對應的父元素內 5 //2.2 將table返回出去 6 } 7 //3.點擊按鈕時 8 //2.1 獲取行列值 9 //2.2 執行生成表格函數 10 //2.3 將表格插入輸出元素 11 //2.4 注意事項：每次插入前，記得清空上一次插入的內容 12 output.innerHTML = ''; 13 output.appendChild(table);

案例：自動應答機器人

1 // 1.獲取輸出元素ul、輸入框及按鈕 2 // 3.設置應答消息，用數組方式存放 3 var q = '你好,在嗎,約嗎,十年了還約嗎'.split(','); 4 var a = '他好我也好,不是本人,叔叔在哪約,滾'.split(','); 5 // 2.點擊按鈕，發送信息（.active） 6 btn.onclick = function(){ 7 //2.1 發送信息（即在ul內插入li，并設置類名）： 8 //2.2 發送自動應答信息（設置延遲n秒，setTimeout） 9 // 注意：利用發送信息在q數組的索引，獲取a數組中自動回復的內容 10 var idx = q.indexOf(_msg); 11 if(idx >= 0){ 12 aLi.innerHTML = a[idx]; 13 }else{ 14 aLi.innerHTML = '你說什么？風太大我聽不到'; 15 } 16 //2.3 清空內容，自動聚焦 17 msg.value = ''; 18 msg.focus(); 19 }

3、節點的刪除、復制、判斷方法

刪除：
(1) 父節點.removeChild(ele)
* 刪除（并返回）當前節點parent的指定子節點ele。
* 父節點刪除子節點
?
復制:
(2) 當前節點.cloneNode(boolean)
* 復制節點，boolean為true是深復制。返回值為復制后的新節點
?
判斷：
(3) 父節點.hasChildNodes()
* 判斷當前節點是否擁有子節點,返回布爾值當有參數時判斷是否有這個子節點

案例：表格刪除、復制表格行

1 *添加行號 2 *添加刪除按鈕 3 *刪除當前行（一定要書寫在生成表格后） 4 *獲取所有按鈕 5 *分別給所有按鈕綁定事件處理函數 6 for(var i=0;i<btnDels.length;i++){ 7 btnDels[i].onclick = function(){ 8 //console.log(i)//演示：不管點擊哪個按鈕，最終都會得到10（變量查找規則） 9 //利用當前對象this，刪除當前行tr、 10 } 11 //*添加復制功能，復制行 12 btnCopies[i].onclick = function(){ 13 // 獲取當前行 14 var currentTr = this.parentNode.parentNode; 15 // 復制tr 16 var copyTr = currentTr.cloneNode(true); 17 // ！！！問題：復制的tr沒有事件，為什么，怎么解決？ 18 table.getElementsByTagName('tbody')[0].appendChild(copyTr); 19 } 20 }

七、節點的屬性及方法

* 節點是對象，給對象添加屬性與給html元素添加屬性不是一個意思。
* html標準屬性會互相影響，但是不是標準的屬性不會互相影響。

1、節點(對象)的屬性

（1.1）tagName 獲取元素元素的標簽名
（1.2）className 設置/獲取元素的class屬性
（1.3）id 設置/獲取元素id屬性
（1.4）name 設置/獲取元素name屬性
（1.5）style 設置/獲取元素的內聯樣式
（1.6）innerHTML 設置/獲取元素的內容（包含html代碼）
（1.7）innerText 設置或獲取位于元素標簽內的文本

2、節點的方法（操作html結構屬性）

（2.1）ele.setAttribute(attr,val)("html屬性","屬性值")
給html元素添加屬性
（2.2）ele.getAttribute(attr)("html屬性")
拿到html屬性對應的屬性值
（2.3）ele.removeAttribute(attr)("html屬性")
刪除html屬性
（2.4） ele.hasAttribute(attr)("html屬性") 判斷是否存在html屬性

八、節點的盒模型相關的屬性

（1）offsetWidth: ==> 當前元素的寬度（border + padding + content）
（2）offsetHeight: ==> 當前元素的高度（border + padding + content）
（3）offsetLeft: ==> 當前元素離**<定位父級>**元素左邊的距離。
（4）offsetTop ==> 當前元素離**<定位父級>**元素頂部的距離。
?
備注： 若不在定位父級，則相對于html的距離

九、操作css樣式

(1) 元素.style.屬性 = "屬性值" ==> 只能操作內聯樣式
(2) window.getComputedStyle(ele,pseudo)
* ele:要獲取樣式的元素
* pseudo:偽元素樣式字符(可選)，可獲取偽元素樣式
(3) ele.currentStyle （IE8-）
* 得到包含ele所有樣式的對象（支持IE8以下瀏覽器）
* currentStyle不能獲得css總屬性的值

十、圖片解釋

1、html結構與dom節點屬性的共同點與不同點

2、節點的關系

?

* dom_tree

?

轉載于:https://www.cnblogs.com/wulongke/p/10493227.html

總結

以上是生活随笔為你收集整理的12、DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。