dom對象詳解----document對象2 加強
在dom編程中，一個html文檔會被當作 dom 樹來對待，dom會把所有的 html 元素映射成Node節點
，於是 你就可以使用Node節點（對象）的屬性和方法。
這些Node節點的屬性和方法如下圖所示：
我們使用Node節點的屬性和方法來舉一個例子：
<html>
<head>
<script language="javascript">
function test(){
//獲取div1(烏龜 雞所在div),這個div也是一個Node節點，可以使用節點的方法
var Div1=$("div1");
window.alert(Div1.nodeName);
window.alert(Div1.nodeType);//nodeType爲1 ,表示是一個元素
window.alert(Div1.nodeValue);
window.alert(Div1.childNodes.length);//childNodes獲取所有的子節點，這裏返回5，明明下面只有兩個img子節點怎麼會返回5個呢？
//這裏它把末尾的換行符也當成是一個子節點了，只是我們看不到而已，這個很神奇
//註釋也是一個節點，而且是這個div的兄弟節點，這裏是下一個節點
//註釋的nodeType 值爲8
window.alert(Div1.nextSibling.nodeName+" "+Div1.nextSibling.nodeType+" "+Div1.nextSibling.value);
//獲取這個div的前一個節點
window.alert(Div1.previousSibling.nodeName+" "+Div1.previousSibling.nodeType+" "+Div1.previousSibling.value);
//得到父節點
window.alert("父親節點："+Div1.parentNode);
//得到父節點的父節點
window.alert("父親的父親節點："+Div1.parentNode.parentNode);
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body onkeydown="return move(event)">
<table border="1">
<tr>
<td></td>
<td><input type="button" value="向上走" onclick ="move(this)"/></td>
<td></td>
</tr>
<tr>
<td><input type="button" value="向左走" onclick ="move(this)"/></td>
<td></td>
<td><input type="button" value="向右走" onclick ="move(this)"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="向下走" onclick ="move(this)"/></td>
<td></td>
</tr>
</table>
<input type="button" value="測試節點" onclick="test()"/><div id="div1" value="div1" style="width:500px;height:400px;background-color:pink">
<img id="wugui" src="wugui.png" border="1" style="position:absolute;width:50px;height:40px;left:100px;top:120px"/>
<img id="cock" src="ji.png" border="1" style="position:absolute;width:50px;height:40px;left:200px;top:200px"/>
</div><!--註釋也是一個節點，而且是前後div的兄弟節點--><div id="div2" value="div2" ></div>
</body>
</html>特別注意：經過測試，每個對象的前後的換行符都會被認爲是一個節點，所以在尋找某個元素的 子節點，父節點，兄弟節點的時候一定要注意它的換行符！
document對象的屬性
除了這些，還有一些，如下圖所示：
舉個案例：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.fgColor="white";
document.bgColor="black";
</script>
</head>
<body>
Hello
</body>
</html>dom對象詳解----body對象
這裏有很多方法已經用過了，所以就不講了，這裏強調一下下面兩個方法的區別
- innerText
- innerHTML
舉例說明：
<html>
<head>
<script language="javascript">
function test(){
//innerText 瀏覽器會把它當作 文本來解析
$("myspan").innerText="<a href='http://www.baidu.com'>連接到百度</a>";
//innerHTML 瀏覽器會把它當作 html來解析
$("myspan").innerHTML="<a href='http://www.baidu.com'>連接到百度</a>";
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<span id="myspan"></span>
<input type="button" value="測試" onclick="test()"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script language="javascript">
function test(){
window.alert(document.body.scrollTop+150+"px");
window.alert(document.getElementById("myHref").style.top);
document.getElementById("myHref").style.top=document.body.scrollTop+150+"px";
document.getElementById("myHref").style.left=document.body.scrollLeft+50+"px";
}
function window_onscroll()
{
document.getElementById("myHref").style.top=document.body.scrollTop+150+"px";
document.getElementById("myHref").style.left=document.body.scrollLeft+50+"px";
// return true;
}
function document_onselectstart()
{
return false;
//返回false，這樣就可以禁止用戶選擇網頁中的文本
//當用戶選擇文本時，會觸發 onselectstart事件，當返回false時，就不會選中
//你也可以在body中加入 onselectstart = "return false;" 同樣達到這個效果
}
</script>
<script language="javascript" for=document event=onselectstart>
//這樣的寫法等同於在 body 上 寫onselectstart = "return false;"
return document_onselectstart();
</script>
</head>
<body onscroll="return window_onscroll()">
<input type="button" value="測試" onclick="test()"/>
<textarea id="textarea1" name="textarea1" rows="500" cols="500">
</textarea>
<a id = "myHref" href="http://www.baidu.com" style="left:0px; top:50px; position:absolute; word-break:keep-all">
<img src="wugui.png"/></a>
</body>
</html>
上面這段代碼不錯，但是沒有仔細看哪裏有問題，就是運行不出來效果