1.頁面文檔中一共存在3種節點: 標籤、屬性、文本內容
1)標籤節點:類型值爲1
2)屬性節點:類型值爲2
3)文本內容節點:類型值爲3
2.每個節點有三個固定屬性:
1)節點名稱(nodeName)
2)節點類型(nodeType)
3)節點值(nodeValue)
4)標籤節點是沒有值(nodeValue)的---值爲null, 只胡屬性節點和文本內容節點有值
HTML DOM Tree 實例
通過 HTML DOM，樹中的所有節點均可通過
JavaScript 進行訪問。所有 HTML 元素（節點）均可被修改，也可以創建或刪除節點。
從上面的 HTML 中：
- <html> 節點沒有父節點；它是根節點
- <head> 和 <body> 的父節點是 <html> 節點
並且：
- <html> 節點擁有兩個子節點：<head> 和 <body>
- <head> 節點擁有一個子節點：<title> 節點
- <title> 節點也擁有一個子節點：文本節點 "文檔標題"
- <h1> 和 <a> 節點是同胞節點，同時也是 <body> 的子節點
- <h1>節點也擁有一個子節點:文本節點 "我的標題"
- <a>節點擁有兩個子節點:屬性節點 "href"、文本節點"我的鏈接"
並且：
- <head> 元素是 <html> 元素的首個子節點
- <body> 元素是 <html> 元素的最後一個子節點
- <a> 元素是 <body> 元素的首個子節點
- <h1> 元素是 <body> 元素的最後一個子節點
3. 獲取節點的三種方式:
1) 通過id: document.getElementById()方法 --返回一個節點對象2) 通過name: document.getElementsByName()方法 --返回一個節點集合
3) 通過標籤名: document.getElementsByTagName()方法 --返回一個節點集合
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--
1.每個結點都有三個固定屬性：節點名稱(nodeName),節點類型(nodeType),節點的值(nodeValue)
2.頁面文檔中一共存在3種節點:標籤、屬性、文本內容
1)標籤節點:類型值爲1
2)屬性節點:類型值爲2
3)文本內容節點:類型值爲3
4)標籤節點是沒有值(nodeValue),只有屬性節點和文本內容節點有值
3.獲取節點的3種方式：
1)通過id：getElementById()方法 --返回一個結點
2)通過name:getElementByName()方法 --返回一個集合
3)通過標籤名:getElementByTagName()方法 --返回一個集合
-->
<script type="text/javascript">
function t1(){
//1.通過id獲取
var oDiv1=document.getElementById("div1");
//document.writeln("aaa"); //不能在方法內輸出到文檔對象,否則把頁面內容充掉,後面就無法再獲取下面的頁面內容了
alert(oDiv1.nodeName+","+oDiv1.nodeType+","+oDiv1.nodeValue);//DIV,1,null
var txtNode=oDiv1.childNodes[0]; //獲取div節點中的第一個孩子節點
alert(txtNode.nodeName+","+txtNode.nodeType+","+txtNode.nodeValue); //#text,3,0000
//獲取div標籤中的id屬性節點
//var oIdPro=oDiv1.getAttribute("id");
var oIdPro=oDiv1.attributes[0];
alert(oIdPro.nodeName+","+oIdPro.nodeType+","+oIdPro.nodeValue); //id,2,div1
}
function t2(){
//2.通過name獲取
var oInputName=document.getElementsByName("name")[0];
oInputName.value="dragon";
}
function t3(){
//3.通過標籤名獲取
var oInputName=document.getElementsByTagName("input")[4];
oInputName.value="1234";
}
</script>
</head>
<body>
<h1>從document對象獲取結點:3中方式</h1>
<script type="text/javascript">
</script>
<input type="button" value="通過id獲取" οnclick="t1();"/>
<input type="button" value="通過name屬性獲取" οnclick="t2();"/>
<input type="button" value="通過標籤名獲取" οnclick="t3();"/>
<br/>
<div id="div1">0000</div>
<form action="">
姓名：<input type="text" name="name"/> <br/>
密碼：<input type="password" name="pwd"/> <br/>
<input type="submit" value="登陸"/>
</form>
</body>
</html>4.對節點進行增刪改
1.添加一個標籤節點
1)document.createElement()
2)node.innerText 或node.innerHTML
2.刪除一個節點
1)obj.removeNode(boo) 自己調用removeNode--boo表示是否刪除其子樹
2)parentNode.removeChild(obj) 父節點調用removeChild
3.修改(替換)一個節點
parentNode.replaceChild(newChild, oldChild)--用newChild替換oldChild
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
border: red solid 1px;
width: 200px;
padding: 30px;
margin: 20px;
}
</style>
</head>
<body>
<h1>演示節點的增刪改查--CRUD</h1>
<div id="div1">1111111111111</div>
<div id="div2">2222222222222</div>
<div id="div3">3333333333333</div>
<hr/>
<input type="button" value="創建並添加新節點" οnclick="createAndAdd1();">
<script type="text/javascript">
function createAndAdd1(){
//創建一個文本對象
var oTxtNode = document.createTextNode("創建了一個文本對象");
var oDiv=document.getElementById("div1");
oDiv.appendChild(oTxtNode);
}
</script>
<input type="button" value="創建並添加新節點2" οnclick="createAndAdd2();">
<script type="text/javascript">
//添加一個標籤節點--document.createElement()
function createAndAdd2(){
//創建一個元素
var oInputNode = document.createElement("input");
oInputNode.type="button";
oInputNode.value="一個新按鈕";
var oDiv=document.getElementById("div1");
oDiv.appendChild(oInputNode);
}
</script>
<input type="button" value="創建並添加新節點3" οnclick="createAndAdd3();">
<script type="text/javascript">
//添加一個標籤節點--node.innerText 或node.innerHTML
function createAndAdd3(){
var str="000000";
var oDivNode=document.getElementById("div1");
//oDivNode.innerText=oDivNode.innerText+str;
//oDivNode.innerHTML+="<input type='button' value='新按鈕'>";
oDivNode.innerHTML+="<a href='http://my.csdn.net/?ref=toolbar' target='_blank'>我的博客</a>"; //
}
</script>
<br/>
<input type="button" value="刪除div2中的節點" οnclick="delNode();">
<script type="text/javascript">
function delNode(){
var oDiv2=document.getElementById("div2");
/* //自殺
oDiv2.removeNode(); //默認爲false,只刪當前節點,不刪孩子節點,並且長兄作爲父親
oDiv2.removeNode(true); //連子樹一起刪除
*/
//父殺 建議使用這種方法
oDiv2.parentNode.removeChild(oDiv2);
}
</script>
<br/>
<input type="button" value="修改div2中的節點" οnclick="updateNode();">
<script type="text/javascript">
function updateNode(){
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
//把div1節點替換爲div2節點,這裏是移動替換，div2節點會沒有
oDiv1.parentNode.replaceChild(oDiv2, oDiv1);
}
</script>
<br/>
<input type="button" value="複製修改div2中的節點" οnclick="updateNode2();">
<script type="text/javascript">
function updateNode2(){
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
//先把div2克隆
var oDiv=oDiv2.cloneNode(true);
//在用父親換
oDiv1.parentNode.replaceChild(oDiv, oDiv1);
}
</script>
</body>
</html>