查看元素節(jié)點
- document代表整個文檔
- document.getElementByID()//元素id在ie8一下的瀏覽器兴枯，不區(qū)分id大小寫，而且也返回匹配name屬性的元素(name = id)
- getElementsByTagName() // 標(biāo)簽名
<div id = "only">123</div>
var div = document. getElementsByTagName('div');
把頁面里面的所有div都拿出來矩欠，放到一個類數(shù)組里,代表一個數(shù)組财剖，所以div.style.background = "red"就會報錯 為了不報錯 把這個div取出來 得這樣 document. getElementsByTagName('div')[0];
盡管頁面只有一個div，但選出來的永遠是一組 所以要加角標(biāo) - getElementsByName();//, 需注意 只有部分標(biāo)簽可生效（表單癌淮，表單元素躺坟，img，ifame）
- getElementsByClassName();//類名 ie8和ie8一下沒有
- querySelector()// css選擇器 在ie7和ie7以下得版本中沒有
- querySelectorAll()// css選擇器 在ie7和ie7以下得版本中沒有
遍歷節(jié)點樹
- parentNode 父節(jié)點（最頂端的parentNode為#document);
- childNodes 子節(jié)點們
- firstChild 第一個子節(jié)點
- lastChild 最后一個子節(jié)點
- nextSibling 后一個兄弟節(jié)點previousSibling前一個兄弟節(jié)點
節(jié)點的主要類型：
元素節(jié)點 --1
屬性節(jié)點 --2
文本節(jié)點 -- 3
注釋節(jié)點 --8
document --9
DocumentFragment -- 11
<div>
<strong>
<span>1</span>
</strong>
<span></span>
<em></em>
</div>
div.childNodes.length -->7
div和strong之間算1一個文本節(jié)點 strong算元素節(jié)點
<div>
123
<! -- this is comment-->
<strong></strong>
<span></span>
</div>
也是七個節(jié)點
基于元素節(jié)點數(shù)的遍歷
- parentElement 返回當(dāng)前元素的父元素節(jié)點（ie不兼容）
- children 只返回當(dāng)前元素的元素子節(jié)點
- nodechildElementCount === node.children.length當(dāng)前元素節(jié)點的子元素個數(shù)
- firstElementChild 返回的是第一個元素節(jié)點
-lastElementChild 返回的是最后一個元素節(jié)點- nextElementSibling/previousElementSibling 返回的是后一個/前一個兄弟元素節(jié)點
節(jié)點的四個屬性
- nodeName
元素的標(biāo)簽名乳蓄，以大寫形式表示咪橙，只讀 - nodeValue
Text節(jié)點或Comment節(jié)點的文本內(nèi)容，可讀寫 - nodeType
該節(jié)點的類型，只讀 - attributes
Element節(jié)點的屬性集合
節(jié)點的一個方法 Node.hasChildNodes();
<div>
123
<!-- this is comment -->
<strong> </strong>
<span></span>
<em></em>
<i></i>
<b></b>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
function retElementChild(node){
var arr = [],
child = node.childNodes,
len = child.length;
for (var i = 0; i < len; i++) {
if(child[i].nodeType === 1){
arr.push(child[i]);
}
}
return arr;
}
console.log(retElementChild(div));
</script>
---------------------------------------------
<div>
123
<!-- this is comment -->
<strong> </strong>
<span></span>
<em></em>
<i></i>
<b></b>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
function retElementChild(node){
var temp = {
length : 0,
push : Array.prototype.push
splice : Array.prototype.splice
},
child = node.childNodes,
len = child.length;
for (var i = 0; i < len; i++) {
if(child[i].nodeType === 1){
temp.push(child[i]);
}
}
return temp;
}
console.log(retElementChild(div));
</script>
