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了。就这么交替下去。
好了,今天就写这么多吧。
版权声明:本文为博主原创文章,未经博主允许不得转载。

List.contains方法——判断列表中是否包含指定元素

1.2.4 List.contains方法——判断列表中是否包含指定元素 2013-09-05 09:01:09     我来说两句  收藏    我要投稿   ...
  • evilcry2012
  • evilcry2012
  • 2016年09月29日 08:59
  • 1569

HTML - 基础

http://blog.csdn.net/pipisorry/article/details/37764877HTML文本的一个实例我的第一个标题我的第一个段落。声明内容DOCTYPE 声明了文档类型...
  • pipisorry
  • pipisorry
  • 2014年07月14日 16:49
  • 2733

getElementsByClassName与classList兼容性问题与解决方案

function arrIndexOf(classArr,className){ for(var i = 0; i
  • wmaoshu
  • wmaoshu
  • 2016年08月05日 18:50
  • 1168

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

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=3483 一、...
  • u011055823
  • u011055823
  • 2014年04月19日 00:47
  • 1303

C# LinqXML删除一个元素的所有属性

  • 2017年10月27日 10:52
  • 38KB
  • 下载

使用javascript操纵HTML元素的自定义属性

  • 2008年01月18日 19:05
  • 1KB
  • 下载

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

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

请问如何在一个List最开始插入一个元素,其他元素一次向后移动一位?

请问如何在一个List最开始插入一个元素,其他元素一次向后移动一位? [问题点数:20分]             不显示删除回复           显示所有回复            显...
  • evilcry2012
  • evilcry2012
  • 2017年12月21日 08:38
  • 25

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

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

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

时间好快,一转眼又快接近两月没更新了,今天分享一下如何利用css让元素到另一个元素的后面,是一个很小很小的知识点,但如果一时想不起来解决办法的话,会让人无比的烦躁。 相信写过表单验证的人大多都遇到过这...
  • u010556394
  • u010556394
  • 2016年05月12日 17:10
  • 3887
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html元素是否包含另外一个元素,以及classList属性
举报原因:
原因补充:

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