DOM基礎執行個體
一．什麼是DOM節點？
說白了标簽元素和節點都一樣隻是在不同的地方叫法不同
在css裡面 叫标簽
在JS裡面 叫元素
在DOM裡面叫節點
浏覽器支援情況：現在主流浏覽器大概就是：
IE 10%
Chrome 60%
FF 90%
（1） DOM節點
（2） ChildNodes(用來擷取子節點，這個擷取的是一個數組) nodeType節點類型
ChildNodes例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
var oUl=document.getElementById('ul1');
alert(oUl.childNodes.length);
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
</html>
我寫了一個ul裡面有2個li标簽用ChildNodes來擷取ul的子節點，其實都知道 ul的子節點是li ，并且有2個，但是你用某些浏覽器打開應該會出現5個子節點，這多出來的3個其實是3個文本節點，什麼是文本節點其實就是空白，你自己算一下，ul裡面先是空白，然後是li，再是空白，再是li，然後再是空白，這樣就是5個，這就是浏覽器的相容問題！
下面來解決相容問題，然後就用到nodeType了，nodeType是擷取節點的類型
擷取節點類型的例子:借用上面的代碼寫一個for循環
<script>
for(var i=0;i<oUl.childNodes.length;i++)
{
alert(oUl.childNodes[i].nodeType)
}
結果會報出來3和1 現在說明3代表文本節點，1代表元素節點
nodeType==3 è代表文本節點
nodeType==1 è代表元素節點
大部分浏覽器相容問題都是用if解決
//alert(oUl.childNodes.length)
alert(oUl.childNodes[i].nodeType)
if(oUl.childNodes[i].nodeType==1)
oUl.childNodes[i].style.background='red';
這段代碼是元素節點背景變為紅色
下面來講一個小東西childred
window.onload=function()
alert(oUl.children.length)
</script>
Children也是來擷取子節點的但是她不會算文本節點，但是很少用，不知道為什麼，你們有印象就好。
（3） 父節點parentNode
例子把父元素隐藏
var aA=document.getElementsByTagName('a')
for(var i=0;i<aA.length;i++)
aA[i].onclick=function()
{
this.parentNode.style.display="none"
}
}
}
（4） offsetParent擷取某個元素用來定位的父節，這個沒什麼可講，直接用代碼可以擷取
代碼如下
<style>
#div1{background: red;width:200px;height:200px;position:absolute;margin:100px;}
#div2{background:#999;width:100px;height:100px;position:absolute;left:50px;top:50px;}
</style>
var oDiv2=document.getElementById('div2');
alert(oDiv2.offsetParent)
<div id="div1">
<div id="div2">
</div>
</div>
（5） 首尾節點（有相容問題）
firstChild firstElementChild
lastChild lastElementChild
oUl.firstChild.style.background='red'
這個代碼是第一個子節點顔色變紅，但是你執行會報錯，沒錯浏覽器問題不相容，你的第一個子節點是文本節點，然後就用到了firstElementChild,但是。。。這個也有相容問題，然後咋辦。。用if解決
oUl.firstElementChild.style.background='red'
解決相容問題
<script>
//oUl.firstChild.style.background='red';
if(oUl.firstElementChild)
oUl.firstElementChild.style.background='red';
}else
{
oUl.firstChild.style.background='red';
}
二 元素屬性操作
第一種 oDiv.style.display=’block’
第二種 oDiv.style[‘idsplay’]=’block’
第三種 Dom方式
DOM方式操作元素屬性
1， 擷取 getAttribute（名稱）
2， 設定 setAttribute（名稱，值）能用這個方法的時候都可以用上面的第二種方式
3， 删除 removeAttribute（名稱）
例子代碼
var te1=document.getElementById('text1');
var te2=document.getElementById('text2');
te2.onclick=function()
//te1.value='aaa'//第一種
//te1['value']='aaa'//第二種
te1.setAttribute('value','aaa');
<input id="text1" type="text" />
<input id="text2" type="button" value="按鈕"/>
三 DOM元素靈活查找
（1） 用className條件篩選選擇元素
例子
<!DOCTYPE html>
<meta charset="UTF-8">
window.onload=function()
{
var oUl=document.getElementById('ul1');
varoLi=oUl.getElementsByTagName('li')
for(vari=0;i<oLi.length;i++)
{
if(oLi[i].className=='box')
{
oLi[i].style.background='red';
}
}
<li class="box">11</li>
<li>11</li>
上面代碼用className查找元素是元素屬性變紅
（2） 也可以用className封裝成一個函數，然後友善以後直接調用
寫法如下
function getclass(name,box)
var aResult=[];
var a=name.getElementsByTagName('*')//因為不知道要選擇什麼元素是以寫*号
for(var i=0;i<a.length;i++)
if(a[i].className=='box')
aResult.push(a[i]);
}
return aResult;
var oUl=document.getElementById('ul1');
var abox=getclass(oUl,'box')
for(var i=0;i<abox.length;i++)
abox[i].style.background='red'
}
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)