如何在不使用 jQuery 或修改 Element.prototype 的情况下让父级多级 DOM 树？

Question

我想知道是否有一种方法可以仅使用 vanilla JS 在 DOM 上选择特定元素，而不必多次使用parentNode 。 我知道你可以用 jQuery 和修改Element.prototype来做到这一点，但还有其他漂亮的方法来写这个。

  const deleteButtons = document.querySelectorAll('.delete-button');

  for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', (e) => {
      e.preventDefault();

      //This is the crazy amount of parentNode usage
      bookDatabase.child(e.target.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.getAttribute("id")).remove();
      });
    }

Answer 1

实际上只有另一种方法，即使用 DOM API element.closest() ，但它确实要求您提供一个选择器，该选择器可以唯一标识您需要的特定元素（或与该选择器匹配的第一个元素）后代的观点）。 .parent()将需要多次使用.parent()方法，并且您需要知道您想要提升多少级。

 // Starting from the inner most level var start = document.getElementById("source"); // Let's say you wanted to reference the first ancestor // that has the "something3" class start.closest(".something3").classList.add("red"); // Or, the second closest var firstMatch = start.closest(".something2"); firstMatch.classList.add("yellow"); // Or, even higher firstMatch.closest(".something1").classList.add("aqua"); // And, of course, you can skip levels start.closest(".something1").classList.add("dropCap");

 #source {background-color:orange; } .red { background-color:red; } .yellow { background-color:yellow; font-size:1rem; } .aqua { background-color:aqua; } .dropCap { font-size:3em; }

 <div class="something1">Level 1 <div class="something2">Level 2 <div class="something3">Level 3 <div id="source">Level 4</div> </div> </div> </div>

Answer 2

我遇到了同样的问题......这对我帮助很大

您可以通过使用遍历到您想要的特定父元素

element.closest('.parentClass') - 或 - element.closest('#parentId')

其中'element'是原始元素（在您的情况下为'e.target' ），并且

'parentClass' - 或 - 'parentID'是您想要的父元素的标识符。

Answer 3

这是获取所需层次级别的父节点的最简单方法：

function getParentNode(element, level=1) { // 1 - default value (if no 'level' parameter is passed to the function)
    while(level-- > 0) {
        element = element.parentNode;
        if(!element) {
            return null; // to avoid a possible "TypeError: Cannot read property 'parentNode' of null" if the requested level is higher than document
        }
    }
    return element;
}

使用此功能，而不是：

e.target.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode

你可以使用这个：

getParentNode(e.target, 6)