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

如何判断一个元素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了。就这么交替下去。
好了,今天就写这么多吧。
posted @ 2016-08-29 18:43  拿饭盒当烟灰缸  阅读(881)  评论(0编辑  收藏  举报