js的DOM(节点属性)
2015-08-21 22:20
731 查看
节点属性
在文档对象模型 (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
获取指定节点的父节点语法:
elementNode.parentNode
注意:父节点只能有一个
注意: 浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。
例子:通过获取的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 文字 段落 表单 表格
访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。语法:
nodeObject.nextSibling
说明:如果无此节点,则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。
语法:
nodeObject.previousSibling
说明:如果无此节点,则该属性返回 null。
注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。
例子:编写get_previousSibling 函数,获得指定节点的上一个节点。
<!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(文档对象模型)获取节点
- js的screen对象
- 在JS方法中返回多个值的三种方法
- [持续更新]JavaScript学习笔记(六)
- js的Navigator对象
- js的Location对象
- js的History对象
- ajax同步与异步
- js的window对象(BOM)
- js内置对象(Array数组对象)
- jsp页面onsubmit="return checklogin();"该解决方案给
- js内置对象(Math对象)
- js内置对象(string字符串对象)
- js内置对象(日期对象)
- js内置对象(概念)
- 深入理解JavaScript系列(结局篇)
- 深入理解JavaScript系列(50):Function模式(下篇)
- 深入理解JavaScript系列(49):Function模式(上篇)
- 深入理解JavaScript系列(48):对象创建模式(下篇)
- 深入理解JavaScript系列(47):对象创建模式(上篇)