时间戳

首页 > 解决方案 > 带有 DOM 元素的基本方法链

javascript - 带有 DOM 元素的基本方法链

问题描述

我一直在尝试学习如何在 vanilla JS 中链接方法。遵循简单的教程，我可以add()等等subtract()。但是，独自一人并尝试链接 DOM 元素，我正在苦苦挣扎。

在以下代码段中没有输出任何内容，我认为这是由于this.textContentline. 我如何得到这个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>

标签： javascript

解决方案

正如评论 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>

推荐阅读