一、什么是DOM

DOM是Document Object Model（文檔對(duì)象模型）的縮寫 ，由w3c制定Web標(biāo)準(zhǔn)

二、節(jié)點(diǎn)類型（了解）

1、每個(gè)節(jié)點(diǎn)都有一個(gè)nodeType屬性，用于表明節(jié)點(diǎn)的類型。

2、常用節(jié)點(diǎn)類型與對(duì)應(yīng)nodeType值：

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

三、獲取元素節(jié)點(diǎn)(2、3條可以通過(guò)任意元素對(duì)象去調(diào)用)

1、document.getElementById("id名")

*、獲取id名所在的元素（速度最快） ，返回值為元素對(duì)象或者null
*、須通過(guò)document調(diào)用

2、getElementsByClassName("class名")

* 獲取到類名所在的元素組成的類數(shù)組。通過(guò)索引操作具體元素對(duì)象。返回值為類數(shù)組或者[]。
* 元素節(jié)點(diǎn)均可調(diào)用

3、getElementsByTagName("標(biāo)簽名")

* 獲取到標(biāo)簽名所在的元素組成的類數(shù)組。通過(guò)索引獲取到具體的元素
* 元素節(jié)點(diǎn)均可調(diào)用

4、document.getElementsByName("名字")

* 獲取到**表單**名字所在的元素組成的類數(shù)組
*必須通過(guò)document調(diào)用

5、獲取body及html

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

四、利用節(jié)點(diǎn)關(guān)系，獲取所有節(jié)點(diǎn)

利用節(jié)點(diǎn)關(guān)系，獲取元素、文本節(jié)點(diǎn)利用元素關(guān)系，獲取元素節(jié)點(diǎn)

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

?

五、三大節(jié)點(diǎn)的三大屬性

1、元素節(jié)點(diǎn)

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

2、屬性節(jié)點(diǎn)

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

3. 文本節(jié)點(diǎn)

* nodeType 3
* nodeName #text
* nodeValue 文本內(nèi)容

六、節(jié)點(diǎn)的增刪改查

1、節(jié)點(diǎn)的創(chuàng)建

(1) document.**createElement**(“標(biāo)簽名”)
* 創(chuàng)建一個(gè)元素節(jié)點(diǎn)
?
(2) document.createTextNode(“文本”)
* 創(chuàng)建文本節(jié)點(diǎn)(了解)
?
(3) document.createAttribute(“屬性名”)
* 創(chuàng)建一個(gè)屬性節(jié)點(diǎn)(了解)

2、節(jié)點(diǎn)的插入

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

演示：利用創(chuàng)建節(jié)點(diǎn)方法，生成三種節(jié)點(diǎn)，并往元素節(jié)點(diǎn)插入內(nèi)容及屬性

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

案例:生成表格

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

案例：自動(dòng)應(yīng)答機(jī)器人

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

3、節(jié)點(diǎn)的刪除、復(fù)制、判斷方法

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

案例：表格刪除、復(fù)制表格行

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

七、節(jié)點(diǎn)的屬性及方法

* 節(jié)點(diǎn)是對(duì)象，給對(duì)象添加屬性與給html元素添加屬性不是一個(gè)意思。
* html標(biāo)準(zhǔn)屬性會(huì)互相影響，但是不是標(biāo)準(zhǔn)的屬性不會(huì)互相影響。

1、節(jié)點(diǎn)(對(duì)象)的屬性

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

2、節(jié)點(diǎn)的方法（操作html結(jié)構(gòu)屬性）

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

八、節(jié)點(diǎn)的盒模型相關(guān)的屬性

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

九、操作css樣式

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

十、圖片解釋

1、html結(jié)構(gòu)與dom節(jié)點(diǎn)屬性的共同點(diǎn)與不同點(diǎn)

2、節(jié)點(diǎn)的關(guān)系

?

* dom_tree

?

轉(zhuǎn)載于:https://www.cnblogs.com/wulongke/p/10493227.html

總結(jié)

以上是生活随笔為你收集整理的12、DOM的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。