dom對象詳解----document對象
document對象代表的是整個html文檔，因此可以訪問到文檔中的各個對象（元素）。
- write()
這個是向文檔輸出文本或是js代碼
- writeln
這個也是向文檔輸出文本或是js代碼，不同的是多一個換行符。但是實際上對於瀏覽器來說，輸出效果並沒有區別。
- getElementById()
1. 規定html文檔中 id 號要唯一，如果不唯一，則只取第一個元素
2. id號不要用數字開頭
案例：
<html>
<head>
<script language="javascript">
function test()
{
var myhref=document.getElementById("a1");//其實它只找一個，只找第一個，找到第一個後就返回了，不往後執行了
window.alert(myhref);
}
</script>
</head>
<body>
<!-- 故意定義了三個id號相同的超鏈接 -->
<a id="a1" href="http://www.baidu.com">連接到baidu</a>
<a id="a1" href="http://www.sina.com">連接到sohu</a>
<a id="a1" href="http://www.163.com">連接到163</a>
<input type="button" value="test1" onclick="test();"/>
</body>
</html>- getElementsByName() 注意是Elements 不是 Element
案例：
<html>
<head>
<script language="javascript">
function test2()
{
//id不能重複，但是name可以重複
var hobbies=document.getElementByName("hobby");
//window.alert(hobbies.length);
for(var i=0;i<hobbies.length;i++)
{ //如何判斷是否選擇
if(hobbies[i].checked){
window.alert("你的愛好是"+hobbies[i].value);
}
}
}
</script>
</head>
<body>
請選擇你的愛好
<input type="checkbox" name="hobby" value="足球"/> 足球
<input type="checkbox" name="hobby" value="旅遊"/> 旅遊
<input type="checkbox" name="hobby" value="音樂"/> 音樂
<input type="button" value="testing" onclick="test2()"/>
</body>
</html>- getElementsByTagName()
通過標籤名來獲取對象（元素）
綜合案例：
<html>
<head>
<script language="javascript">
function test()
{
var myhref=document.getElementById("a1");//其實它只找一個，只找第一個，找到第一個後就返回了，不往後執行了
window.alert(myhref);
}
function test2()
{
//id不能重複，但是name可以重複
var hobbies=document.getElementsByName("hobby");
//window.alert(hobbies.length);
for(var i=0;i<hobbies.length;i++)
{ //如何判斷是否選擇
if(hobbies[i].checked){
window.alert("你的愛好是"+hobbies[i].value);
}
}
}
//通過標籤名來獲取對象（元素）
function test3()
{
var myObjs=document.getElementsByTagName("input");
for(var i=0;i<myObjs.length;i++)
{
window.alert("input:"+myObjs[i].value);
}
}
</script>
</head>
<body>
<!-- 故意定義了三個id號相同的超鏈接 -->
<a id="a1" href="http://www.baidu.com">連接到baidu</a>
<a id="a1" href="http://www.sina.com">連接到sohu</a>
<a id="a1" href="http://www.163.com">連接到163</a>
<input type="button" value="test1" onclick="test();"/>
請選擇你的愛好
<input type="checkbox" name="hobby" value="足球"/> 足球
<input type="checkbox" name="hobby" value="旅遊"/> 旅遊
<input type="checkbox" name="hobby" value="音樂"/> 音樂
<input type="button" value="test2" onclick="test2();"/>
<input type="button" value="獲取所有input" onclick="test3()"/>
</body>
</html>
下面再來看幾個重要的函數
- createElement() 動態的創建節點
- appendChild() 動態的添加節點
- removeChild() 動態的刪除節點
如何動態的創建 ，刪除 html元素
舉例說明：
動態的添加元素到document文檔中，動態的刪除document中的元素
<html>
<head>
<script language="javascript">
function test1()
{
//創建元素
var myElement=document.createElement("a"); //寫希望創建的標籤的名字
//給新的元素添加必要的信息
myElement.href="http://www.baidu.com";
myElement.innerText="連接到百度";
//myElement.style.left="200px";
//myElement.style.top="200px";
//myElement.style.position="absolute";
//添加到document.body上去
//document.body.appendChild(myElement);
//將元素添加到某一個div中
document.getElementById("div1").appendChild(myElement);
}
function test2()
{
var myButton=document.createElement("input"); //寫希望創建的標籤的名字
myButton.type="button";
myButton.value="新加的按鈕";
myButton.id="id1";
document.getElementById("div1").appendChild(myButton);
}
function test3()
{ //刪除一個元素,必須首先知道它的父元素是誰
//這是第一種刪除元素的方法，這種方法不靈活
document.getElementById("div1").removeChild(document.getElementById("id1"));
//第二種比較靈活(推薦)
document.getElementById("div1").parentNode.removeChild(document.getElementById("id1"));
}
</script>
</head>
<body>
<input type="button" value="動態的創建一個超鏈接" onclick="test1();"/>
<input type="button" value="動態的創建一個按鍵" onclick="test2();"/>
<input type="button" value="刪除一個元素" onclick="test3();"/>
<div id="div1" style="width:200px;height:400px;border:1px solid red ">div1</div>
</body>
</html>