JavaScript小知识点

创建页面元素

var hidden = document.createElement(“input”);
hidden.type = “hidden”;
hidden.id = “hidden”;
hidden.name = “hidden”;
hidden.value = document.body.outerHTML;
form1.appendChild(hidden);

使用DOM元素前要先判断是否存在
- 如if (document.getElementById('xxx'))
控制按钮等元素是否可用
- document.getElementById("btn1").disabled=true;
控制按钮等元素的焦点
- document.getElementById("btn1").blur();
事件
- 阻止事件冒泡
  - 为了避免操作子元素时触发父元素的事件，需要使用(click)="$event.stopPropagation()"阻止其事件向上冒泡。
打开新窗口，并填入内容
- 注意使用document写入窗口内容后，要close，不然在某些浏览器的版本中，标签页上会始终是loading的转动状态

    html2canvas(document.getElementById(_target)).then(canvas => {
      const win = window.open();
      const doc = win.document;
      doc.write(`<img src=${canvas.toDataURL()} />`);
      doc.close();
    });

原生js操作dom添加删除替换class
- html5增加了classList
  - classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。
  - classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
  - 增加：document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
  - 去除：document.getElementById("myDIV").classList.remove("mystyle");
  - 替换：document.getElementById("myDIV").classList.replace("someClassName","otherClassName");
- 比较传统的方法
```
var classVal = document.getElementById("id").getAttribute("class");

//删除的话
classVal = classVal.replace("someClassName","");
document.getElementById("id").setAttribute("class",classVal );

//添加的话
classVal = classVal.concat(" someClassName");
document.getElementById("id").setAttribute("class",classVal );

//替换的话
classVal = classVal.replace("someClassName","otherClassName");
document.getElementById("id").setAttribute("class",classVal );
```
setTimeout()
- 异步、延迟的执行后续逻辑操作。
- 可以避免使用sleep来进行延迟操作。
- setTimeout的第一个参数是想要延迟的逻辑函数；第二个参数是延迟时长，可以指定延迟多久再进行后续逻辑操作，单位是毫秒。
  - 逻辑函数可以直接指定函数名（不需要传参的话），也可以使用匿名函数
```
setTimeout(this.logicFunction,5000);

setTimeout(function () {
  this.logicFunction();
}, 1000);

setTimeout(() => {
  this.logicFunction();
}, 1000);
```
  - 如果逻辑函数需要使用外层代码的数据作为参数，那么可以包在一个匿名函数中
```
setTimeout(function () {
  this.logicFunction(params);
}, 1000);
```
  - 如果逻辑函数中使用到了this，而且是想代表外层调用者，那么需要把this传给逻辑函数
    - 把外层的this当做参数传进去，但这样不太好，如果逻辑函数是多处复用的，那么别的地方就也要传this参数了
    - 利用bind()方法
```
setTimeout(function () {
  this.logicFunction(params);
}.bind(this), 1000);
```
  - 使用箭头函数。
    - 这是因为箭头函数中的this总是指向外层调用者
```
setTimeout(() => {
  this.logicFunction(params);
}, 1000);
```
- 异步也可以结合使用Typescript风格的Promise来实现。
```
function sleep(ms: number): Promise<number> {
  return new Promise<number>((resolve, reject) => {
    setTimeout(() => resolve(ms), ms);
  });
}
```
- Angular中也可以通过那个Zone来异步执行程序，但好像不能指定延迟多久？
```
this.zone.run(() => {
  this.snackBar.open(message, 'X', {
    duration: milliseconds
  });
});
```
setInterval()
- 每隔一个固定时间段执行一次代码
- 可以取消

this.timerInterval = setInterval(() => {
  // logic code
}, 3000);

if (this.timerInterval) {
  clearInterval(this.timerInterval);
}

字符串
- 删除字符串前后的空格
  - str = str.replace(/(^s)|(s$)/g, "");
Object
- Object.keys()
  - 可以循环对象的所有成员变量，然后可以使用.map()来转成其他变量。也可以处理枚举。