js-Dom知识大纲

Posted 2020-12-22 xyboke

Dom

DOM基础

文档对象模型

• Element
• attribute
• text

获取元素节点

• older

  • forms
  • links
  • achors
  • images

• 表单,写表单name，尽量写

  • 表单元素

    • document.[formName]

  • 表单字段（域）

    • formElement.[formFieledName]

• old

  • getElentById
  • getElementByClassName
  • getElementByTagName
  • gretElenmentByName

• new

  • querySelect
  • querySelectAll

• 找亲戚的方法

  • node

  • ElementNode

    • children
    • parentElement
    • previousElementsibling
    • nextElementSibling
    • firstElementchild
    • lastElementChild

操作元素节点

• 替换

  • replace

• 插入

  • appendChild
  • insertBefore

• 删除

  • removeChild
  • remove

• 克隆

  • cloneNode

• 创建

  • createEelement
  • createAttrbute
  • createText

属性节点

• 方案一

  • Element[属性名]

    • className
    • htmlFor

• 方案二

  • XXattbute

    • get
    • set
    • remove
    • has

  • 属性名是什么就是什么

• 自定义属性

  • 设置

    • HTML中加data-XX

    • 获取

      • js中通过Element.dataset.自定义属性

文本节点

• innerText
• innerHTML

样式操作

• 行内样式对象

  • Element.style

    • 可读可写

• 计算后样式对象

  • computerStyle(element)

    • getcomputerStyle(element).width

      • 可读

• 样式表样式对象//不重要

  • document.styleSheets[].rules[].style;因为使用的数组获取的，所以通过数组下标获取值。

    • 可读可写

• object.assigin

DOM事件

了解事件

• 三要素

  • 事件源
  • 事件类型
  • 事件监听器（处理器）

事件的使用

• 注册

  • 原生事件-不管

  • 自定义事件

    • const event = new Event(“事件名称”);

• 绑定

  • dom()

    • html
    • document.onclick = handler

  • dom2

    • document.addEventListener("click",listener);

• 触发

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

  • 自定义事件：

    • element.dispatch(event);

事件流

• 捕获流
• 冒泡流

• 现代DOM流（捕获加冒泡）

  • 先捕获在冒泡，中间有一个目标阶段不分先后，需要看自己书写的顺序

事件代理

• 1.找父亲

  • 第一个静态父级

• 2.父亲绑定事件

• 3.监听器内部通过event.target过滤
• 4.写代理代码

事件对象

• target

• 键盘

  • which

• 鼠标

  • pageX
  • offsetX
  • clientX

• preventDefault阻止事件

  • dom0:return flase

    • element.onleypress = (e)=>flase;不能键盘点击

• stopPropagation

表单事件

• blur
• focus
• input
• change
• submit
• reset