JavaScrip: DOM: 最も近い先祖の要素を取得する Element.closest()

ID名やCLASS名などで要素を検索し最も近い先祖を取得する DOM JAVASCRIPT

ieを捨てるなら Element.closest() でオッケー

Element.closest()

Element.closest() - Web API | MDN
closest() は Element インターフェイスのメソッドは、引数で指定されたセレクターに一致する現在の要素の直近の祖先 (または現在の要素自身) を返します。そのような要素が存在しない場合は null を返します。

IE11以下　条件に合う最も近い祖先を取得

var getClosestElement = function(elem, selector) {
    var matchElems = document.querySelectorAll(selector);
    if(!matchElems.length){return null;}
    console.log("bingo");
    var ancestorNode = elem.parentNode;
    while (ancestorNode) {
        for (var i = 0; i < matchElems.length; i++) {
            if (matchElems[i] === ancestorNode) return ancestorNode;
        }
        ancestorNode = ancestorNode.parentNode;
    }
    return null;
};

var start_point_elm = document.getElementsById("children2");
var ancestorElement = getClosestElement(start_point_elm, '.outer-container');

IE１１以下　条件に合う最も近い兄姉を取得

最も近い先祖要素の取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website

var getClosestElement = function(elem, selector) {
    var matchElems = document.querySelectorAll(selector);
 
    var prevElem = elem.previousElementSibling,
        i = 0, len = matchElems.length;
 
    if (typeof selector === 'undefined' || selector === '') return prevElem;
 
    while (prevElem) {
        for (i = 0; i < len; i++) {
            if (matchElems[i] === prevElem) return prevElem;
        }
        prevElem = prevElem.previousElementSibling;
    }
 
    return null;
};

参考リンク

JavaScript：クリックした要素の親から先祖までノードの情報を全て取得する | ハックノート