DOM和Events

最新推荐文章于 2021-06-18 12:57:21 发布
最新推荐文章于 2021-06-18 12:57:21 发布
阅读量236 收藏
点赞数
分类专栏： web开发 文章标签： DOM Javascript Events
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lx_ros/article/details/89857838
版权

DOM

  • 1.HTML文档的浏览器JS接口
  • 2.DOM层级结构中根对象是window.document,有通用属性和方法的对象集被称为DOM 节点
  • 3.获取DOM节点的方法：
    • 遍历DOM层级结构
    • 使用DOM查找方法
    • 使用诸如getElementByClassName()等
  • 4.常用的节点属性和方法：
    • textContent 一个节点和其子孙中的文本内容
    • innerHTML描述元素后代的HTML格式内容。
    • outerHTML同innerHTML但包含元素标签
    • getAttribute()获取一个元素的属性
  • 5.常用的DOM修改操作
    • 改变元素的内容elemnt.innerHTML=""
    • img.src=""
    • 使元素可见或隐藏element.style.display="none"
  • 6.DOM和CSS交互
    • 更改元素类，element.className=“active”
    • 更改元素风格，element.style.color=""
    • 通过CSS操作符查询DOM，document.querySelector()
  • 7.更改节点结构
    • document.createElement()
    • 添加元素，parent.appendChild(element)或parent.insertBefore(element,sibling)
    • 删除元素node.removeChild(oldNode)
  • 8.DOM的坐标系
    • 原点位于屏幕左上角
    • 元素的位置取决于元素外边距的左上角
    • 读取位置element.offsetLeft,element.offsetTop
    • 元素的坐标是想对于element.offsetParent,这不一定等同于element.parentNode
  • 9.元素定位相关
    • 通常元素被浏览器自动定位为文档流的一部分
    • 绝对定位会使得一个元素脱离原文档流
    • 一个offsetParent元素的原点位于其border的左上角
  • 10.定位情景
    • 每个元素都有一个offsetParent
    • 一个元素定位后，其坐标如element.style.left是相对于其offsetParent的
    • 缺省的offsetParent元素是<body>.
  • 11.元素尺寸
    • 读取尺寸element.offsetWidth和element.offsetHeight
    • 更改尺寸element.style.width

Events

  • 1.DOM通过事件与JS之间交互
  • 2.事件类型
    • 鼠标相关：鼠标移动、按钮点击、进入离开元素
    • 键盘相关：上、下、按下
    • 焦点相关：获取焦点、失去焦点
    • 输入框内容的改变、表单提交
    • 时间事件
    • 其他，诸如：元素内容改变等
  • 3.事件处理：何时发生、在哪发生、需要做什么三要素
  • 4.指明一个事件的JS代码
    • 在HTML中，<div onclick=""/>
    • 通过DOM的方式，element.onclick、element.addEventListener
  • 5.事件对象
    • Event Listener 函数传递事件对象，典型的子类是MouseEvent、KeyboardEvent
    • 事件的一些属性，type如click、mouseDown等，timeStamp事件创建的时间，currentTarget监听器被注册的元素，target分发事件的元素
  • 6.鼠标和键盘事件
    • button,
    • pageX、pageY,鼠标相对于文档流左上角的位置
    • screenX、screenY，在屏幕坐标系中鼠标的位置
    • keyCode,键盘被按下
    • charCode,整数编码值被按下
    • 可拖动矩形效果的制作
  • 7.事件冒泡与事件捕获,事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题
  • 8.Node.js使用JS的事件分发引擎用于服务器端编程
  • 9.时间相关时间
    • 5s后执行某函数，token=setTimeout(myFunc,5*1000)
    • 每50ms执行一次，token=setInterval(myFunc,50)
    • 取消一个计时器，clearInterval(token)
