定位节点

收藏210

阅读718

更新时间2025-07-30

定位 DOM 节点

通过节点之间的关系来访问节点树中的节点,通常被称为“定位节点”(或导航节点,navigating nodes)。

在 XML DOM 中,节点关系被定义为节点的属性:

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

下图展示了 books.xml 中节点树的一部分,并说明了节点之间的关系:

DOM 节点树

DOM - 父节点

所有节点都只有一个父节点。下面的代码导航到 的父节点:

实例

function myFunction(xml) {
var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("book")[0];
    document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
运行实例 »

点击 "运行实例" 按钮查看在线实例

例子解释:

  1. 将 books.xml 加载到 xmlDoc
  2. 获取第一个 元素
  3. 输出 "x" 的父节点的节点名

避免空文本节点

某些浏览器可能会将空白或换行视为文本节点。这会在使用以下属性时产生问题:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

为了避免导航到空的文本节点(元素节点之间的空格和换行符),我们使用一个函数来检查节点的类型:

function get_nextSibling(n) {
    var y = n.nextSibling;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}

有了上面的函数,我们就可以使用 get_nextSibling(node) 来代替 node.nextSibling 属性。

代码解释:

元素节点的类型为 1。如果同级节点不是元素节点,则移动到下一个节点,直到找到元素节点。

获取第一个子元素

下面的代码显示第一个 的第一个元素节点:

实例





运行实例 »

点击 "运行实例" 按钮查看在线实例

例子解释:

  1. 将 books.xml 加载到 xmlDoc 中
  2. 在第一个 元素节点上使用 get_firstChild 函数,来获取第一个子元素节点
  3. 输出第一个子元素节点的节点名称

更多实例

lastChild()
使用 lastChild() 方法和自定义函数来获取节点的最后一个子节点。
nextSibling()
使用 nextSibling() 方法和自定义函数来获取节点的下一个同胞节点。
previousSibling()
使用 previousSibling() 方法和自定义函数来获取节点的上一个同胞节点。

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

71万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号