第九天
03-對(duì)象模型-第03天{節(jié)點(diǎn)操作醋旦、控制樣式}
節(jié)點(diǎn)屬性
| 節(jié)點(diǎn)屬性 | 元素 | 屬性 | 文本 |
|---|---|---|---|
| nodeType | 1 | 2 | 3 |
| nodeName | 大寫(xiě)的標(biāo)簽名 | 屬性名 | #text |
| nodeValue | null | 屬性賦值等號(hào)后面的值 | 文本字符串 |
<node>.nodeType
元素(標(biāo)簽): 1,
屬性: 2,
文本: 3
<node>.nodeName
元素(標(biāo)簽): 大寫(xiě)的標(biāo)簽名,
屬性: 屬性名
文本: #text
<node>.nodeValue
元素(標(biāo)簽): null
屬性: 屬性賦值等號(hào)后面的值
文本: 文本字符串
節(jié)點(diǎn)操作
獲取子節(jié)點(diǎn)&子元素
childNodes: 獲取指定元素的子節(jié)點(diǎn),包括文本節(jié)點(diǎn)妨托、元素節(jié)點(diǎn)等-
children: 獲取知道元素的子元素,只會(huì)獲取元素節(jié)點(diǎn)瞳秽。<ul id="list"> <li><a href="javascript:void(0)">首頁(yè)</a></li> <li><a href="javascript:void(0)">播客</a></li> <li><a href="javascript:void(0)">博客</a></li> <li><a href="javascript:void(0)">相冊(cè)</a></li> <li><a href="javascript:void(0)">關(guān)于</a></li> <li><a href="javascript:void(0)">幫助</a></li> </ul> var ul = document.getElementById("list"); var lis = ul.getElementsByTagName("li"); //不關(guān)心層級(jí) 只找指定標(biāo)簽 //缺點(diǎn)： 如果內(nèi)部還有l(wèi)i 也會(huì)找到 var nodes = ul.childNodes; //子節(jié)點(diǎn) 只找子級(jí) //缺點(diǎn)： 除了我們想要的元素節(jié)點(diǎn) 還會(huì)獲取到其他節(jié)點(diǎn) var children = ul.children;//子元素
childNodes是DOM標(biāo)準(zhǔn)中規(guī)定的方法 獲取節(jié)點(diǎn)的方式所有瀏覽器都支持
children不是DOM標(biāo)準(zhǔn)中規(guī)定的方法 因?yàn)楹艹Ｓ盟袨g覽器也都支持
獲取下一個(gè)兄弟節(jié)點(diǎn)
-
nextSibling:下一個(gè)兄弟節(jié)點(diǎn)<input type="text" id="txtName"> <span></span> <input type="text" id="txtPwd"><span></span> <input type="button" id="btn" value="注冊(cè)"> var txt = document.getElementById("txtName"); var next = txt.nextSibling;// 獲取到的是換行,空文本節(jié)點(diǎn) var pwd = document.getElementById("txtPwd"); var next = pwd.nextSibling;// 獲取到的是span元素,因?yàn)閮蓚€(gè)標(biāo)簽間沒(méi)有其他節(jié)點(diǎn)
獲取下一個(gè)兄弟元素
-
nextElementSibling: 下一個(gè)兄弟元素<input type="text" id="txtName"> <span></span> var txt = document.getElementById("txtName"); var next = txt.nextElementSibling;// 可以獲取到span元素,只獲取下一個(gè)兄弟元素,忽略非元素類型的節(jié)點(diǎn)
獲取下一個(gè)兄弟元素兼容寫(xiě)法
// 獲取下一個(gè)兄弟元素
function getNextElement(element){
if(element.nextElementSibling){
//能找到nextElementSibling這個(gè)屬性 就可以直接使用
return element.nextElementSibling;
}else{
var next = element.nextSibling;// 獲取下一個(gè)兄弟節(jié)點(diǎn)
// 如果next就是想要的下一個(gè)兄弟元素 就直接返回 如果不是 就一直找
while(next&&next.nodeType !==1){//next找到了而且不是想要的元素節(jié)點(diǎn)就繼續(xù)找
next = next.nextSibling;
}
return next;
}
}
獲取上一個(gè)兄弟元素兼容寫(xiě)法
// 獲取上一個(gè)兄弟元素
function getPreviousElement(element){
if(element.previousElementSibling){
return element.previousElementSibling;
}else{
var previous = element.previousSibling;
while(previous&&previous.nodeType !== 1){
previous = element.previousSibling;
}
return previous;
}
}
父節(jié)點(diǎn)
-
parentNode: 獲取元素的父節(jié)點(diǎn),父節(jié)點(diǎn)肯定是一個(gè)元素<div id = "box">  </div> var img = document.getElementById("img"); var parent = img.parentNode; //獲取到的就是id為box的div元素
控制樣式
div{
width:100px;
height:100px;
background-color:red;
}
<div id="box"></div>
var box = document.getElementById("box");
consloe.log(box.style.width);// 打印的是空字符串
box.style.width = "300px";// 設(shè)置的是行內(nèi)樣式,而且這里必須帶單位
console.log(box.style.width);// 打印的是“300px“
獲取樣式
- 通過(guò)
style只能獲取行內(nèi)樣式 - 獲取的樣式如果有單位,獲取到的樣式中也會(huì)帶單位,類型是一個(gè)字符串
設(shè)置樣式
通過(guò)style設(shè)置樣式
- 通過(guò)
style設(shè)置的是行內(nèi)樣式 - 如果樣式需要單位,設(shè)置時(shí)也需要把單位帶上
通過(guò)類名設(shè)置樣式
.b{
width:100px;
height:100px;
background-color:red;
}
<div id="box"></div>
var box = document.getElementById("box");
// 通過(guò)類名設(shè)置樣式 兩種方式
box.className = "b";
box.setAttribute("class","b");
