Что такое чистый JavaScript-эквивалент jQuery's .parents()?

Question

Извинения для такого рода вопрос, но я не могу найти ответ на You Might Not Need jQuery или в другом месте в Интернете, и я бы очень хотел знать:

Что такое чистый JavaScript эквивалент .parents JQuery в() метод ?

Например, было бы здорово, чтобы узнать, как сделать это в чистом JavaScript:

jQuery(element).parents('.className'); 

Answer 1

Там не одна функция/свойство в API DOM, который приравнивает к JQuery-х parents(). Существует свойство parentNode (и как Oriol points out, свойство parentElement, которое предотвратит ваш переход от до document), который является родительским узлом (или родительским элементом) элемента, к которому вы обращаетесь к нему, или null, если он не работает У меня есть. Чтобы приблизительно соответствовать parents() jQuery, вы можете на него направить (например, получить parentNode/parentElement из parentNode/parentElement и т. Д.), Чтобы найти всех родителей. Как squint notes, на неопределенно современных браузерах на каждом уровне вы можете использовать matches, чтобы проверить, соответствует ли родительский селектор (чтобы соответствовать поведению jQuery с parents(), когда вы передаете ему селектор).

jQuery использует основанный на наборах подход к манипулированию и обходу DOM, тогда как DOM API использует подход для каждого элемента/узла.

Пример:

var elm = document.getElementById("target"); 
 
var parents = getParents(elm); 
 
console.log(Array.prototype.map.call(
 
    parents, 
 
    function(e) { 
 
    return e.nodeName + (e.id ? "#" + e.id : ""); 
 
    } 
 
).join(", ")); 
 
function getParents(e) { 
 
    var result = []; 
 
    for (var p = e && e.parentElement; p; p = p.parentElement) { 
 
    result.push(p); 
 
    } 
 
    return result; 
 
}

<div id="outermost"> 
 
    <div id="middle"> 
 
    <div id="inner"> 
 
     <div id="target"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

Node.parentNode

Когда вы получите HTML с помощью какой-то метод (document.getElementById(), document.querySelector() и т.д.) он будет возвращать объект Node, то .parentNode свойство объекта является материнским объектом Node

---

Чтобы получить все родительские узлы, сродни JQuery-х .parents():

Я написал эту функцию некоторое время назад:

function parents(node) { 
    let current = node, 
     list = []; 
    while(current.parentNode != null && current.parentNode != document.documentElement) { 
    list.push(current.parentNode); 
    current = current.parentNode; 
    } 
    return list 
} 

Пожалуйста, обратите внимание, что это только слегка испытано, так возьмите его с зерном соль