zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Single Number II
    Pascal's Triangle
    Remove Duplicates from Sorted Array
    Populating Next Right Pointers in Each Node
    Minimum Depth of Binary Tree
    Unique Paths
    Sort Colors
    Swap Nodes in Pairs
    Merge Two Sorted Lists
    Climbing Stairs
  • 原文地址:https://www.cnblogs.com/xiaoNYH/p/13047694.html
Copyright © 2011-2022 走看看