节点属性
在文档对象模型 (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
例子:获取所有li标签,并输出节点的名称、节点的值、节点的类型
<!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 li=document.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ document.write("节点名称:"+li[i].nodeName+" 节点属性:"+li[i].nodeValue+"节点类型:"+li[i].nodeType+"<br/>"); } </script> </body> </html>
访问子结点childNodes
访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。
语法:
elementNode.childNodes注意:
如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。
注意:
1. IE全系列、firefox、chrome、opera、safari兼容问题
2. 节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,所以IE是3,其它浏览器是7
例子:获取子节点并输出相应属性输出:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <div>javascript<p>javascript</p><div>jQuery</div><h5>PH</h5></div> <script type="text/javascript"> var div=document.getElementsByTagName("div"); var child=div[0].childNodes for(var i=0;i<child.length;i++){ document.write(child[i].nodeName+"、"+child[i].nodeType+"、"+child[i].nodeValue+"<br/>"); } /*节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,所以IE是3,其它浏览器是7..把空格去掉*/ </script> </body> </html>
javascript javascript jQuery PH #text、3、javascript P、1、null DIV、1、null H5、1、null
访问子结点的第一和最后项
一、
firstChild
属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。语法:
node.firstChild说明:与elementNode.childNodes[0]是同样的效果。
二、
lastChild
属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。语法:
node.lastChild说明:与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
注意: 上一节中,我们知道Internet Explorer 会忽略节点之间生成的空白文本节点,而其它浏览器不会。我们可以通过检测节点类型,过滤子节点。
例子:获取div的第一个节点和最后一个节点
输出结果:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h> </div> <script type="text/javascript"> var x=document.getElementById("con"); document.write(x.firstChild.nodeName+"<br/>"); document.write(x.lastChild.nodeName+"<br/>"); </script> </body> </html>
javascript jQuery PHP P H5
访问父节点parentNode
注意: 浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。获取指定节点的父节点
语法:
elementNode.parentNode注意:父节点只能有一个
例子: 通过获取的mylist节点,使用访问父节点parentNode,将"HTML/CSS"课程内容输出。
输出<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</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"> var mylist = document.getElementById("tcon"); document.write(mylist.parentNode.parentNode.parentNode.lastChild.innerHTML) </script> </body> </html>
javascript 基础语法 流程控制语句 函数 事件 DOM das dadf HTML/CSS 文字 段落 表单 表格 HTML/CSS 文字 段落 表单 表格
访问兄弟节点
例子:编写get_previousSibling 函数,获得指定节点的上一个节点。1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。
语法:
nodeObject.nextSibling说明:如果无此节点,则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。
语法:
nodeObject.previousSibling说明:如果无此节点,则该属性返回 null。
注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。
输出:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>previousSibling</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_previousSibling(n){ var x=n.previousSibling; while (x && x.nodeType!=1){ x=x.previousSibling; } return x; } var x=document.getElementsByTagName("li")[5]; document.write(x.nodeName); document.write(" = "); document.write(x.innerHTML); var y=get_previousSibling(x); if(y!=null){ document.write("<br />previousSibling: "); document.write(y.nodeName); document.write(" = "); document.write(y.innerHTML); }else{ document.write("<br>这已经是第一个节点"); } </script> </body> </html>
javascript jquery html css3 php java LI = java previousSibling: LI = php
js的DOM(节点属性)
最新推荐文章于 2022-08-29 23:00:38 发布