Document Object Model
DOM定義了表示和修改文檔所需的方法匙瘪。DOM對(duì)象即為宿主對(duì)象，由瀏覽器廠商定義，用來操作html和xml功能的一類對(duì)象的集合丹喻。也有人稱DOM是對(duì)HTML以及XML的標(biāo)準(zhǔn)編程接口算灸。
一.對(duì)節(jié)點(diǎn)的增刪改查
A.查
a.查看元素節(jié)點(diǎn)
- document代表整個(gè)文檔
- document.getElementById()//元素id在Ie8以下的瀏覽器，不區(qū)分id大小寫驻啤，而且也返回匹配name屬性的元素
- .getElementsByTagName()//標(biāo)簽名
取出的元素都放在類數(shù)組中 - getElementByName();//需注意，只有部分標(biāo)簽name可生效（表單荐吵，表單元素，img先煎，iframe）
- .getElementsByClassName();//類名->ie8及以下的ie版本中沒有贼涩，可以多個(gè)class一起
- .querySelector()//css選擇器 在ie7及以下的版本中沒有，且非實(shí)時(shí)操作薯蝎，在用法上受局限遥倦，（不是通過自己選擇的元素進(jìn)行修改，是無法修改的）占锯。
//html
<html>
<div>
<span>
<strong>123</strong>
</span>
</div>
</html>
//javascript
<script type = "text/javascript">
var strong = document.querySelector('div > span strong');
</script>
選出的是單獨(dú)元素
- .querySelectorAll()//css選擇器 在ie7及以下的版本中沒有
選出的是數(shù)組
二.節(jié)點(diǎn)樹
- 遍歷節(jié)點(diǎn)樹
- parentNode->父節(jié)點(diǎn)（最頂端的parentNode為#document）袒哥；
- childNodes -> 子節(jié)點(diǎn)們（所有的節(jié)點(diǎn)類型都要算進(jìn)去）
例1
//html
<div>
123
<!--This is comment -->
<strong></strong>
<span></span>
</div>
//js
var div = document.getElementByTagName('div')[0];
此時(shí)，div.childNodes為[text, comment, text, strong, text, span, text]
- firstChild -> 第一個(gè)子節(jié)點(diǎn)
- lastChild -> 最后一個(gè)子節(jié)點(diǎn)
- nextSibling -> 后一個(gè)兄弟節(jié)點(diǎn)
//html
<div>
123
<!--This is comment -->
<strong></strong>
<span></span>
</div>
//js
var strong = document.getElementByTagName('strong')[0];
此時(shí)消略，strong.nextSibling為text
- previousSibling->前一個(gè)兄弟節(jié)點(diǎn)
- 基于元素節(jié)點(diǎn)樹的遍歷
- parentElement -> 返回當(dāng)前元素的父元素節(jié)點(diǎn)（IE不兼容）
document非元素堡称，所以并不是最頂端的父元素節(jié)點(diǎn) - children-> 只返回當(dāng)前元素的元素子節(jié)點(diǎn)
//html
<div>
123
<!--This is comment -->
<strong></strong>
<span></span>
</div>
//js
var div = document.getElementByTagName('div')[0];
此時(shí)，div.children為[strong, span]
- node.childElementCount === node.children.length當(dāng)前元素節(jié)點(diǎn)的子元素節(jié)點(diǎn)個(gè)數(shù)（IE不兼容）
- firstElementChild->返回的是第一個(gè)元素節(jié)點(diǎn)（IE不兼容）
- lastElementChild->返回的是最后一個(gè)元素節(jié)點(diǎn)（IE不兼容）
- nextElementSibling/previousElementSibling->返回后一個(gè)/前一個(gè)兄弟元素節(jié)點(diǎn)（IE不兼容）
三.節(jié)點(diǎn)的類型
- 元素節(jié)點(diǎn)----1
- 屬性節(jié)點(diǎn)----2
- 文本節(jié)點(diǎn)----3
- 注釋節(jié)點(diǎn)----8
- document----9
- DocumentFragment----11
- 獲取節(jié)點(diǎn)類型 nodeType
四.節(jié)點(diǎn)的四個(gè)屬性
- nodeName
元素的標(biāo)簽名艺演，以大寫形式表示却紧，只讀 - nodeValue
Text節(jié)點(diǎn)或Comment節(jié)點(diǎn)的文本內(nèi)容，可讀寫 - nodeType
該節(jié)點(diǎn)的類型胎撤，只讀
根據(jù)上方節(jié)點(diǎn)類型返回?cái)?shù)字而判斷
document.nodeType;//返回9
<div>
123
<!--This is comment -->
<strong></strong>
<span></span>
</div>
div.childNodes[1].nodeType;//注釋節(jié)點(diǎn)返回8
- attributes
Elements節(jié)點(diǎn)的屬性集合
//html
<div id = "only" class = "demo"></div>
//js
var div = document.getElementByTagName('div')[0];
上例中
div.attributes;
->NameNodeMap{0:id, 1:class, length:2}//attributes將div節(jié)點(diǎn)中的屬性晓殊，以類數(shù)組的形式存儲(chǔ)
div.attributes[0];
->id = "only"
div.attributes[0].nodeType;
->2//屬性節(jié)點(diǎn)返回值為2
五.節(jié)點(diǎn)的一個(gè)方法 Node.hasChildNodes();
是否有子節(jié)點(diǎn)，返回true或false伤提，（包含非元素節(jié)點(diǎn)）
