節(jié)點(diǎn)
每一個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象控轿;
- 元素節(jié)點(diǎn)(標(biāo)簽如<body>)
- 屬性節(jié)點(diǎn)(所有的屬性都被元素包含,如<p>中的title="A picture")
- 文本節(jié)點(diǎn)(文本)
獲取元素
獲取的都是對(duì)象茬射,因?yàn)槲臋n中每一個(gè)元素都是對(duì)象;
- getElementById
-
getElementsByTagName
返回一個(gè)對(duì)象數(shù)組在抛,允許把一個(gè)通配符作為它的參數(shù),如:
alert(document.getElementsByTagName("*").length)
//可知道某份文檔里共有多少個(gè)元素節(jié)點(diǎn)
-
getElementsByClassName
返回一個(gè)對(duì)象數(shù)組,使用這個(gè)方法還可以查找那些帶有多個(gè)類名的元素刚梭,只需在字符串參數(shù)中用空格分隔類名即可。如:
alert(document.getElementsByClassName("important sale").length)
注意:即使在元素的class屬性中望浩,類名的順序是"sale important",也會(huì)照樣匹配該元素磨德。不僅類名的實(shí)際順序并不重要,就算元素還帶有更多類名也沒(méi)關(guān)系典挑。
獲取和設(shè)置屬性
- getAttribute
var paras=document.getElementByTagName("p")
for(var i=0;i<paras.length;i++){
alert(paras[i].getAttribute("title"));
}
以上如果沒(méi)有title屬性,則getAttribute("title")方法會(huì)返回null值您觉;
getAttribute方法不屬于document對(duì)象,所以不能通過(guò)docume對(duì)象調(diào)用琳水,只能通過(guò)元素節(jié)點(diǎn)對(duì)象調(diào)用肆糕。
-
setAttribute
和getAttribute一樣在孝,只能用于元素節(jié)點(diǎn);
xx.setAttribute("title","a list of goods")
childNodes屬性
在一棵節(jié)點(diǎn)樹(shù)上私沮,childNodes屬性可以用來(lái)獲取任何一個(gè)元素的所有子元素,它是一個(gè)包含這個(gè)元素全部子元素的數(shù)組仔燕;
var body_element=document.getElementByTagName('body')[0];
alert(body_element.childNodes.length);
nodeType屬性
每一個(gè)節(jié)點(diǎn)都有nodeType屬性。
node.nodeType
nodeType的值是一個(gè)數(shù)字
- 元素節(jié)點(diǎn)的nodeType屬性值是1
- 屬性節(jié)點(diǎn)的屬性值是2
- 文本節(jié)點(diǎn)的屬性值是3
nodeValue屬性
使用 nodeValue屬性可以改變一個(gè)文本節(jié)點(diǎn)的值
如:<p id="description">A tree</p>
var desription=document.getElementById("description");
alert(description.nodevalue);
//null,因?yàn)閜元素本身的nodeVlue值是一個(gè)空值晰搀,我們真正需要的是<p>所包含的文本的值
alert(description.childNodes[0].nodeValue);//A tree