香草javascript檢查元素或祖先是否有類

Question

你好這段代碼告訴我，如果當前元素有類。

e.srcElement.className.indexOf('thisClass') === 0 

我該如何檢查元素或其父母是否有班級？

Answer 1

你只需要遍歷DOM。要去一個家長，請使用parentNode。

不要穿越無限向上，你需要使用一個循環：

for(var i = 0; i < nodes.length; i++) { 
    // check if each parentNode has the class 
} 

這是一個繁瑣的過程。這就是爲什麼像jQuery這樣的圖書館存在DOM遍歷/操作的唯一目的。

Answer 2

可能是其更容易找到所有具有類的元素，並檢查其中是否包含當前節點（未測試的代碼）：

function checkParentClass(e,className){ 
     var nodesWithClass =document.getElementsByClassName("className"); 

     var index =0; 
     var found = false; 

     while(index< nodesWithClass.length && !found){ 
     if (nodesWithClass[index].contains(e)) 
     { 
      found = true; 
     } 
     index++; 
     } 

     return found; 
    } 

Answer 3

使用元素的parentNode，這是可能的通過父母名單。
使用以下功能：

function elementOrAncestorHasClass(element, className) { 
    if (!element || element.length === 0) { 
    return false; 
    } 
    var parent = element; 
    do { 
    if (parent === document) { 
     break; 
    } 
    if (parent.className.indexOf(className) >= 0) { 
     return true; 
    } 
    } while (parent = parent.parentNode); 
    return false; 
} 

This fiddle展示了運行中的功能。

Answer 4

我可以提供給下一個使用方法：

function hasClass(element, className) { 
    return !(!className || !element || !element.className 
    || !element.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))); 
} 

function parentByClass(childElement, className) { 
    if (!childElement || childElement === document) { 
     return null; 
    } else if (hasClass(childElement, className)) { 
     return childElement; 
    } else { 
     return parentByClass(childElement.parentNode, className) 
    } 
} 

function hasClassInTree(element, className) { 
    return hasClass(element, className) || parentByClass(element, className) 
} 

所以在你的條件的情況下將

if (hasClassInTree(e.srcElement, 'thisClass')) { ... }