节点间"包含"关系的访问 - 牧童 - ITeye博客

`

mutongwu

浏览: 448536 次
性别:
来自: 广州

最近访客更多访客>>

lxswfc

xjg9083

oszerone

micai_1234

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

ubuntu的疯狂：推荐一份完整的教程：http://blog.ddlisting ...
Emberjs学习
ptz19：请问，如果把合并前的文件，不要dest 目标目录来。如： js ...
gulp下静态资源的合并、压缩、MD5后缀
zhouzq1008：楼主，还有个问题，<a href="" ...
gulp下静态资源的合并、压缩、MD5后缀
zhouzq1008：感谢楼主，用到了您的代码，但现在好像有改动否则会报错：修改 ...
gulp下静态资源的合并、压缩、MD5后缀
denverj：感谢分享~
Emberjs学习

节点间"包含"关系的访问

博客分类：

DOM

webkit Chrome IE Firefox 浏览器

阅读更多

判断2个节点间是否存在包含关系，即是否存在父子之间的关系，我们可以使用:
elA.contains(elB) 方法，如果elA是elB的祖先，则返回true.

//判断 <html>元素是否包含<body>元素
alert(document.documentElement.contains(document.body)); //true

IE，Chrome,Opera8+,Safari3+支持该属性,Firefox不支持该方法，不过，它提供了另外一个方法：
elA.compareDocumentPosition(elB) ，它返回一个"位掩码"来表示节点间的关系。返回值如下：

Mask	含义
1	无联系，elB不在elA所在的document中
2	之前，elB在elA之前（DOM tree上的位置）
4	之后，elB在elA之后（DOM tree上的位置）
8	包含，elB包含elA
16	被包含，elB被包含在elA

//例如：
//因为 <body>在<html>之后，且被包含，所以值为 4 + 16 = 20；
alert(document.documentElement.contains(document.body)); //20

因此，跨浏览器的包含判断函数如下：

function contains(refNode, otherNode){
	if (typeof refNode.contains == 'function' &&
	        (!client.engine.webkit || client.engine.webkit >= 522)){
	    return refNode.contains(otherNode);
	}
	else if (typeof refNode.compareDocumentPosition == 'function'){
	        return !!(refNode.compareDocumentPosition(otherNode) & 16);
	}
	else {
	    var node = otherNode.parentNode;
	    do {
	        if (node === refNode){
	            return true;
	        } else {
	            node = node.parentNode;
	        }
	    } while (node !== null);
	    return false;
	}
}

分享到：

innerText与innerHTML | DOM树添加script脚本和style样式

2010-07-12 11:09
浏览 1084
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

练习2：访问当当购物车页面节点: 在HTML文档中，每个元素都可以看作一个节点，包括元素节点、属性节点和文本节点。元素节点是最常见的，比如`<div>`、`<a>`等，它们定义了网页的结构和内容。当我们谈论访问某个页面节点时，通常是指通过JavaScript或...

neo4j整合springboot添加节点关系.rar: 7. **测试**：编写单元测试和集成测试，确保你的数据访问层按预期工作，节点和关系的创建、更新和删除都正确无误。标签“阿达”可能是个人或者团队的名字，也可能代表项目代号。不过，具体含义没有在给定的信息中...

树父节点递归获取树子节点: 树形结构模拟了现实世界中的层次关系，每个节点可以有零个或多个子节点，除了根节点之外，每个节点都有一个父节点。在处理这类数据时，递归是一种非常有效的方法。本篇文章将详细介绍如何在Java中使用递归来实现从父...

根据子节点查找所有父节点: 这里的`parents`属性可能是存储节点间关系的方式，具体实现会因场景和需求而异。标签中的“源码”可能暗示了该博客提供了实际的代码示例，而“工具”可能意味着这个方法可以应用于某些实用工具或框架中。由于没有...

单链表之头部插入节点.pdf: 单链表是一种基础的数据结构，常用于存储线性序列数据，其每个节点包含数据和一个指向下一个节点的指针。在单链表中，头部插入节点是常见的操作之一，尤其在面试和笔试中常被用来考察对数据结构的理解和编程能力。 ...

根据子节点的金额向上汇总所有父节点的金额: 4. **广度优先搜索（BFS）**：另一种遍历树的方法，先访问根节点，然后访问所有一级子节点，接着是所有二级子节点，以此类推。虽然在这个问题中DFS可能更为直观，但在某些特定场景下，BFS也可能是合适的解决方案。 ...

javascript节点属性和方法: 15. ownerDocument：返回包含此节点的根文档（只读） 16. parentNode：返回父节点（只读） 17. Parsed：返回此节点及其子节点是否已经被解析（只读） 18. Prefix：返回名称空间前缀（只读） 19. preserveWhiteSpace...

Topologyidentification_网络连通子图识别_网络节点_: 1. **生成邻接矩阵或邻接列表**：这是表示网络中节点间连接关系的数据结构。邻接矩阵是一个二维数组，邻接列表则是一个更节省空间的链表结构。 2. **遍历网络**：使用深度优先搜索（DFS）或广度优先搜索（BFS）算法...

数据结构中的节点: 例如，在单链表中，每个节点包含一个数据域和一个指向下一个节点的链接；而在双向链表中，每个节点还包含一个指针回溯到前一个节点。 2. **树形数据结构中的节点**：树是一种非线性的数据结构，由节点和边构成。每...

JavaScript节点知识: 学习DOM时，理解节点间的层次关系至关重要，每个节点都可以视为树结构中的一个单元，通过节点的属性和方法可以构建、查询和修改整个文档结构。因此，掌握这些基本概念和操作对于JavaScript开发者来说是必不可少的。

js节点操作: 节点之间通过父节点、子节点和兄弟节点的关系相互关联。 #### 五、总结 DOM 提供了一种强大的机制来操作和查询 HTML 或 XML 文档。通过理解 DOM 中的核心属性和方法，开发者可以更加高效地处理网页内容和结构。...

TR069交互协议-TR098节点定义规范: 接口规范部分定义了如何访问和操作这些节点，包括消息格式、通信协议以及请求和响应的处理方式。这通常涉及到使用SOAP（简单对象访问协议）和HTTP（超文本传输协议）进行数据交换，以及XML（可扩展标记语言）用于...

TreeView节点操作示例: `TreeView`控件在用户界面中表现为一个可展开/折叠的树形结构，每个节点代表一个条目，节点之间通过层级关系进行连接。本示例主要探讨`TreeView`节点的操作，包括添加、删除、修改和遍历等基本操作。 1. **添加节点...

基于cocos2d的target触摸，父子精灵节点的demo: 通过`-[CCDirector sharedDirector] touchDispatcher`，我们可以访问触摸调度器，它负责将触摸事件分发给注册了相应事件处理方法的节点。接着，我们来看`精灵（Sprite）`。在Cocos2d中，精灵是基本的可绘制图形...

ZooInspector 用于查看zookeeper的节点信息: - **节点浏览**：ZooInspector 允许用户逐级深入查看 ZooKeeper 中的所有 znode，包括它们的数据、子节点以及权限设置。 - **数据编辑**：用户可以直接通过界面编辑 znode 的数据内容。 - **权限查看**：可以查看...

Tree根据不同节点显示不同右键菜单: 在整个实现过程中，需要注意的是，为了保持良好的代码结构和可维护性，可以将节点与菜单项的映射关系以及处理逻辑封装在单独的类或方法中。此外，对于大型项目，可能还需要考虑性能优化，例如通过缓存已构建的菜单来...

利用STL中的MAP和VECTOR实现的一个多节点树: - 使用`map`来存储节点间的父子关系，键是父节点的标识，值是一个`vector`，包含了该父节点的所有子节点。 - 当添加新节点时，可以在`map`中找到其父节点，然后将新节点插入到该父节点对应的`vector`中。 - 遍历...

DevExpress TreeListLookUpEdit 判断有子节点时展开: `Form1.Designer.cs`文件包含了窗体设计时的布局信息，而`WindowsFormsApplication174.csproj`是项目文件，用于管理项目的构建设置和依赖关系。`DepartmentsDataSet.xsc`、`DepartmentsDataSet.xsd`和`.Designer.cs`...

flex树自定义节点图标: Flex Tree（灵活的树）是一种能够动态展示层级关系的组件，广泛应用于各种业务场景，例如文件系统、组织结构、菜单导航等。本主题将深入探讨如何在Flex Tree中实现自定义节点图标，以及与之相关的源码分析。 1. **...

基于节点编号的通用树状菜单设计方法: 每个节点知道其父节点的编号，子节点列表则包含其下属的所有节点编号。 3. **菜单遍历**：利用节点编号，可以很容易地遍历整个菜单树。例如，通过从根节点开始，递归地访问每个子节点，可以显示整个菜单层次。 4. ...

Global site tag (gtag.js) - Google Analytics