更改outerHTML后传递元素

Question

我希望更改某些元素的outerHTML，然后将其传递给一个函数，这样该函数就可以对它做一些事情：

​

const bars = document.getElementsByClassName('bar');

for (let i = bars.length - 1; i >= 0; i -= 1) {
  const bar = bars[i];
  bar.outerHTML = `<h1 class="bar">${bar.innerHTML}</h1>`;
  const foo = new Foo(bar);
  // ... some code
  foo.doFoo();
}

function Foo (bar) {
  this.bar = bar;
  this.doFoo = function() {
    this.bar.innerHTML = `Foo${this.bar.innerHTML}`;
    console.log('doFoo:', this.bar.innerHTML);
    // expected on page: "Dog" --> "FooDog", "Turtle" --> "FooTurtle". This doesn't happen.
  }
}

<p class="bar">Dog</p>
<p>Cat</p>
<p class="bar">Turtle</p>

​

但是，尽管在outerHTML更改后DOM发生了变化，但变量bar仍然引用元素的“旧”(未更改)版本，这当然不再存在于DOM中。因此，不再可能更改DOM内容。

在MDN上对此行为的解释：

在文档中替换元素时，设置了outerHTML属性的变量仍将保留对原始元素的引用。

如何实现Foo对象仍然知道DOM中的正确元素，而不必再次查询DOM？

Answer 1

一种选择可能是获取对要更改其nextElementSibling的每个outerHTML元素的引用。我们叫它一个next吧。

然后，一旦更新了outerHTML，就可以使用以下方法更新对新元素的引用：

next.previousElementSibling

或者，实际上，如果您更新的元素已经是最后一个元素，并且nextElementSibling返回了undefined

next ? next.previousElementSibling : bar.parentElement.lastChild

​

const bars = document.getElementsByClassName('bar');

for (let i = bars.length - 1; i >= 0; i -= 1) {
  const bar = bars[i];
  const next = bar.nextElementSibling;
  
  bar.outerHTML = `<h1 class="bar">${bar.innerHTML}</h1>`;
  
  const foo = new Foo(next.previousElementSibling || next.parentElement.lastChild);
  
  // ...
  
  foo.doFoo();
}

function Foo (bar) {
  this.bar = bar;
  
  this.doFoo = function() {
    this.bar.innerHTML = `Foo${ this.bar.innerHTML }`;
    console.log('doFoo:', this.bar.innerHTML);
    // expected on page: "Dog" --> "FooDog", "Turtle" --> "FooTurtle". This doesn't happen.
  }
}

<p class="bar">Dog</p>
<p>Cat</p>
<p class="bar">Turtle</p>

​