HTML & CSS - обход DOM

Question

У меня есть HTML:

<div class="dropdown">
  <button class="dropbtn">Game Design</button>
  <div class="dropdown-content">
    <a id="GameIdea" href="GameIdea.html">Link 1</a>
    <a id="GameMechanics" href="GameMechanics.html">Link 2</a>
    <a id="GameCharacters" href="GameCharacters.html">Link 3</a>
    <a id="Inspiration" href="Inspiration.html">Link 3</a>
  </div>
</div>

И JavaScript:

var anchor = document.getElementById(pathShort); //e.g. pathShort == GameIdea
var anchorParent = anchor.parentNode;
var button = anchorParent.previousSibling;
button.classList.add("active");

Проблема в том, что я не хочу элемент привязки: document.getElementById(pathShort);

Мне нужен элемент кнопки, поэтому, как вы можете видеть, я использую anchor.parentNode;, чтобы получить div, в котором находится якорь, а затем anchorParent.previousSibling;, чтобы получить элемент рядом с div, до, а не после.

Я думал, что это будет работать, но в консоли я получаю ошибку Cannot read property 'add' of undefined, поэтому переменная button должна быть эффективной null или empty, что означает мой метод Обход DOM до вызова add не работает.

Answer 1

Метод previousSibling возвращал пустой текстовый узел (не содержащий ничего, кроме пробелов), который не является элементом и не имеет свойства classList. previousSibling возвращает предыдущий узел, является ли он элементом или нет. Вы можете изменить его на previousElementSibling, чтобы получить элемент кнопки, потому что он возвращает только предыдущий элемент, игнорируя другие типы узлов.

var pathShort = "GameIdea";
var anchor = document.getElementById(pathShort);
var anchorParent = anchor.parentNode;
var button = anchorParent.previousElementSibling;
button.classList.add("active");

<div class="dropdown">
  <button class="dropbtn">Game Design</button>
  <div class="dropdown-content">
    <a id="GameIdea" href="GameIdea.html">Link 1</a>
    <a id="GameMechanics" href="GameMechanics.html">Link 2</a>
    <a id="GameCharacters" href="GameCharacters.html">Link 3</a>
    <a id="Inspiration" href="Inspiration.html">Link 3</a>
  </div>
</div>

Answer 2

Вы можете использовать ...

var button = document.querySelector(".dropbtn")

Это позволит получить первый элемент с классом dropbtn (в данном случае это элемент Button).

Если Вы пытаетесь добавить класс в элементе кнопки. Я бы порекомендовал вам;

button.setAttribute("class", "dropbtn ANY-OTHER-CLASS")

Answer 3

Попробуйте это:

const pathShort = 'GameIdea';
const anchor = document.getElementById(pathShort);
const anchorParent = anchor.parentElement;
const button = anchorParent.previousElementSibling;
button.classList.add("active");

<div class="dropdown">
  <button class="dropbtn">Game Design</button>
  <div class="dropdown-content">
    <a id="GameIdea" href="GameIdea.html">Link 1</a>
    <a id="GameMechanics" href="GameMechanics.html">Link 2</a>
    <a id="GameCharacters" href="GameCharacters.html">Link 3</a>
    <a id="Inspiration" href="Inspiration.html">Link 3</a>
  </div>
</div>

при доступе к HTML свойствам узла DOM, таким как parentNode или previousSibling, вы получите также не HTML узлы, такие как текстовые узлы, в вашем код каждой новой строки создает пустой текстовый узел, поэтому вы получаете его вместо нужного элемента.