html元素是否包含另外一个元素,以及classList属性

原创 2016年08月29日 18:43:07
如何判断一个元素A包含了元素B呢?如果不用contains方法的话,如何做呢?
腾讯面试的时候也出了这道题啊,当时没看dom的知识,所以一抹黑哦。。。
那就判断B是否为A的child喽,那也就是A是B的parent或者parent.parent或者parentNode.parentNode.parentNode....
所以就这样向上遍历一下B的父亲节点,看A是不是在这个父节点链上。代码如下:
function isAContainsB(B,A){
    var node = B.parnetNode;
    do{
        if(node==A){
            return true;
        }else{
            node=node.parentNode;
        }
    }while(node!==null);
    return false;
}
ClassList属性又是啥?
原生的ClassName属性是个字符串,如果你要给一个元素设置一个class呢,就要这么写:
    element.className="class1";
那如果想再给这个元素增加一个类,就要这么写了:
    element.className="class1 class2";
再对这个类进行一些操作,比如判断是不是包含class1(className.indexOf("class1")>=0),等等,
都要操作这个className的字符串,很麻烦哦。
那DOM就发展有了classList这个属性,这个属性是个集合类型DOMTokenList的实例,
有length属性也可以通过item()访问(这句话是摘抄。)最有用的是它提供了几个方法:
add,contains,remove,toggle
想必大家都猜到怎么用了吧,下面举例来说明下:
1.一个元素有个类class1,我又想给它加个class2
    element.classList.add("class2");
当这个元素已经有了class2,再add的话,会忽略,就不会再添加了。

2.判断是否已经有了某个类
    element.contains("class2");
判断是否有了class2这个类了,如果有就返回true,反之返回false。

3.移除一个已有的类
    element.remove("class2");
4.toggle,交替增加或移除某个类, 比如我有个element,如果它没有class2这个类,那么我toggle一下:
    element.toggle("class2");
那么这个element.contains("class2")就返回true了,那么这时我再:
    element.toggle("class2");
那么这个element.contains("class2")就返回false了。就这么交替下去。
好了,今天就写这么多吧。
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

office2016永久免费激活码(office2016密钥)

Microsoft Toolkit(Win10激活工具/Office2016激活工具) V2.6B4 绿色版人气:42008 下载 Microsoft Toolkit(Win10激活工具/...

HTML5 DOM元素类名相关操作API classList简介

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=3483 一、...

020遍历打印一个元素的所有属性

较特殊的for循环,在for循环的条件括号里加入一个“in”,表示通过循环得到DOM属性的key。由于例中代码key是动态变化的,所以使用了中括号”[]"来动态获取属性的值。 遍...

CSS篇——如何利用css让元素到另一个元素的后面

时间好快,一转眼又快接近两月没更新了,今天分享一下如何利用css让元素到另一个元素的后面,是一个很小很小的知识点,但如果一时想不起来解决办法的话,会让人无比的烦躁。 相信写过表单验证的人大多都遇到过这...

面试题:给定一个有序的数组,如果往该数组中存储一个元素,并保证这个数组还是有序的,那么元素的存储的角标位如何获取。

import java.util.*; /* 面试题: 给定一个有序的数组,如果往该数组中存储一个元素,并保证这个数组还是有序的, 那么个元素的存储的角标为如何获取。 {13,15,19,28,33,...

鼠标悬停,出现另一个元素,点击这个元素的解决方法

历经千辛万苦,终于解决了 UI TA(test automation) 中的这个难题,必须记录一下。 前提是:需要测试的这个页面是用 google 的 angularjs 写的。许多页面效果是用...
  • wanglha
  • wanglha
  • 2014年11月03日 13:42
  • 498

动态数组,数组初始化,数组内存释放,向数组中添加一个元素,向数组中添加多个元素,数组打印,顺序查找,二分查找,查找数组并返回地址,冒泡排序,改变数组中某个元素的值,删除一个数值,删除所有,查找含有

1定义接口: Num.h #ifndef _NUM_H_ #define _NUM_H_   #include #include   /**********************...

求k个数组包含每个数组至少一个元素的最小范围(待字闺中,备忘)

有k个有序的数组,请找到一个最小的数字范围。使得这k个有序数组中,每个数组都至少有一个数字在该范围中。 例如: 1: 4, 10, 15, 24, 26 2: 0, 9, 12, 20 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html元素是否包含另外一个元素,以及classList属性
举报原因:
原因补充:

(最多只允许输入30个字)