问HTML和CSS - DOM遍历
EN

Stack Overflow用户

提问于 2020-02-12 17:34:28

回答 3查看 84关注 0票数 1

我有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，这意味着我在'add‘调用之前遍历DOM的方法没有起作用。

javascript

html

dom

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-02-12 17:45:35

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>

票数 5

Stack Overflow用户

发布于 2020-02-12 17:49:21

你可以使用...

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

这将获得类为dropbtn的第一个元素(本例中的button元素)。

如果您试图在button元素中添加一个类。我推荐你；

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

票数 1

Stack Overflow用户

发布于 2020-02-12 17:45:44

试试这个：

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>