javascript - 与 DOM 元素链接的基本方法

Question

我一直在尝试学习如何在 vanilla JS 中链接方法。按照简单的教程，我可以 add()、subtract() 等。但是，单独尝试链接 DOM 元素时，我很挣扎。

在下面的代码片段中，没有任何输出，我认为这是由于 this.textContent 行造成的。我如何获得 getId 位？

'use strict'
let chain = {
    getId(id) {
        document.getElementById(id);
        return this;
    },
    text(content) {
        this.textContent = content;
        return this;
    }
}
window.addEventListener('load', function() {
    let dummy = chain.getId('dummy').text('works');
})

<div id='dummy'></div>

Answer 1

如 a comment 中所述this 不是选定的元素。通过在代码中进行最少的重构，您可以向对象添加一个新的 element 属性，在 getId 中设置它并在 text 中使用该元素>。例如:

'use strict'
let chain = {
  element: null,
  getId(id) {
    this.element = document.getElementById(id);
    return this
  },
  text(content) {
    this.element.textContent = content;
    return this;
  }
}
window.addEventListener('load', function() {
  let dummy = chain.getId('dummy').text('works');
})

<div id='dummy'></div>