4

是否可以链接 parentNode （或类似的）调用？

例如，假设我有这个 html：

<div id="mainDiv">

    <div class="class1" id="id1">
        <div class="button" id="button"></div>
    </div>

    <div class="class2" id="id2">
    </div>

</div>

现在假设我在“按钮”上有一个事件监听器。现在我想将 id="id2" 更改为不同的东西，比如“newId”，所以我在“click”上调用这个函数。做这样的事情合法吗？：

function changeIdOfItem(event) {
    var event.target.parentNode.parentNode.lastChild.id = "newId";
}

我的逻辑是第一个 parentNode 将带您到“id1”，第二个 parentNode 将带您到“mainDiv”，然后 lastChild 将带您到“id2”，您可以在其中更改 id。如果不是这样，您将如何使用“纯”JavaScript 最好地完成此任务？

4

2 回答 2

4

在问题的根源上，是的，您可以链接Node.parentNode调用，因为每个调用都返回另一个Node具有相同属性的调用。视觉上：

<div id="baz">
  <div id="bar">
    <p id="foo">Hello, world!</p>
  </div>
<div>


var el = document.getElementById('foo'); // p#foo

// traversing, route a:
var bar = el.parentNode;
var baz = bar.parentNode;

// traversing, route b:
var baz = el.parentNode.parentNode;
//          ^   #bar  ^
//                      ^  #baz  ^

但是，更改元素的 ID 是（可以说）糟糕的设计，相反，我会考虑添加（或删除） a className。

于 2013-07-19T18:42:43.783 回答
1

是否可以链接parentNode（或类似的）调用？

我不会使用术语“调用”（例如函数方法），它们只是属性访问。但是，是的，您确实可以嵌套/链接它们。

我的逻辑是第一个parentNode会带你到“id1”，第二个parentNode会带你到“mainDiv”，

是的，是的。

然后lastChild将带您进入“id2”

不。该 div 的最后一个子元素将是#id2. 但是，您可以使用.lastElementChild。

我想将 id="id2" 更改为不同的内容，例如“newId”。如果不是这样，您将如何使用“纯”JavaScript 最好地完成此任务？

您可以简单地通过该 id 直接访问 div：

var otherDiv = document.getElementById("id2");
if (otherDiv != null) // when it will have been changed once,
                      // the `#id2` selector won't get it any more
    otherDiv.id = "newId";`enter code here`
于 2013-07-19T19:00:18.213 回答