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>
