`
mutongwu
  • 浏览: 452382 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

节点间关系访问

    博客分类:
  • DOM
阅读更多
访问子节点:
1. someNode.childNodes:
返回一个NodeList对象,提供item(i)方法访问里面的元素。由于这也是一个类数组的对象,因此可以通过'[i]'获取里面的元素,通过length属性获取元素个数。

2. someNode.hasChildNodes():
判断是否存在子节点,true如果节点下有子节点。

3.第一个和最后一个节点也可以直接通过someNode.firstChild、someNode.lastChild来获取。

4.例子:
    var nd = someNode.childNodes[i];
    var nd = someNode.childNodes[childNodes.length - 1];

访问父节点:
通过 someNode.parentNode 访问

访问兄弟节点:
通过previousSibling(第一个节点的previousSibling为 null) 和 nextSibling(最后一个节点的nextSibling为 null).
        
        if (someNode.nextSibling === null){
		alert('最后一个子节点.');
	} else if (someNode.previousSibling === null){
		alert('第一个子节点.');
	}


显然,如果只有一个子节点,则previousSibling,nextSibling均为null.

ownerDocument属性
每个节点都有一个属性ownerDocument,指向document本身。
alert(document.getElementById('div1').ownerDocuement === document)//true


说明:
    1.子节点,父节点,兄弟节点之间的关系属性都是只读的,需要改变它们之间的关系,我们需要另外调用appendChild,replaceChild等方法。
    2.并非所有的节点都具有这几个关系,如:文本节点不能再拥有子节点。
    3.关于childNodes属性的访问时候的注意,假如有以下HTML代码:
<ul id='myList'>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>

<ul id='myList2'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul>
 

以上代码中,看似myList 与myList2都拥有一样的子节点,其实,在不同浏览器中,childNodes是不一样的。
在IE中,myList 与myList2,childeNodes的长度都为3,即三个 li 子节点。
而在其它浏览器中,myList拥有7个子节点——包括3个li节点以及它们之间的4个空白文本节点。
所以,如果要通过childNodes对子节点进行处理,那么处理之前的节点判断是必要的:
for (var i=0, len=element.childNodes.length; i < len; i++){
	//确定是element node
	if (element.childNodes[i].nodeType == 1){
	//do processing
	}
}  


分享到:
评论

相关推荐

    节点访问关系

    JavaScript节点访问关系

    练习2:访问当当购物车页面节点

    当我们谈论访问某个页面节点时,通常是指通过JavaScript或DOM(Document Object Model)来操作这些元素。 DOM是浏览器解析HTML或XML文档后创建的一种树型结构,它将整个页面结构化为一个可编程的对象模型。我们可以...

    neo4j整合springboot添加节点关系.rar

    标题“neo4j整合springboot添加节点关系.rar”表明了我们关注的核心在于构建一个系统,该系统不仅能够启动和运行Neo4j,还能通过Spring Boot应用程序创建和管理图数据中的节点关系。 首先,我们需要了解Neo4j。...

    树父节点递归获取树子节点

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

    根据子节点查找所有父节点

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

    分布式访问控制模型中节点级联失效研究.pdf

    它定义了用户身份与权限之间的关系,并根据预定义的策略对用户的数据资源访问进行控制。在计算机网络的广泛普及和多种访问模式涌现的背景下,网络安全面临了新的挑战,尤其是互联网用户数量和数据量的剧增,使得传统...

    根据子节点的金额向上汇总所有父节点的金额

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

    Topologyidentification_网络连通子图识别_网络节点_

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

    单链表之头部插入节点.pdf

    这个运算符用于通过指针访问结构体中的成员,但并不表示实际的指向关系。在链表中,节点间的连接是通过指针变量的赋值来实现的,即把一个节点的`pNext`赋值为另一个节点的地址。因此,`-&gt;`运算符只是编程语言中的...

    javascript节点属性和方法

    JavaScript 节点属性和方法 JavaScript 节点的属性和方法是 DOM(文档对象模型)中最基础也是...要掌握 DOM,需要了解节点的属性和方法,以及节点之间的关系。只有这样,才能更好地控制和操作 HTML 文档的结构和内容。

    数据结构中的节点

    3. **图数据结构中的节点**:在图中,节点(也称为顶点)通过边相连,表示对象之间的关系。每个节点可以有任意数量的相邻节点,可以是无向图(边没有方向)或有向图(边有方向)。 4. **操作节点**:在数据结构中,...

    JavaScript节点知识

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

    延时容忍网络中基于热点区域间节点流数据传输方案

    2. **社会网络路由**:利用节点间的社会关系来指导数据包的传输,提高传输效率。 3. **传染路由**:源节点向其通信范围内的所有邻居复制并发送数据包,依赖节点的随机相遇。 4. **散发等待路由**:对传染路由的改进...

    CentOS7.1 PaceMaker3节点集群部署实例

    它定义了服务的依赖关系和恢复策略,确保在节点故障时,服务仍能正常运行。 2. **Corosync**: Corosync 是一个集群消息传递框架,提供了一种快速、可靠的通信机制,确保集群中的节点间信息同步。它是 Pacemaker 的...

    Tree根据不同节点显示不同右键菜单

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

    js节点操作

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

    TreeView节点操作示例

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

    基于cocos2d的target触摸,父子精灵节点的demo

    在Cocos2d游戏开发框架中,`target`和`触摸`是两个核心概念,而精灵(Sprite)和父子节点关系则是构建游戏场景的基础。在这个基于Cocos2d的"target触摸,父子精灵节点的demo"中,我们将深入探讨这些知识点。 首先,...

    ZooInspector 用于查看zookeeper的节点信息

    - **权限查看**:可以查看每个 znode 的 ACL(访问控制列表),了解哪些用户或角色具有读、写、创建、删除等权限。 - **会话信息**:显示当前连接的会话信息,包括会话ID和会话超时时间。 - **快照功能**:可以...

    DevExpress TreeListLookUpEdit 判断有子节点时展开

    首先,我们需要访问TreeListLookUpEdit的事件系统,特别是`CellClick`和`Node双击`(NodeDoubleClick)事件。在`CellClick`事件中,我们可以检查被点击的节点是否具有子节点。如果节点有子节点且用户单击了它,我们...

Global site tag (gtag.js) - Google Analytics