Цепочка parentNode вызывает

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», поэтому я вызываю эту функцию на «щелчок». Законно ли это сделать что-то вроде этого ?:

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

Моя логика в том, что первый ParentNode примет вас до «id1», то второй ParentNode примет вас до «mainDiv», то LastChild примет вас до «id2», где вы можете изменить идентификатор. Если не так, как бы вы это сделали с «чистым» 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»

No. Последний ребенок этого DIV будет пробельные текстовый узел после #id2. Однако вы можете использовать .lastElementChild.

Я хочу изменить id = "id2" на что-то другое, скажем, "newId". Если не так, как бы вы это сделали с «чистым» JavaScript?

Вы можете просто получить прямой доступ к этим DIV ID:

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`