Question

是否可以链接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最好地完成这个？

Answer 1

问题的根源是，您可以链接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的设计很糟糕，相反，我会考虑添加（或删除）className。

Answer 2

是否可以链接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`

链接parentNode调用

2 个答案: