javascript contains方法

最新推荐文章于 2022-02-25 08:40:07 发布
最新推荐文章于 2022-02-25 08:40:07 发布
阅读量109 收藏
点赞数
文章标签： JavaScript prototype IE 浏览器 Firefox ViewUI

IE有许多好用的方法，后来都被其他浏览器抄袭了，比如这个contains方法。如果A元素包含B元素，则返回true，否则false。唯一不支持这个方法的是IE的死对头firefox。

<!doctype html> <title>dom contains 方法 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="dom contains 方法 by 司徒正美" /> <meta name="description" content="dom contains 方法 by 司徒正美" /> <script type="text/javascript"> window.onload = function(){ var A = document.getElementById('parent'), B = document.getElementById('child'); alert(A.contains(B)); alert(B.contains(A)); } </script> <h2 style="text-align:center">contains方法</h2> <div id="parent"> <p> <strong id="child" >本例子会在火狐中会报错。</strong> </p> </div>

 

不过火狐支持compareDocumentPosition() 方法，这是W3C制定的方法，标准浏览器都支持，不过实用性性很差，因此没有什么人用，推广不开来。它的使用形式与contains差不多，但返回的不是一个布尔值，而是一个很奇怪的数值，它是通过如下方式累加计算出来的：

BitsNumberMeaning
0000000元素一致
0000011节点在不同的文档（或者一个在文档之外）
0000102节点 B 在节点 A 之前
0001004节点 A 在节点 B 之前
0010008节点 B 包含节点 A
01000016节点 A 包含节点 B
100000 32浏览器的私有使用

