DOM
DOM 全稱是Document Object Model带斑，即文檔對(duì)象模型全跨。
DOM的目的是為了操作文檔而產(chǎn)生的API
by:https://www.w3schools.com/js/pic_htmltree.gif
獲取元素的方式
總結(jié)了四種獲取方式,十一種獲取元素的具體方法
1.通過頂層document節(jié)點(diǎn)獲任颉：
通過ID選取元素
document.getElementById('elementId');
通過節(jié)點(diǎn)的ID，可以準(zhǔn)確獲得需要的元素缚忧，是比較簡(jiǎn)單快捷的方法痕钢。如果頁面上含有多個(gè)相同id的節(jié)點(diǎn)，那么只返回第一個(gè)節(jié)點(diǎn)鱼冀。
jquery 中的 $("#") 與 document.getElementById("")用法大致相同
通過節(jié)點(diǎn)名獲取元素
document.getElementsByName('elements');
該方法是通過節(jié)點(diǎn)的name獲取節(jié)點(diǎn)报破，該方法返回的有同樣名稱的節(jié)點(diǎn)數(shù)組。通過要獲取節(jié)點(diǎn)的某個(gè)屬性來循環(huán)判斷是否為需要的節(jié)點(diǎn)千绪。
通過節(jié)點(diǎn)標(biāo)簽名獲取元素
document.getElementsByTagName('tagName');
該方法是通過節(jié)點(diǎn)的Tag獲取節(jié)點(diǎn)充易，該方法與document.getElementsByName()相似,同樣返回一個(gè)數(shù)組
此方法有一個(gè)缺點(diǎn):那就是返回的數(shù)組可能過于龐大,可能出現(xiàn)隱患
通過元素類名獲取元素
document.getElementsClassName('className');
它同樣返回的是一個(gè)數(shù)組,當(dāng)調(diào)用發(fā)生在document對(duì)象上時(shí), 整個(gè)DOM都會(huì)被搜索, 包含根節(jié)點(diǎn).
IE9以下不兼容
根據(jù)指定選擇器獲取元素
document.querySelector()
返回文檔中匹配指定的選擇器組的第一個(gè)元素
例子,點(diǎn)擊按鈕修改內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM API</title>
</head>
<body>
<p id="test">id="demo" 的 p 元素</p>
<p> 點(diǎn)擊按鈕修改上述</p>
<button id="btn">點(diǎn)我</button>
<script>
var test = document.querySelector("#test");
var btn = document.querySelector("#btn");
btn.addEventListener('click',function () {
test.innerHTML = "這就是querySelector的用法!";
});
</script>
</body>
</html>
最終效果:
這是第一種方式:在id名前面加上#號(hào)就能使用,
var test = document.querySelector("#test");
再將第二個(gè)p元素設(shè)置名為"test2"的class,通過類名也能找到
document.querySelector("p.test2")
添加一個(gè)span元素,并設(shè)置target屬性.通過target屬性也能找到
document.querySelector("span[target]")
注意:如果沒有找到匹配元素，則返回 null荸型，如果找到多個(gè)匹配元素盹靴，則返回第一個(gè)匹配到的元素。
根據(jù)指定選擇器查找元素列表
document.querySelectorAll('#text')
返回與指定的選擇器組匹配的文檔中的元素列表瑞妇，返回的對(duì)象是NodeList
*querySelector與querySelectorAll
一個(gè)返回單個(gè)元素,另一個(gè)返回類似數(shù)組的元素集合,且倆個(gè)方法都是HTML5新加入的,總之DOM元素上調(diào)用querySelector/querySelectorAll的時(shí)候要小心稿静，最好加上ID選擇器進(jìn)行一個(gè)限定
2.通過父節(jié)點(diǎn)獲取：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM API</title>
</head>
<body>
<div id="elementDiv"><div>1</div><p>DOM</p><p>BOM</p><span>Node.js</span></div>
<script>
var elementDiv = document.getElementById('elementDiv');
console.log(elementDiv.firstChild.nodeName);
console.log(elementDiv.lastChild.nodeName);
console.log(elementDiv.childNodes);
</script>
</body>
</html>
所顯示效果為:
Node.firstChild
如果有一個(gè)子節(jié)點(diǎn), childNode 是節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)的引用辕狰，否則為null改备。即指向childNodes列表中的第一個(gè)節(jié)點(diǎn)
Node.lastChild
很顯然，這個(gè)屬性是獲取已知節(jié)點(diǎn)（parentObj）的最后一個(gè)子節(jié)點(diǎn)蔓倍。與firstChild一樣悬钳，它也可以遞歸使用盐捷。
Node.childNodes
獲取已知節(jié)點(diǎn)的子節(jié)點(diǎn)數(shù)組，然后可以通過循環(huán)或者索引找到需要的節(jié)點(diǎn)默勾。同時(shí),在IE7上獲取的是直接子節(jié)點(diǎn)的數(shù)組碉渡，而在Firefox2.0.0.11上獲取的是所有子節(jié)點(diǎn)即包括子節(jié)點(diǎn)的子節(jié)點(diǎn)。
*需要注意:
為什么上述代碼中,div中的內(nèi)容非常緊湊?倘若手賤格式化代碼,那么結(jié)果將完全不同!
格式化代碼后的效果:
wtf?#text是什么鬼?我的childNodes為什么長(zhǎng)度為七,這種喜當(dāng)?shù)僮魇侨绾卧斐傻?
其實(shí)是空白符造成的,在div與第一個(gè)標(biāo)簽p當(dāng)中,若有空格或者換行符,則默認(rèn)充當(dāng)了一個(gè)文本節(jié)點(diǎn),這其中也包括換行符,制表符等等.所以此類API慎用!
3.通過臨近節(jié)點(diǎn)獲取(兄弟節(jié)點(diǎn)獲取)：
修改上述例子,在第一個(gè)p標(biāo)簽設(shè)置名為'obj'的id,通過下列方式獲取兄弟節(jié)點(diǎn)
var obj = document.getElementById('obj');
console.log(obj.previousSibling);
console.log(obj.nextSibling);
效果:
Node.previousSibling
獲取已知節(jié)點(diǎn)（neighbourNode）的前一個(gè)節(jié)點(diǎn)母剥，這個(gè)屬性和前面的firstChild滞诺、lastChild一樣都似乎可以遞歸使用的。
Node.nextSibling
獲取已知節(jié)點(diǎn)（neighbourNode）的下一個(gè)節(jié)點(diǎn)环疼，同樣支持遞歸铭段。
*注意:
同樣需要注意源碼的換行符,制表符的使用!
4.通過子節(jié)點(diǎn)獲取：
<div id="elementDiv"><div>1</div><p id="obj">DOM</p><p>BOM</p><span>Node.js</span>
</div>
<script>
var obj = document.getElementById('obj');
console.log(obj.parentNode.nodeName);
</script>
效果:
Node.parentNode
獲取已知節(jié)點(diǎn)的父節(jié)點(diǎn)
*注意:
同樣需要注意源碼的換行符,制表符的使用!
