getElementById选择器

唯一的：
image.png

getElementsByClassName选择器

可以获取多个：
image.png

querySelector和querySelectorAll

querySelectorAll

获取到的是所有元素组成的伪数组
image.png

querySelector

只能获取到第一个
image.png

获取body和html

image.png

绑定事件

事件三要素

  1. 事件源(谁)
  2. 事件类型(什么事件)

  3. 事件处理程序(做啥)

    addEventListener

    点击：click
    用于绑定事件，两个参数，第一个事件类型，第二个事件的处理函数
    image.png

    练习：

    image.png

    匿名自执行函数

    image.png

    案例：

    image.png

    常见的鼠标事件

    image.png

    innerHTML和innetText textContent

  4. innetText从起始位置到终止位置的内容，但它去除HTML标签，同时空格和换行也会去掉

  5. innerHTML起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行
  6. textContent起始位置到终止位置的全部内容，但它去除HTML标签，同时保留空格和换行

案例：
image.png

改变图片显示效果

image.png

操作表单元素的属性

image.png

style样式

将所有的连字符-改变驼峰命名
image.png
image.png

focus（聚焦）blur（失焦）

案例：
image.png

排他思想

image.png
image.png
this代表你当前绑定的那一个，就是你点击的那个元素

案例

image.png
image.png

change（改变）事件：

单选或多选用change事件

自定义属性值

image.png

移除

image.png

案例

image.png

自定义属性的另外一种获取方式

image.png

节点操作

通过元素关系获取节点

获取父级节点parentNode、parentElement

image.png

获取子元素节点children、childNodes

children只包含标签💝
childNodes要包含换行、文字等内容

获取第一个儿子firstChild、firstElementChild

firstChild要包含换行、文字等内容
firstElementChild只包含标签💝

获取最后一个儿子lastChild、lastElementChild

lastChild要包含换行、文字等内容
lastElementChild只包含标签💝

案例

image.png

获取兄弟节点

获取上一个兄弟previousSibling、previousElementSibling

previousSibling要包含换行、文字等内容
previousElementSibling只包含标签·💝

获取下一个兄弟nextSibling、nextElementSibling

nextSibling要包含换行、文字等内容
nextElementSibling只包含标签💝

创建和插入节点

创建节点document.createElement

image.png

追加子节点appendChild、append,只能添加在最后面

image.png

插入到指定位置insetrtBefore

image.png

高阶函数

image.png

cloneNode克隆

image.png

removeChild删除节点

image.png
image.png

移除事件

image.png

DOM事件流

  1. 事件捕获
  2. 目标阶段
  3. 冒泡阶段

image.png

mouseenter不存在冒泡 mouseover有冒泡

stopPropagation阻止冒泡

image.png

preventDefault阻止默认行为

image.png

this和target和currentTarget

image.png

事件委托

把原本绑定为儿子得事件，绑定到父元素身上，然后i利用事件冒泡来触发这个事件

  1. 性能更好
  2. 对于新增得子元素依然有效

image.png

鼠标事件

鼠标跟随

image.png

键盘事件

image.png
image.png

keydown键盘按下，keyup鼠标弹起

聚焦案例

image.png

模拟快递查询案例

image.png

blur失去焦点时，focus聚焦时