DOM操作

获取元素

document.

1. getElementById(元素ID)
2. getElementsByName(元素name属性)
3. getElementByTagName(元素标签)
4. getElementByClassName(类名)
5. querySelector(选择器)
6. querySelectorAll(选择器)

事件

事件源.事件类型 = 事件处理程序

事件类型

1. onclick 点击
2. onmouseover/onmouseout 鼠标经过/离开
3. onfocus/onblur 获得/失去鼠标焦点
4. onmouseup/onmousedown 鼠标谈起/按下
5. onmousemove 鼠标移动

注册事件

let btn = document.querySelector('button')
// 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数
btn.onclick = function () {}
// 同一个元素同一个事件可以设置多个监听器和处理函数，按注册顺序依次执行
btn.addEventListener(click, function () {})

事件对象

eventTarget.addEventListener('click', function(evt) {})
// 这里evt就是事件对象

1. 事件对象代表事件的状态。当事件发生时，跟事件相关的一系列信息数据的集合都放到这个对象evt里面，包括很多属性和方法。如谁绑定了这个事件，鼠标位置或按下了哪个键。
2. evt是形参，不需要传递实惨过去。在注册事件时，evt对象会被系统自动创建，并一次传递给事件监听器。
3. e.target 返回触发事件的对象
4. e.preventDefault() 阻止默认事件
5. e.stopPropagation() 阻止事件冒泡

DOM事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程称为DOM事件流，分为三个阶段：捕获阶段、当前目标阶段、冒泡阶段。 实际开发中很少使用事件捕获，更关注事件冒泡

阻止事件冒泡

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。当子节点的事件被触发时，子节点外的父节点如果也挂载了相同触发条件的事件，那么也会执行。这种特性既可以得到利用，也可以在一定情况下避免。

1. 避免时，使用e.stopPropagation()阻止事件冒泡
2. 利用时，通常称作事件委托（代理）

事件委托

不需要给每个子节点单独设置事件监听器，而是将事件监听器设置在它们的父节点上。利用冒泡原理，当子节点触发事件时，绑定在父节点的事件由于冒泡得到触发。这样会提高程序的性能。

操作元素

1. element.innerText/innerHTML
2. src, href, id, alt, title
3. type, value, checked, selected, disabled

样式属性

1. element.style
2. element.className

排他思想

1. 所有元素全部清除样式
2. 给当前元素设置样式

自定义属性操作

获取属性

1. getAttribute('属性')

设置属性

1. setAttribute('属性', '值')

删除属性

1. removeAttribute('属性')

获取节点

利用节点层级关系获取元素逻辑性更强，但兼容性稍差

节点类型nodeType

1 元素节点；2 属性节点；3 文本节点

节点指针node.

1. parentNode 父节点
2. childNodes 所有子节点
3. children 子元素节点
4. first/lastElementChild
5. next/previousSibling

操作节点

创建节点

1. createElement('TagName')

插入节点

1. node.appendChild(child) 将child添加到指定父节点node的子节点列表末尾
2. node.insertBefore(child, 指定子节点) 将child插入到指定父节点node的指定子节点的前面

删除节点

1. removeChild(child)

复制节点

1. cloneNode(true/false) true深度复制标签及内容，false浅度复制标签

删除节点

1. removeChild()

流程

循环

while, do-while, for

// 已知循环条件，条件表达式为true时执行代码块
while ( 条件表达式 ) { 循环执行代码块 }
// 已知循环条件，先执行一次代码块，再判断条件表达式是否满足
do { 循环执行代码块 } while ( 条件表达式 )
// 已知循环次数
for (循环变量=初值;循环条件;递增/递减计数器) { 循环执行代码块 }

for-in

// 枚举对象的属性：但枚举是无序的且对象不应是null或undefined
for (声明变量 in 对象) { 代码段 }

跳转

return, break, continue

0. return: 终止函数体的运行，并返回一个值
1. break: 终止整个循环，不再进行判断
2. continue: 终止本次循环，接着去判断是否执行下次循环

选择

if, switch

if (条件表达式1) {
  代码块1
}else if (条件表达式2) {
  代码块2
}else {
  代码块3
}
​
// 标签为常量，字符串或数字；表达式的值固定且离散
switch (条件表达式) {
  case 标签1: 
    代码块1;
    break;
  case 标签2: 
    代码块2;
    break;
  default: 
    代码块n;
}