恒友成
关注
专栏目录
DOM Event（事件）对象
tian_to_tian的博客
08-19 1290
一、什么是事件 事件：就是与浏览器交互的瞬间。 事件的作用：通过事件去驱动（触发）程序，从而实现一些特定的操作。 二、事件流 事件流：指页面中执行事件的顺序 分类： 1、事件冒泡流：点击的具体的元素向最不具体的元素，一层一层的向上冒泡 点击的元素 -> body -> html -> document -> window 2、捕获流：从最不具体的元素到最具体的元素，一层一层的向下捕获 window -> document -> html -> bo
DOM events
flyonok的专栏
07-10 1161
DOM (Document Object Model) events allow event-driven programming languages like JavaScript, JScript, ECMAScript, VBScript and Java to register various event handlers/listeners on the element node
DOM之Events(事件)属性练习
weixin_45339692的博客
02-28 142
DOM Events 模型
u011730792的专栏
11-12 349
DOM Event 模型注册事件帧听有三种方式可以为DOM元素注册事件处理函数。DOM Event 接口事件处理函数可以附加在各种对象上，包括 DOM元素，window 对象 等。当事件发生时， event 对象就会被创建并依次传递给事件监听器。详细参考 DOM 事件流程的3个阶段事件处理过程的算法
dom-events:功能性DOM事件处理器
04-22
DOM事件由OnDomEvent和DomEventDispatcher支持。 OnDomEvent扩展了具有DOM特定功能的OnEvent发送者。 它将DOM Events发送到DomEventListener 。 DomEventDispatcher可以附加到任意EventTarget 。 它为每种事件类型...
dom-events-lecture-JeffRThomas:GitHub教室创建的dom-events-lecture-JeffRThomas
03-29
**标题解析：** "dom-events-lecture-JeffRThomas" 是一个关于DOM事件讲座的项目，由GitHub用户JeffRThomas创建。它很可能是一个教程或学习资源，帮助学习者理解和掌握DOM（Document Object Model）事件的相关知识。...
dom-events-lecture
03-25
本讲座“dom-events-lecture”显然聚焦于讲解如何利用DOM事件来增强用户交互和网页动态性。DOM事件是浏览器为了响应用户或程序的行为而触发的一系列预定义的函数。了解并熟练掌握DOM事件对于提升前端开发技能至关...
DOMEvents
03-17
【DOMEvents】是一个关于Web开发中的重要主题，它涉及到如何在网页中处理用户交互和页面事件。DOM（Document Object Model）是HTML和XML文档的一种结构化表示，它允许程序员通过JavaScript或其他脚本语言来访问和...
dom-events-ic-house472:dom-events-ic-house472由GitHub Classroom创建
03-30
事件监听器IC ...问题1： 如图所示，创建一个简单的网格系统。 在主要部分中创建一个按钮，可以在页脚中的ap元素上添加“ *”。 问题2： 重用问题1中的简单网格系统，并使所有背景色变为黄色。 在每个部分中放置一个...
DOM核心知识点
weixin_45791200的博客
08-09 595
文章目录Chapter 1 浏览器环境1. window 根对象2. DOM 文档对象模型3. BOM 浏览器对象模型Chapter 2 DOM 文档对象模型1. DOM树1.0 根节点1.1 文本节点1.2 自动修正1.3 注释节点2. 节点的导航属性3. 元素节点的导航方法4. 节点的操作方法4.1 节点的创建、添加与删除方法DocumentFragment 和 结点数组4.2 节点的删除、克隆4.3 老式的方法5. 节点属性5.1 节点类的继承5.2 基本节点属性5.3 节点内容属性5.4 节点的其他
DOM的事件传递机制 —— 捕获与冒泡
Stella的博客
06-28 1470
DOM的事件传递机制 —— 捕获与冒泡 在用react写form表单的时候，看到代码里面有一句e.preventdafault()，因为不知道这个函数什么意思，就查了一下，才发现和Event事件有关系，并且也逃不掉事件的捕获与冒泡。为此，借此机会顺便了解学习了一些相关知识。 文章参考： https://blog.techbridge.cc/2017/07/15/javascript-event-...
DOM对象
MINGDE_SKILL的博客
08-09 269
W3C万维网联盟World Wide Web Consortium 万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言HTML（标准通用标记语言下的一个应用）、可扩展标记语言XML（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web信息的无障碍指南（...
html所有页面根的对象,HTML DOM全解和案例
weixin_33487490的博客
06-04 386
一、HTML DOM 节点在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。DOM 节点根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点二、HTML DOM 节点树HTML DOM 将 HTML 文档视作树结构。...
html dom中的根节点是,HTML DOM 知识点整理（一）—— Document对象
weixin_26886855的博客
06-18 1686
一、DOM对象DOM对象中比需抖接朋功要朋插整体包括：HTML 朋不功事做时次功好来多这开制的请一例农在DOM Document对是能览调不页新代些事几求事都时学下是事象HTML DOM 元素对新直能分支调二浏页器朋代说象HTML DOM 属性对新直能分支调二浏页器朋代说象HTML DOM 事件对新直能分支调二浏页器朋代说象HTML 朋不功事做时次功好来多这开制的请一例农在DOM Console ...
DOM0，DOM1，DOM2，DOM3级事件与event对象
HimBer的博客
09-06 2116
DOM事件级别 DOM 0 element.onclick = function(){} DOM 2 element.addEventListener(‘click’,function(){},false} DOM 3 element.addEventListener(‘keyup’,function(){},false}         因为DOM 1一般...
react组件化开发关于events库的解读
engineer的博客
02-23 2004
最近做了一个项目前端技术react，组件化开发；就其中的组件间通信的问题记录下来，沉淀。 组件间信息传递大致分为父子关系的组件间无非通过props传递、回调函数等，但实际的开发过程中我们会遇到层级关系很深的组件之间通信，当然这种情况我们用props一层层的传递下去当然没问题，但是肯定会造成代码冗余，组件间关系混乱等问题；或者同级组件之间的通信问题，我们可以通过全局变量，但是系统的混乱一部分原因就
DOM0，DOM2，DOM3事件处理方式区别
xyjikl
07-13 2507
引子：         文档对象模型是一种与编程语言及平台无关的API(Application programming Interface)，借助于它，程序能够动态地访问和修改文档内容、结构或显示样式。W3C协会早在1988年就开始了DOM标准的制定，W3C DOM标准可以分为DOM1,DOM2,DOM3三个版本。 DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM
DOM 事件深入浅出（一）
github_38314237的博客
10-06 203
在项目开发时，我们时常需要考虑用户在使用产品时产生的各种各样的交互事件，比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有...
DOM（三）event事件
.
08-07 1918
交代一个例子<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件</title> <style type="text/css"> div {padding:40px;} #div1{background: red
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值