访问节点
节点属性
在文档对象模型(DOM)中，每个节点都是一个对象，DOM节点有三个重要的属性：
1、nodeName：节点的名称
2、nodeValue：节点的值
3、nodeType:节点的类型
一、nodeName属性：节点的名称，是只读的。
1、元素节点的nodeName与标签名相同
2、属性节点的nodeName是属性的名称
3、文本节点的nodeName永远是#text
4、文档节点的nodeName永远是#document
二、nodeValue属性：节点的值
1、元素节点的nodeValue是undefined或null
2、文本节点的nodeValue是文本自身
3、属性节点的nodeValue是属性的值
三、nodeType属性：节点的类型，是只读的。以下常用的几种节点类型：
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>节点属性</title> </head> <body> <ul> <li>javascript</li> <li>HTML/CSS</li> <li>jQuery</li> </ul> <script type="text/javascript"> var node=document.getElementsByTagName("li"); for(var i=0;i<node.length;i++){ document.write("li["+(i+1)+"]:"+"<br/>"+"节点名:"+node[i].nodeName+"<br/>"); document.write("节点值:"+node[i].nodeValue+"<br/>"); document.write("节点类型:"+node[i].nodeType+"<br/><br/>"); } </script> </body> </html>
访问子节点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：
elementNode.childNodes
注意：
如果选定的节点没有子节点，则该属性返回不包含节点的NodeList
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>test</title> </head> <body> <ul> <li>javascript</li> <li>jQuery</li> <li>PHP</li> </ul> <script type="text/javascript"> var x=document.getElementsByTagName("ul")[0].childNodes; document.write("UL子节点个数："+x.length+"<br/>"); document.write("节点类型："+x[0].nodeType); </script> </body> </html>
运行结果：
注：
1、IE全系列、firefox、chrome、opera、safari兼容问题
2、节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7
如果把代码改成
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
访问子节点的第一和最后项
一、firstChild属性返回'childNodes'数组的第一个子节点。如果选定的节点没有字节点，则该属性返回NULL。
语法：
node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。
二、lastChild属性返回'childNodes'数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回null
语法：
node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
访问父节点parentNode
获取指定节点的父节点
语法：
elementNode.parentNode
注意：父节点只能有一个
Eg：获取P节点的父节点
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>test</title> </head> <body> <div id="text"> <p id="con"> parentNode获取指点节点的父节点 </p> </div> <script type="text/javascript"> var mynode=document.getElementById("con"); document.write(mynode.parentNode.nodeName); </script> </body> </html>
运行结果：
访问祖节点：
elementNode.parentNode.parentNode
例一：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>test</title> </head> <body> <div id="text"> <p> <span id="con"> 获取祖节点</span> </p> </div> <script type="text/javascript"> var mynode= document.getElementById("con"); document.write(mynode.parentNode.parentNode.nodeName); </script> </body> </html>
运行结果：
例二：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>test</title> </head> <body> <ul id="con"> <li id="lesson1">javascript <ul> <li id="tcon"> 基础语法</li> <li>流程控制语句</li> <li>函数</li> <li>事件</li> <li>DOM</li> </ul> </li> <li id="lesson2">das</li> <li id="lesson3">dadf</li> <li id="lesson4">HTML/CSS <ul> <li>文字</li> <li>段落</li> <li>表单</li> <li>表格</li> </ul> </li></ul> <script type="text/javascript"> //通过获取的mylist节点，使用访问父节点parentNode，将"HTML/CSS"课程内容输出。 var mylist = document.getElementById("tcon"); document.write(mylist.parentNode.parentNode.parentNode.lastChild.innerHTML); </script> </body> </html>
运行结果:
访问兄弟节点
1、nextSibling属性可以返回某个节点之后紧跟的节点（处于同一树层级中）
语法：nodeObject.nextSibling
说明：如果无此节点，则该属性返回null
2、previousSibling属性可返回某个节点之前紧跟的节点(处于同一树层级中)
语法： nodeObject.previousSibling
说明：如果无此节点，则该属性返回null
注意：两个属性获取的是节点，Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
解决问题方法：
判断节点nodeType是否为1，如果为元素节点，跳过。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>nextSibling</title> </head> <body> <ul id="ul"> <li id="a">javascript</li> <li id="b">jquery</li> <li id="c">html</li> </ul> <ul id="u2"> <li id="d">css3</li> <li id="e">php</li> <li id="f">java</li> </ul> <script type="text/javascript"> function get_nextSibling(n){ var x=n.nextSibling; while(x.nodeType!=1) { x=x.nextSibling; } return x; } var x=document.getElementsByTagName("li")[0]; document.write(x.nodeName); document.write("="); document.write(x.innerHTML); var y=get_nextSibling(x); document.write("<br/>nextSibling:"); document.write(y.nodeName); document.write("="); document.write(y.innerHTML); </script> </body> </html>
运行结果：
示例：编写get_previousSibling 函数，获得指定节点的上一个节点。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>nextSibling</title> </head> <body> <ul id="u1"> <li id="a">javascript</li> <li id="b">jquery</li> <li id="c">html</li> </ul> <ul id="u2"> <li id="d">css3</li> <li id="e">php</li> <li id="f">java</li> </ul> <script type="text/javascript">
function get_nextSibling(n){ var x=n.nextSibling; while (x && x.nodeType!=1){ x=x.nextSibling; } return x; }
function get_previousSibling (n){ var x=n.previousSibling; while (x && x.nodeType!=1) { x=x.previousSibling; } return x; }
var x=document.getElementsByTagName("li")[0]; document.write(x.nodeName); document.write(" = "); document.write(x.innerHTML); var y=get_nextSibling(x); if(y!=null){ document.write("<br />nextsibling: "); document.write(y.nodeName); document.write(" = "); document.write(y.innerHTML); }else{ document.write("<br>已经是最后一个节点"); } </script> </body> </html>
运行结果：
浙公网安备 33010602011771号