如何在不 jQuery 或修改 Element.prototype 的情况下使父级在 DOM 树中向上移动？

Question

我想知道是否有一种方法可以 select 一个特定的元素上升到 DOM 仅使用 vanilla JS 而不必多次使用 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() 方法，并且您需要知道要达到多少级别。

// 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)

如何在不 jQuery 或修改 Element.prototype 的情况下使父级在 DOM 树中向上移动？

How to get parent multiple levels up the DOM tree without jQuery or modifying Element.prototype?

javascript

dom

tree-traversal

dom-traversal