js-Dom知识大纲

Posted xyboke

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js-Dom知识大纲相关的知识,希望对你有一定的参考价值。

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[属性名]

  • 方案二

    • 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

以上是关于js-Dom知识大纲的主要内容,如果未能解决你的问题,请参考以下文章

JS-DOM的知识点及应用

JS-DOM对象知识点汇总(慕课)

证券投资基金基础知识考试大纲(度)

事业单位笔试:《综合知识》大纲

Camera ISP-知识大纲

[转帖]linux基础知识大纲