访问DOM节点3——通过节点关系
2010-10-27 14:25
197 查看
DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对它们进行访问。
从上面的实际例子中我们可以看到,在DOM节点树里,并不只有标签菜构成节点,而文字本身也是节点。例如,p是一个节点,而它的firstChild就是这个段落的文字内容了。
parentNode、firstChild、lastChild
如字面意思,parentNode用于访问父节点。firstChild和lastChild则分别用于访问某个节点的第一个子结点和最后一个子结点。其中,nodeName是只读的,元素节点的nodeName和标签名字一样,属性节点的nodeName就是该属性,文字节点的nodeName永远是#text,文档节点的nodeName是#document。应用实例
HTML代码:
<div> <p id="test">我是第一个p的文字</p> <p id="test2">我是第二个p的文字,span的文字</p> </div>
JavaScript代码
<script type="text/javascript"> function getTest(){ var x = document.getElementById("test"); x.style.border = "1px dashed"; } function getParent(){ var x = document.getElementById("test"); x.parentNode.style.border = "1px dashed"; } function getFirst(){ var x = document.getElementById("test"); alert(x.firstChild.nodeValue); } function getLast(){ var x = document.getElementById("test"); alert(x.lastChild.nodeValue); } </script>
从上面的实际例子中我们可以看到,在DOM节点树里,并不只有标签菜构成节点,而文字本身也是节点。例如,p是一个节点,而它的firstChild就是这个段落的文字内容了。
其它访问DOM节点的属性
除了上面的parentNode、firstChild和lastChild,我们还有childNodes,它表示的是一个节点的所有子结点;而previousSibling和nextSibling则分别表示上一个和下一个相邻的节点。相关文章推荐
- XML与HTML类似,可通过DOM,把XML视为节点树,来访问XML中的数据
- 通过 DOM访问 HTML 文档中的节点
- Dom-docment-通过节点层次关系获取
- 利用DOM节点关系访问HTML元素
- 通过 DOM您可访问 HTML 文档中的每个节点
- JS 中DOM节点的访问关系
- 【Dom】通过递归获取节点的层次关系
- JavaScript DOM概述(获取节点的方法/节点的访问关系/节点创建添加删除复制/属性获取设置删除)
- Dom解析是将xml文件全部载入,组装成一颗dom树,然后通过节点以及节点之间的关系来解析xml文件,下面结合这个xml文件来进行dom解析。
- DOM(一)-15-(通过节点层次关系获取节点)
- Dom 通过html元素的标签属性找节点 通过关系找标签
- 05 JS-DOM之-间接获取节点(即访问关系)
- 第5天(就业班) BOM、window对象、事件、location对象、screen对象、Dom编程根据属性找节点、通过关系找节点、添加附件、联动框、操作元素的css样式、正则表达式
- DOM节点访问关系与操作示例
- DOM资料之节点之间的访问关系
- javascript之DOM编程通过html元素的标签属性找节点
- 通过关系找节点、创建节点,插入节点,设置节点属性
- 使用JSCH框架通过跳转机访问其他节点的方法
- DOM节点关系和DOM操作方法
- java通过DOM接口访问XML文档