0

我想改变一些元素的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-Object 仍然知道 DOM 中的正确元素，而无需再次查询 DOM？

4

1 回答 1

0

一种选择可能是获取对您要更改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>

于 2018-05-10T18:34:58.017 回答