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

(0)

相关推荐

  • jQuery从入门到放弃

    概念 jQuery 是一个高效.精简并且功能丰富的 JavaScript 工具库.它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作.事件处理.动画和 Ajax 操作更加简 ...

  • js笔记合集

    基础篇 ------------------------------------------------- history: 用来控制网页前进和后退,根据的是网页历史纪录 history.back() ...

  • JavaScript之DOM操作

    DOM简介 是什么?    DOM,全称 Document Object Model,文档对象模型. 做什么?    dom 对象就是将标签封装成的 js 对象,而 JavaScript 中内置提供的 ...

  • jQuery 简明教程 快速上手

    jQuery 简明教程 快速上手

  • JavaScript DOM初学笔记

    JavaScript DOM初学笔记

  • JavaScript DOM操作

    操作DOM DOM中节点类型 Document文档节点:代表整个网页,不代表任何HTML标记,但它是html的父节点 element元素节点:指任何HTML标记.每一个HTML标记就称一个" ...

  • JavaScript中的DOM与BOM

    DOM 概念 文档对象模型 (Document Object Model,简称DOM) 将 web 页面与到脚本或编程语言连接起来.通常是指 JavaScript,但将 HTML.SVG 或 XML ...

  • 我开源了第一个基于Vue的组织架构树组件

    开门见山 Demo 演示地址:http://www.longstudy.club/vue-okr-tree-doc/index.html github 地址:https://github.com/qq ...

  • HTML+CSS+JS详解 | w3c笔记

    Web概述 Web三要素:浏览器,服务器,HTTP协议 HTML工作原理:HTML是部署在服务器上的文本文件,根据HTTP协议浏览器发出请求给服务器,服务器做出响应给浏览器返回一个HTML,浏览器解释 ...

  • DOM解析

    原文链接http://zhhll.icu/2020/08/16/xml/DOM/DOM%E8%A7%A3%E6%9E%90/ DOM解析 DOM解析介绍 DOM是基于属性结构的XML解析方式,会将整个 ...

  • DOM杂志:中国人群之DPP-4i联合基础/预混胰岛素治疗新证发表

    *仅供医学专业人士阅读参考 文本内容速览 ■二肽基肽酶-4抑制剂(DPP-4i)利格列汀于2021年3月2日在中国获批新适应症:联合胰岛素治疗(伴或不伴二甲双胍),在饮食和运动基础上改善2型糖尿病(T ...

  • Sub自伤自残时,dom应如何应对?

    近日,一个自称喜欢DDL(daddys little girl)的北京30+女sub加我聊天,称目的是找一个强大.有定力的大叔,展现自己的少女向.在聊天过程中,提出一些专业的心理学术语,我有些不太懂, ...

  • .NET 6 新特性 System.Text.Json 中的 Writeable DOM

    .NET 6 新特性 System.Text.Json 中的 Writeable DOM 特性 Intro 在 .NET 6 Preview 4 中,微软加入了 JSON Node 的支持,我们可以动 ...

  • Virtual DOM 简直就是挥霍

    彻底澄清"Virtual DOM 飞快"的神话. 注意:原文发表于2018-12-27,随着框架不断演进,部分内容可能已不适用. 近年来,如果你有使用过 JavaScript 框架 ...

  • DOM - 创建带文本的元素节点

      元素节点操作的方法  DOM不单单可以查找节点,也可以创建节点.复制节点.插入节点.删除节点和替换节点 我们分别来看一下: 1.write  //我们常用的document.write(); 例如 ...

  • DOM - 插入节点和三个Child方法

      插入节点  insertBefor(); 插入 格式:父节点.insertBefor( 插入节点,旧节点 ) 功能:将插入的节点插入到旧节点之前 举个小例子: 创建一个strong节点,将这个节点 ...

  • DOM - 元素节点属性及Attribute

      元素节点属性  我们继续来看元素节点属性 ownerDocument 属性  功能:返回该节点的文档对象根节点.相当于document 一般就直接用document了,这个用的很少 我们来了解证实 ...

  • DOM树简单理解学习

    为什么会提到Dom树呢,或许它对于我们很好地理解网页各个元素,标签和控件搭配,以及各种js,css等的加载会有一些帮助.笔者在工程中遇到了一些小问题,本质就是dom树的东西掌握的不扎实.所以借此来梳理 ...