DOM: document object model
- DOM 樹
DOM中元素獲取的方式
通過ID獲取（getElementById）
var oDiv=document.getElementById('div')
用法：
1.上下文必須是document庄萎。
2.必須傳參數(shù)，參數(shù)是string類型蛤克，是獲取元素的id褐望。
3.返回值只獲取到一個(gè)元素，沒有找到返回null厚柳。通過name屬性（getElementsByName）
document.getElementsByName('name')
用法：
1.上下文必須是document抛寝。
2.必須傳參數(shù)熊杨，參數(shù)是是獲取元素的name屬性。
3.返回值是一個(gè)類數(shù)組盗舰，沒有找到返回空數(shù)組晶府。通過標(biāo)簽名（getElementsByTagName）
document.getElementsByTagName('p');
var oDiv = document.getElementById('divId');
oDiv.getElementsByTagName('p');
用法：
1.上下文可以是document，也可以是一個(gè)元素岭皂，注意這個(gè)元素一定要存在郊霎。
2.參數(shù)是是獲取元素的標(biāo)簽名屬性，不區(qū)分大小寫爷绘。
3.返回值是一個(gè)類數(shù)組书劝，沒有找到返回空數(shù)組。
4.可以限定范圍的獲取元素土至。通過class類名（getElementsByClassName）
document.getElementsByClassName('wangle');
用法（和getElementsByTagName類似）：
1.上下文可以是document购对，也可以是一個(gè)元素。
2.參數(shù)是元素的類名陶因。
3.返回值是一個(gè)類數(shù)組骡苞，沒有找到返回空數(shù)組。
4.可以限定范圍的獲取元素楷扬。獲取html的方法（document.documentElement）
document.documentElement是專門獲取html這個(gè)標(biāo)簽的解幽。獲取body的方法（document.body）
document.body是專門獲取body這個(gè)標(biāo)簽的。通過選擇器獲取一個(gè)元素（querySelector）
- tag
- #id
- .class
用法：
1.上下文可以是document烘苹，也可以是一個(gè)元素躲株。
2.參數(shù)是選擇器，如："div .className"镣衡。
3.返回值只獲取到一個(gè)元素霜定。
- 通過選擇器獲取一組元素（querySelectorAll）
用法（和getElementsByTagName類似）：
1.上下文可以是document档悠，也可以是一個(gè)元素。
2.參數(shù)是元素的類名望浩。
3.返回值是一個(gè)類數(shù)組辖所，沒有找到返回空數(shù)組。
4.磨德，querySelectAll獲取到的是一組元素缘回，即使是頁(yè)面中唯一的id，也得加[];
節(jié)點(diǎn)
|nodeType | nodeName | nodeValue
---|---|---|---
文本節(jié)點(diǎn) | 3 | "#text" | 文本內(nèi)容
元素節(jié)點(diǎn) | 1 | 大寫的標(biāo)簽 | null
注釋節(jié)點(diǎn) | 8 | #comment | 注釋內(nèi)容
document節(jié)點(diǎn)|9 | #document | null
節(jié)點(diǎn)關(guān)系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節(jié)點(diǎn)常用屬性</title>
<style type="text/css">
#box1{
width: 400px; height: 200px;background-color: red;
}
#box2{
width: 200px;height: 200px;background-color: green;
}
#box3{
width: 200px;height: 200px;background-color: yellow;
}
</style>
</head>
<body>
<div id="box1">
<p>我是第一個(gè)P</p>
<p>我是第二個(gè)P</p>
<p>我是第三個(gè)P</p>
<p>我是第四個(gè)P</p>
<div>
<p>我是第1個(gè)P</p>
<p>我是第2個(gè)P</p>
<p>我是第3個(gè)P</p>
<p>我是第4個(gè)P</p>
</div>
</div>
<div id="box2"></div>
<div id="box3"></div>
<input id="put" type="text" name="in" placeholder="sunck is a good man">
</body>
</html>
- children 子元素
+ 一般情況兼容典挑，但是在IE7／8下切诀，如果有注釋的話，拿到的是不準(zhǔn)確的搔弄；
childNodes 拿到所有的子節(jié)點(diǎn)
var jsDivBox1 = document.getElementById("box1");
var allChildsNodeArr = jsDivBox1.childNodes;
for (var i = 0; i < allChildsNodeArr.length; i++) {
if (allChildsNodeArr[i].nodeType == 1) {
console.log(allChildsNodeArr[i]);
}
}parentNode 父元素； 拿的是結(jié)構(gòu)上的父級(jí)丰滑；
var fatherNode = jsDivBox1.parentNode;
console.log(fatherNode);previousSibling 上一個(gè)哥哥節(jié)點(diǎn)
var p1 = p2.previousSibling;
console.log(p1);nextSibling 下一個(gè)弟弟節(jié)點(diǎn)
var p3 = p2.nextSibling;
console.log(p3);
封裝
-
getChildren 獲取當(dāng)前容器下顾犹，所有的子元素；
- 實(shí)際能拿到所有的孫子輩的
pre() 獲取當(dāng)前元素的上一個(gè)哥哥元素褒墨；