<!doctype html> <title>dom contains 方法 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="dom contains方法 by 司徒正美" /> <meta name="description" content="dom contains方法 by 司徒正美" /> <script type="text/javascript"> window.onload = function(){ var A = document.getElementById('parent'), B = document.getElementById('child'); alert(A.compareDocumentPosition(B));//B与A不相连，B在A的后面，B被A包含 4+16 = 20 alert(B.compareDocumentPosition(A));//A与B不相连，A在B的前面，A包含B 2+8 = 10 } </script> <h2 style="text-align:center">compareDocumentPosition方法</h2> <div id="parent"> <p> <strong id="child" >本例子请在标准浏览器中运行。</strong> </p> </div>

 

PPK给出如下解决方法。

if (window.Node && Node.prototype && !Node.prototype.contains){
   Node.prototype.contains = function (arg) {
     return !!(this.compareDocumentPosition(arg) & 16)
   }
 }

我搞出个更短的：

if(!!window.find){
  HTMLElement.prototype.contains = function(B){
    return this.compareDocumentPosition(B) - 19 > 0
  }
}

<!doctype html> <title>dom contains 方法 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="dom contains方法 by 司徒正美" /> <meta name="description" content="dom contains方法 by 司徒正美" /> <script type="text/javascript"> if(!!window.find){ HTMLElement.prototype.contains = function(B){ return this.compareDocumentPosition(B) - 19 > 0 } } window.onload = function(){ var A = document.getElementById('parent'), B = document.getElementById('child'); alert(A.contains(B)); alert(B.contains(A)); } </script> <h2 style="text-align:center">contains方法</h2> <div id="parent"> <p> <strong id="child" >contains方法</strong> </p> </div>

 

iteye_16094
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自定义的js contains方法
06-07
js中怎么自定义方法想学习的看一下吧，简单的呵呵
javascript基础学习系列五百四十一：contains()方法
最新发布
m0_68635815的博客
03-24 386
另外，使用DOM Level 3 的compareDocumentPosition()方法也可以确定节点间的关系。以上代码执行后result 的值为20（或0x14，其中0x4 表示“随后”，加上0x10“被包含”）。如果目标节点是被搜索节点的后代，contains()返回true，否则返回false。因为设置innerText 只能在容器元素中生成一个文本节点，所以为了保证一定是文本节点，就必。这个例子测试元素中是否包含元素，在格式正确的HTML 中会返回true。方法会返回表示两个节点关系的位掩码。
javascript中的contains方法
热门推荐
hsany330的专栏
04-13 2万+
在研究一个多级菜单联动的js时，发现contains方法，以前没有碰到过，不知何意，然后在@司徒正美的博客发现有详细介绍，暂且摘录在此。 　　IE有许多好用的方法，后来都被其他浏览器抄袭了，比如这个contains方法。如果A元素包含B元素，则返回true，否则false。唯一不支持这个方法的是IE的死对头firefox。不过火狐支持compareDocumentPosition() 方法，这是...
js 没有contains 自己写个方法
woaini245693140的专栏
07-17 3788
/** *string:原始字符串 *substr:子字符串 *isIgnoreCase:忽略大小写 */ function contains(string, substr, isIgnoreCase) {  if (isIgnoreCase) {   string = string.toLowerCase();   substr = substr.toLowerCase();
javascript contains方法javascript
chaoxidawang的专栏
01-08 432
评论 2243662 #1楼 2009-10-14 22:47 不死鸟之魂 虽然说ms的东西经常不支持标准(w3c/ansi/iso),但是ms的东西经常会比较好用,这就是人性化的设计方案。 其实,有时候在想,标准化组织的那些顽固派,技术太精湛了,以至于普通人都跟不上他们的脚步了,只能看着他们绝尘而去。只有ms,是那么的贴近一般的用户。 回复 引用 查看 #2楼 2009-
JavaScript中扩展Array contains方法实例
10-24
主要介绍了JavaScript中扩展Array contains方法实例,本文直接给出实现代码,需要的朋友可以参考下
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
10-29
一个很棒的 blog 文章，是 PPK 两年前写的，文章中解释了 contains() 和 compareDocumentPosition() 方法运行在他们各自的浏览器上。
JavaScript Best Practice
01-08
It contains: The Anatomy of a Modern JavaScript Application by James Kolce Clean Code with ES6 Default Parameters & Property Shorthands by Moritz Kruger JavaScript Performance Optimization Tips: An ...
contains方法(js contains方法)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
02-25 3459
hibernateReferencedfilecontainse? 关了再重新开一下。 您好，我修改模板的时候提示containsaninvalidpa? 打开360安全卫士-软件管家，搜索“c ”和“.net”然后点击一键安装，可以尝试多版本安装，如果遇到不能安装的话，系统会有对应的提示。 java conta...
js contains方法实现代码
12-10
为了兼容IE和FF我们不得不用以下方法：  dom contains 方法 by 司徒正美 contains方法 contains方法 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 不过火狐支持compareDocumentPosition() 方法，这是W3C制定的方法，标准浏览器都支持，不过实用性性很差，因此没有什么人用，推广不开来。它的使用形式与contains差不多，但返回的不是一个布尔值，而是一个很奇怪的数值，它是通过如下方式累加计算出来的： Bits Number Meaning 000000 0 元素一致 000001 1 节点在不同的文档
JS List的contains方法与Array的contains方法的使用
10-22
List的contains方法、Array的contains方法的使用
JavaScript contains
0808xyj的专栏
01-28 389
场景： 有时 需要判断 数组里是否含有该项 function contains(a, obj) { var i = a.length; while (i--) { if (a[i] === obj) { return true; } } return false; }
contains方法。
weixin_46953330的博客
03-16 2146
contains方法是js的原生方法，用于判断dom中的包含关系。 contains方法只能判断dom元素的包含，参数是Element类型。 var a=ahihs; var b=sahih; console.log(a.contains(b));//报错。 <div id="parent"> <div id="children"></div> </div> var A = document.getElementById('parent'); var
JavaScript 中的 contains()
dd20523417844009的博客
08-23 1039
遇到 contains，首先要从一条题目开始。 查找两个节点的最近的一个共同父节点，可以包括节点自身 查找父节点，那就是 parentNode，那如何知道其中一个节点的父节点是否包含另外一个节点呢？那就涉及到我的知识盲区了。问了一下对桌，口吐出一句 contains。一脸懵逼不要紧，MDN来一波。https://developer.mozilla.org/zh-CN/docs/Web...
js：contains函数
安之ccy的博客
05-17 6256
A.contains(B)：A是否是B的父级，返回布尔值； 若A=B，结果也为true <div id="test"> <div id="test1"> <div id="test2"> <div id="test3"></div> <div id="test4"></div> </div&g

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值