追加DOM元素后如何更新HTML元素？类实例修改未同步问题

当然可以修改已添加到DOM中的元素，JavaScript对象与DOM元素之间存在引用关系，但你的代码逻辑存在问题，导致DOM没有同步更新。

问题原因 #

你的render方法每次执行都会创建一个全新的<p>元素，并将这个新元素赋值给this.node。但你添加到页面body中的是第一次render生成的旧元素，新元素从未被插入到DOM中，所以页面上看不到变化。

解决方案 #

下面提供两种无需重新添加元素到DOM，就能通过类实例更新对应DOM元素的实现方式：

方案1：复用已有DOM元素的render方法

修改render方法，优先复用已存在的DOM元素，只有在首次调用时才创建新元素：

class TextNode {
  constructor(text) {
    this.text = text;
  }
  render() {
    // 若已存在DOM元素，直接更新内容
    if (this.node) {
      this.node.innerText = this.text;
      return;
    }
    // 首次调用时创建新元素
    const node = document.createElement('p');
    node.innerText = this.text;
    this.node = node;
  }
}

const node = new TextNode('Hello')
node.render();
document.querySelector('body').append(node.node);

node.text = 'Hello there!';
node.render(); // 此时会直接更新DOM中的已有元素

方案2：使用setter自动同步DOM

给text属性添加setter，当修改属性值时自动同步更新DOM元素，无需手动调用render：

class TextNode {
  constructor(text) {
    this._text = text;
    // 初始化时创建DOM元素并赋值
    this.node = document.createElement('p');
    this.node.innerText = text;
  }

  get text() {
    return this._text;
  }

  set text(newText) {
    this._text = newText;
    // 同步更新DOM元素内容
    if (this.node) {
      this.node.innerText = newText;
    }
  }
}

const node = new TextNode('Hello')
document.querySelector('body').append(node.node);

node.text = 'Hello there!'; // 修改属性后自动更新DOM

关键原理 #

JavaScript对象与DOM元素通过引用关联，只要你持有对DOM元素的引用（比如示例中的this.node），直接修改该引用的属性（如innerText、style）会立刻反映到页面上。你的问题本质是每次render都创建了新元素，切断了与DOM中已有元素的引用联系。

内容的提问来源于stack exchange，提问作者Remco Kersten