|
/************************************************** *javascript通过三种属性来识别不同的节点 * *nodeName:节点名称nodeValue:节点值,nodeType节点类型 * *1.nodeName:节点名称 * 元素节点的nodeName是标签名称 * 属性节点的nodeName是属性名称 * 文本节点的nodeName永远是#text * 文档节点的nodeName永远是#document *2.nodeValue:节点值 * 文本节点的nodeValue包含文本值 * 属性节点的nodeValue是属性值 * 元素和文档的nodeValue属性不可用 *3.nodeType:节点类型 * 元素的nodeType:1 * 属性:2 * 文本:3 * 注释:8 * 文档:9 * *innerHTML:获取开始和结束标签之间的HTML全部内容 *childNodes:当前子节点的直接节点的集合,该方法 *removeChile:移除子节点 *appendChild:添加子节点 **************************************************/ ------------------------------------------------ 实例图:  ---------------------------------------------- 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>节点操作</title> <script type="application/javascript" language="javascript"> /************************************************** *javascript通过三种属性来识别不同的节点 * *nodeName:节点名称nodeValue:节点值,nodeType节点类型 * *1.nodeName:节点名称 * 元素节点的nodeName是标签名称 * 属性节点的nodeName是属性名称 * 文本节点的nodeName永远是#text * 文档节点的nodeName永远是#document *2.nodeValue:节点值 * 文本节点的nodeValue包含文本值 * 属性节点的nodeValue是属性值 * 元素和文档的nodeValue属性不可用 *3.nodeType:节点类型 * 元素的nodeType:1 * 属性:2 * 文本:3 * 注释:8 * 文档:9 * *innerHTML:获取开始和结束标签之间的HTML全部内容 *childNodes:当前子节点的直接节点的集合,该方法 *removeChile:移除子节点 *appendChild:添加子节点 **************************************************/ function click1(){ var div1 = document.getElementById("div1"); alert("节点名称:"+div1.nodeName);//元素的nodeName:div alert("节点值:"+div1.nodeValue);//元素的nodeValue不可用 alert("节点类型:"+div1.nodeType);//元素的nodeType:1 } function get_firstNode_node(){ var lis = document.getElementsByTagName("li"); for(var i = 0; i<lis.length ; i++){ var lis_firstChild = lis[i].firstChild;//当前节点的第一个子节点是文本内容 alert("获取列表第一个子节点的节点名称:" + lis_firstChild.nodeName);//文本的nodeName永远都是#text alert("获取列表第一个子节点的节点值:" + lis_firstChild.nodeValue);//文本的nodeValue是文本的值 alert("获取列表第一个子节点的节点类型:" + lis_firstChild.nodeType);//文本的nodeType:3 } } function getText(){ var test = document.getElementById("test"); test.style.border="2px dashed"; } function getParent(){ var test = document.getElementById("test"); test.parentNode.style.border="2px dashed red"; } function getFirst(){ var test = document.getElementById("test"); var first = test.firstChild.nodeValue; alert(test.firstChild.data); alert(test.firstChild.textContent); alert(test.firstChild.text); alert(first); } function getLast(){ var div3 = document.getElementById("div3"); var div3_lastChild_nodename = div3.lastChild.nodeName; alert("id=div3的div层的最后一个子节点的节点名称是:"+div3_lastChild_nodename); var test = document.getElementById("test"); var test_lastChild_nodeValue = test.lastChild.nodeValue; alert("id=test的p元素的最后一个子节点的节点值是:"+test_lastChild_nodeValue); } function test_innerHTML(){ var test = document.getElementById("div4"); alert(test.innerHTML); var str = "<p align='center'>面目全非!完全不一样喽!</p>" test.innerHTML=str; } function removeChildnode(){ var test = document.getElementById("div5"); var children = test.childNodes; for(var i=0;i<children.length;i++){ test.removeChild(children[i]); } } function inserText(){ var test = document.getElementById("div6"); var para = document.createElement("P"); var text = document.createTextNode("要添加的问题本"); para.appendChild(text); test.appendChild(para); } </script> </head> <body> <!--************************** 1. nodeName:节点名称nodeValue:节点值,nodeType节点类型*********************************--> <div id="div1" style="background-color:#090" onclick="click1()">单击我,获取该div的节点信息</div><br /> <!--************************** 2. 获取列表项中的第一个子元素的节点信息类型*********************************--> <div style="background-color:#0FC"> <span onclick="get_firstNode_node()">单击我获取列表项中的第一个子元素的节点信息</span> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> <li>List Item 4</li> <li>List Item 5</li> <li>List Item 6</li> </ul> </div> <!--************************** 3. parentNode,fiistChild,lastChild*********************************--> <div style="background-color:#39C" > <div id="div3"><p id="test">我是第一个p的文字</p><br /><p id="test">我是第二个p的文字</p><br /></div> <input type="button" onclick="getText()" value="为id=test的p标签添加边框" /><br /> <input type="button" onclick="getParent()" value="为id=test的父节(parentNode)点添加边框" /><br /> <input type="button" onclick="getFirst()" value="获取id=test的第一个子节点内容" /><br /> <input type="button" onclick="getLast()" value="获取id=test的最后一个子节点的内容" /><br /> </div> <!--************************** 4. innerHTML *********************************--> <div id="div4" style="background-color:#CC0"> <p onclick="test_innerHTML()">我是测试段落</p> </div> <!--************************** 5. removeChild*********************************--> <div style="background-color:#C36"> <div id="div5"><p>我是将要被删除的子节点</p></div> <input type="button" value="deleteChildNode" onclick="removeChildnode()" /> </div><br /> <!--************************** 6. appendChild*********************************--> <div style="background-color:#9F3"> <div id="div6" style="width:400px; border:1px solid green"></div> <input type="button" value="通过脚本插入一段文本" onclick="inserText()" /> </div> </body> </html> |
|
|
来自： I_T_馆 > 《javascript》
