dom contains 包含关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>contains</title>
</head>
<body>
    <div id="p-node">
        <div id="c-node">子节点内容</div>
    </div>
    <script>
    var pNode=document.getElementById(‘p-node‘);
    var cNode=document.getElementById(‘c-node‘);
    //判断元素节点pnode是否包含cnode元素节点
    alert(pNode.contains(cNode));
    //判断cnode元素节点是否包含 文本节点
    alert(cNode.contains(cNode.childNodes[0]));
    //判断pnode元素节点是否包含 文本节点
    alert(pNode.contains(cNode.childNodes[0]));
    //***Ie低版本只支持元素节点包含判断
    /**
     * 兼容判断包含关系
     * @param  {[type]} a 上层节点
     * @param  {[type]} b 下层节点
     * @return {[type]}   [description]
     */
    function fixContaion(a,b){
        try{

while(b=b.parentNode){
                if(b===a){
                //如果b<a(a为父,b为子)循环向上查找b的父节点直到他们是同层关系(a===b)
                    return true;
                }
                //如果b>a(如果b为父,a为子),肯定找不到,返回fales
                return false;
            }
        }catch(e){
            //对于游离于dom树外的节点,返回false.
            return false;
        }
    }
    alert(fixContaion(cNode,pNode)); //false
    
    </script>
</body>
</html>

时间: 2024-08-10 07:19:57

dom contains 包含关系的相关文章

jQuery基础修炼圣典—DOM篇

一.DOM节点的创建 1.创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数据之后然后才能确定结构的话,这种情况就需要动态的处理节点了 本文向大家介绍一下如何使用JavaScript创建div节点元素,主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容,相信本文介绍一定会让你有所收获. 先介绍下需要用到的浏览

Aspose.Words组件介绍及使用—基本介绍与DOM概述

1.基本介绍 Aspose.Words是一个商业.NET类库,可以使得应用程序处理大量的文件任务.Aspose.Words支持Doc,Docx,RTF,HTML,OpenDocument,PDF,XPS,EPUB和其他格式.使用Aspose.Words可以在不使用Microsoft.Word的情况下生成.修改.转换和打印文档.在项目中使用Aspose.Words可以有以下好处. 1.1丰富的功能集 其丰富的功能特性主要有以下4个方面: 1)格式转换.Aspose.Words具有高质量的文件格式转

DOM无关的jQuery实用函数

实用函数:定义在jQuery/$命名空间下不操作包装集的函数,可以看做定义在$实例而不是window实例上的顶级函数.一般这些实用函数要么操作除DOM元素以外的对象,要么执行一些对象无关的操作. 公共用途的jQuery标志: $.fx.off:启用或禁用特效,不会废除已经在页面使用的特效,只是禁用了动画特效. $.support:所支持特征的详细信息 $.browser:公开浏览器的细节,jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取

jQuery Dom 系列(一)

DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数据之后然后才能确定结构的话,这种情况就需要动态的处理节点了 本文向大家介绍一下如何使用JavaScript创建div节点元素,主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容,相信本文介绍一定会让你有所收获. 先介绍下需要用到的浏览器提供的一些原生的方

Javascript-- jQuery DOM篇(一)

DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 浏览器提供的一些原生的方法: 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及的一点方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild 发现几个

DOM扩展学习笔记

对DOM的两个主要扩展是Selectors API(选择符API)和HTML5,还有一个不太瞩目的Element Traversal元素遍历规范为DOM添加了一些属性,另外还有一些专有扩展. 选择符API 元素遍历 HTML5 专有扩展 选择符API 让浏览器原生支持css查询,原理就是所有实现这一功能的JavaScript库都会写一个基础的CSS解析器,然后再使用已有的DOM方法查询文档并找到匹配的节点.当把这个功能变成原生API后,解析和树查询操作可以在浏览器内部通过编译后的代码来完成,极大

JQuery基础DOM操作

DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数据之后然后才能确定结构的话,这种情况就需要动态的处理节点了 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及的一点方法: 创建元素:document.createElement 设置属性:setAttribut

jQuery08源码 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选

jQuery.fn.extend({ //$('ul').find('li').css('background','red'); //$('ul').find( $('li') ).css('background','red'); find: function( selector ) { var i, ret = [], self = this, len = self.length; if ( typeof selector !== "string" ) {//$('li') //jQ

jquery DOM 创建、插入、删除

1.创建元素节点: $("<div></div>") 2.创建文本节点,与创建元素节点类似,可以直接把文本内容一并描述 $("<div>我是文本节点</div>") 3.创建属性节点:与创建元素节点同样的方式 $("<div id='test' class='aaron'>我是文本节点</div>") $("<div class='right'><