网站首页 > 教程分享 正文
可通过使用节点间的关系对节点进行导航。
导航 DOM 节点
通过节点间的关系访问节点树中的节点,通常称为导航节点("navigating nodes")。
在 XML DOM 中,节点的关系被定义为节点的属性:
parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling
下面的图像展示了 books.xml 中节点树的一个部分,并说明了节点之间的关系:
DOM - 父节点
所有的节点都仅有一个父节点。下面的代码导航到 <book> 的父节点:
实例
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0];document.write(x.parentNode.nodeName);
尝试一下 ?
实例解释:
使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
获取第一个 <book> 元素
输出 "x" 的父节点的节点名称
避免空的文本节点
Firefox 以及其他一些浏览器,把空的空白或换行当作文本节点,而 Internet Explorer 不会这么做。
这会在使用以下属性:firstChild、lastChild、nextSibling、previousSibling 时产生一个问题。
为了避免导航到空的文本节点(元素节点之间的空格和换行符),我们使用一个函数来检查节点类型:
function get_nextSibling(n){ y=n.nextSibling; while (y.nodeType!=1) { y=y.nextSibling; } return y;}
上面的函数允许您使用 get_nextSibling(node)来代替 node.nextSibling 属性。
代码解释:
元素节点的类型是 1。如果同级节点不是元素节点,就移动到下一个节点,直到找到元素节点为止。通过这个办法,在 Internet Explorer 和 Firefox 中,都可以得到相同的结果。
获取第一个子元素
下面的代码显示第一个 <book> 的第一个元素:
实例
<html><head><scriptsrc="loadxmldoc.js"></script><script>
// 检测第一个节点是否为元素节点functionget_firstChild(n){y=n.firstChild; while(y.nodeType!=1){y=y.nextSibling; }returny;}</script></head> <body><script>xmlDoc=loadXMLDoc("books.xml"); x=get_firstChild(xmlDoc.getElementsByTagName("book")[0]);document.write(x.nodeName);
</script></body></html>
输出:
title
尝试一下 ?
实例解释:
使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
在第一个 <book> 元素上使用 get_firstChild 函数,来获取第一个子节点(属于元素节点)
输出第一个子节点(属于元素节点)的节点名称
猜你喜欢
- 2024-10-12 javaScript-第三章(js第三章上机)
- 2024-10-12 前端面试题《BOM与DOM》(bom 前端)
- 2024-10-12 JavaScript之DOM(javascript下载安装电脑版)
- 2024-10-12 javaScript入门知识点(javascript初学者)
- 2024-10-12 某课Node.js工程师养成计划F享(教师师德修养专项培训实践研磨)
- 2024-10-12 「前端架构师30天快速掌握js22」之DOM对象
- 2024-10-12 2024阿里前端二面社招(阿里前端校招)
- 2024-10-12 DOM入门 - 节点结构(dom节点有哪些)
- 2024-10-12 HTML DOM 元素对象(html中的对象)
- 2024-10-12 详解模板注入漏洞(下)(模版注入漏洞)
你 发表评论:
欢迎- 最近发表
-
- 免费10年VPS-serv00服务器,注册与自动化保号
- Consul微服务注册中心使用指南
- 谷歌云代理商:注册谷歌云服务器需要准备哪些资料?
- steam账号注册不了/注册失败?好用的解决方法看这里
- 微服务架构中的服务注册与发现有哪些?Zookeeper、Eu
- # 从浅入深 学习 SpringCloud 微服务架构(三)注册中心 Eureka(1)
- 一文深入理解AP架构Nacos注册原理
- 群晖NAS本地搭建NVIDIA v-GPU License Server 授权许可服务器的教程
- IDEA 2024解决We could not validate your license XX
- 保障数据完整性:深入解析Oracle数据库的主键和外键约束
- 标签列表
-
- css导航条 (66)
- sqlinsert (63)
- js提交表单 (60)
- param (62)
- parentelement (65)
- jquery分享 (62)
- check约束 (64)
- curl_init (68)
- sql if语句 (69)
- import (66)
- chmod文件夹 (71)
- clearinterval (71)
- pythonrange (62)
- 数组长度 (61)
- javafx (59)
- 全局消息钩子 (64)
- sort排序 (62)
- jdbc (69)
- php网页源码 (59)
- assert h (69)
- httpclientjar (60)
- postgresql conf (59)
- winform开发 (59)
- mysql数字类型 (71)
- drawimage (61)
本文暂时没有评论,来添加一个吧(●'◡'●)