javascript节点
2016-05-18 15:17
204 查看
DOM将html或xml文档描绘成一个由多层节点构成的结构。节点都继承自一个基类型,除IE外,其他所有浏览器都可以访问到这个类型。
节点有三个重要的属性,分别是:节点类型(nodeType)、节点名称(nodeName)、节点的值(nodeValue)。
一、节点类型(只读的)
节点类型用来区分不同类型的节点,注意每种类型都对应一个数字值。
以下是一些常见的节点类型:
用法:xx.nodeType(xx是节点对象)
如果要判断节点的类型,最好是用数字值进行判断,而不要用常量值判断,这在IE中会导致错误,为了确保跨浏览器兼容,最好写代码如下:
此外,使用nodeType还可以解决获取子节点个数及求得节点的兄弟节点这两种问题的浏览器兼容问题,如下面的代码:
输出结果为:ul子节点的长度为:7
明明ul里面只有三个<li>元素,为什么显示的结果却是7呢?
这是因为除IE之外的浏览器认为节点之间的空白符是一个空白文本节点,所以会出现这种结果,因此在这种情况下,我们需要对节点的类型进行判断,这里以查找下一个节点为例,如果下一个节点不是元素节点,则将下下个节点赋给x
二、节点名称(只读的)
元素节点的nodeName: 就是标签名,如<p>、<div>、<h2>等。
属性节点的nodeName:就是节点的属性,如<a>标签的”href“属性等。
文本节点的nodeName: 永远是#text
文档节点的nodeName: 永远是#document
用法:xx.nodeName(xx是节点对象)
三、节点的值(可以改变)
1、元素节点一般不用这个属性,因为它会返回undefined或null
来看一个小例子:
这里<li>元素节点的value输出是null。
<li>元素的子节点(文本节点)的值才是javascript,应这样写:
或者说<li>的innerHTML才是javascript
2、文本节点的nodeValue是文本本身
3、属性节点的nodeValue是属性值
节点有三个重要的属性,分别是:节点类型(nodeType)、节点名称(nodeName)、节点的值(nodeValue)。
一、节点类型(只读的)
节点类型用来区分不同类型的节点,注意每种类型都对应一个数字值。
以下是一些常见的节点类型:
节点类型 | 常量值 | 数字值 |
元素节点 | Node.ELEMENT_NODE | 1 |
属性节点 | Node.ATTRIBUTE_NODE | 2 |
文本节点 | Node.TEXT_NODE | 3 |
注释节点 | Node.COMMENT_NODE | 8 |
文档节点 | Node.DOCUMENT_NODE | 9 |
如果要判断节点的类型,最好是用数字值进行判断,而不要用常量值判断,这在IE中会导致错误,为了确保跨浏览器兼容,最好写代码如下:
if(xx.nodeType==1){ 2 alert("Node is an element"); }
此外,使用nodeType还可以解决获取子节点个数及求得节点的兄弟节点这两种问题的浏览器兼容问题,如下面的代码:
<ul> <li>html</li> <Li>css</Li> <li>javascript</li> </ul> <script type="text/javascript"> var nodelist = document.getElementsByTagName("ul")[0].childNodes; document.write("ul子节点的长度为:"+nodelist.length); </script>
输出结果为:ul子节点的长度为:7
明明ul里面只有三个<li>元素,为什么显示的结果却是7呢?
这是因为除IE之外的浏览器认为节点之间的空白符是一个空白文本节点,所以会出现这种结果,因此在这种情况下,我们需要对节点的类型进行判断,这里以查找下一个节点为例,如果下一个节点不是元素节点,则将下下个节点赋给x
function get_nextSibling(n){ var x=n.nextSibling; while (x && x.nodeType!=1){ x=x.nextSibling; } return x; }
二、节点名称(只读的)
元素节点的nodeName: 就是标签名,如<p>、<div>、<h2>等。
属性节点的nodeName:就是节点的属性,如<a>标签的”href“属性等。
文本节点的nodeName: 永远是#text
文档节点的nodeName: 永远是#document
用法:xx.nodeName(xx是节点对象)
三、节点的值(可以改变)
1、元素节点一般不用这个属性,因为它会返回undefined或null
来看一个小例子:
<li id="one">javascript<li> var mylist = document.getElementById("one"); document.write(mylist.nodeValue);
这里<li>元素节点的value输出是null。
<li>元素的子节点(文本节点)的值才是javascript,应这样写:
document.write(mylist.firstChild.nodeValue);
或者说<li>的innerHTML才是javascript
2、文本节点的nodeValue是文本本身
3、属性节点的nodeValue是属性值
相关文章推荐
- Rollout学习2 JS和OC代码对照篇
- JavaScript生成GUID的算法
- JavaScript 跨域:window.postMessage 实现跨域通信
- js获取星期几
- 实现JavaScript的组成----BOM和DOM详解
- js中的prototype和基于prototype的继承总结
- JavaScript中getBoundingClientRect()方法详解
- [置顶] JSON 使用讲解
- jsp/servlet基础知识
- js操作数组的一些小技巧
- js面向对象(构造函数与继承)
- JS replace 全部替换
- js的随机数生成器,不再使用Math.random
- [转载]javascript 隐性类型转换步骤
- j2ee中的重定向和转发
- js的继承
- Javascript--装饰器模式和观察者模式
- [repost]State of the Art JavaScript in 2016
- 自动提取HTML中的JS进行合并与压缩
- js判断undefined类型