前端变态知识点集合

下面这几种方法添加事件监听有什么区别？

1. el.addEventListener('click', handleClick);
2. el.setAttribute('onclick', 'handleClick()');
3. <div onclick="handleClick()"></div>

https://wangdoc.com/javascript/events/model.html

请问 document.body.childNodes 与 document.querySelectorAll() 得到的 NodeList，有哪些区别？

https://wangdoc.com/javascript/dom/nodelist.html

请问如何让数字可扩展？比如：const a = [...5] 就可以创建一个 [1, 2, 3, 4, 5] 这样的数组？

Number.prototype[Symbol.iterator] = function*() {
 let i = 0;
 let num = this.valueOf();
 while (i < num) {
   yield i++;
 }
} 

给出下面这样的一个类：

class AnObject {
  constructor(number) {
    this.number = number;
  }
}

如何让它的实例相加时，得到的值为 number 相加的值？

class AnObject {
  constructor(number) {
    this.number = number;
  }

  // 改变下面这样的就可以了
   valueOf() {
    return this.number;
  }
}

假设我们现在有一个 HTML 元素：

<div class="field">
    <label>用户名</label>
    <input />
</div>

通过 CSS 样式可以为 label 添加 ：：

.field label:after {
  content: '：';
}

但是这样并不能实现我真正的需求，我的需求是，当系统使用英文时，使用 : ，使用中文时，使用 ：，那么，请问：我们该如何动态的改变 label:after 中的 content 的值？假设不允许通过 JavaScript 动态更新 CSS 样式，也不允许动态改变元素的类与 ID，那又该如何实现？