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了。就這麼交替下去。
好了,今天就寫這麼多吧。
相關文章
相關標籤/搜索