Как получить родительские несколько уровней вверх по дереву DOM без jQuery или изменения Element.prototype? - PullRequest
Новая
       41

Как получить родительские несколько уровней вверх по дереву DOM без jQuery или изменения Element.prototype?

0 голосов
/ 26 августа 2018

Мне интересно, есть ли способ выбрать определенный элемент на пути вверх по 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();
      });
    }

1 Ответ

0 голосов
/ 26 августа 2018

На самом деле есть только один способ - использовать 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>
...