DOM基本认识

DOM基础

• 文档对象模型

  • element

  • attribute

  • text

• 获取元素节点

  • old

    • getElementByid

    • getElementsByClassname

    • getElementsByTagName

    • getElementsByName

  • new

    • querySelector

    • querySelectorAll

  • 表单

    • 表单元素

      • document.[formName]

    • 表单字段

      • formelement.[ormFieledName]

  • 找亲戚

    • node

    • elementNode

      • children

      • parentElement

      • previousElementSibling

      • nextElement

      • firstElementChild

      • lastElementChild

• 操作节点

  • 插入节点

    • appendChild

    • insertBefore  

  • 替换

    • replaceChild

  • 删除

    • removeChild

    • remove

  • 创建

    • createElement

  • 克隆

    • cloneNode //浅克隆 （true深克隆）

• 属性节点

  • 方案1：element[属性名]

  • 方案2：xxAttribute

    • get

    • set

    • remove

    • has

  • 自定义属性

    • 设置是在HTML中加data-

    • 获取是element.dataset自定义属性名

• 文本节点

  • innerHTML

  • innerText

• 样式操作

  • 行内样式对象  element.style

  • 计算后样式对象  computedStyle（element）

  • Object.assign

 

DOM事件

三要素：

• 事件源

• 事件类型

• 事件处理函数

 

事件的使用：

1. 注册 不用管

   • 原生事件

   • 自定义事件 const event=new Event("事件名称")

2. 绑定

   • dom0

     • html

     • document.onclick=handler

   • dom2

     • document.addEventListener("click",listener)

3. 触发

   • 原生：一般是满足一般交互条件

   • 自定义事件 element.dispatch(event)；

事件流

• 捕获

• 冒泡流

  • 现代DOM流   前两种的结合 

事件代理（没有事件流就没有事件代理）

1. 找父亲                                                            第一个静态父级

2. 父亲绑事件                                                    

3. 监听器内部通过event.target过滤

4. 写代理代码

事件对象

• target

• 键盘  which

• 鼠标 

  • offsetX

  • pageX

  • clientX

• preventDefault

• stopPropagation

表单事件

• blur

• focus

• input

• change

• submit

• reset