
DOM编程
文章平均质量分 86
记录一些DOM编程知识点
十八岁讨厌编程
没事就喜欢画思维导图
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
DOM事件高级④(常用的鼠标、键盘事件)
文章目录常见的鼠标事件鼠标事件鼠标事件对象常用的键盘事件键盘事件键盘事件对象附:ASCII码表 常见的鼠标事件 鼠标事件 1.禁止鼠标右键菜单 contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单。 document.addEventListener('contextmenu', function(e) { e.preventDefault(); }) 2.禁止鼠标选中(selectstart 开始选中) document.addEventListener('原创 2022-03-28 20:23:21 · 670 阅读 · 0 评论 -
DOM事件高级③(阻止事件冒泡、事件委托)
文章目录阻止事件冒泡阻止事件冒泡的两种方式阻止事件冒泡的兼容性解决方案事件委托(代理、委派) 阻止事件冒泡 阻止事件冒泡的两种方式 事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点。 事件冒泡本身的特性,会带来的坏处,也会带来的好处,需要我们灵活掌握。 阻止事件冒泡 标准写法:利用事件对象里面的 stopPropagation()方法 e.stopPropagation() 非标准写法:IE 6-8 利用事件对象 cancelBubble 属性 e.cancelBubble =原创 2022-03-28 19:33:33 · 401 阅读 · 0 评论 -
DOM事件高级②(事件流、事件对象)
文章目录事件流事件对象什么是事件对象事件对象的使用语法事件对象的兼容性方案事件对象的常见属性和方法 事件流 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流。 比如我们给一个div 注册了点击事件: DOM 事件流分为3个阶段: 捕获阶段 当前目标阶段 冒泡阶段 事件冒泡: IE 最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点的过程 事件捕获: 网景最早提出,由 DOM 最顶层节点开始,然后逐级向下传原创 2022-03-28 18:55:39 · 352 阅读 · 0 评论 -
DOM事件高级①(注册、删除事件)
文章目录注册事件(绑定事件)注册事件概述addEventListener 事件监听方式attachEvent 事件监听方式注册事件兼容性解决方案删除事件(解绑事件)删除事件的方式删除事件兼容性解决方案 注册事件(绑定事件) 注册事件概述 给元素添加事件,称为注册事件或者绑定事件。 注册事件有两种方式: 传统方式 方法监听注册方式 ①传统注册方式 利用 on 开头的事件 onclick <button οnclick=“alert(‘hi~’)”></button> btn.on原创 2022-03-28 17:03:44 · 988 阅读 · 0 评论 -
DOM编程④ -- 操作节点
文章目录什么是节点操作节点概述节点层级 什么是节点操作 获取元素通常使用两种方式: ①利用 DOM 提供的方法获取元素 document.getElementById() document.getElementsByTagName() document.querySelector 等 逻辑性不强、繁琐 ②利用节点层级关系获取元素 利用父子兄节点关系获取元素 逻辑性强, 但是兼容性稍差 这两种方式都可以获取元素节点,我们后面都会使用,但是节点操作更简单。 节点概述 网页中的所有内容都是节点(标签、属性原创 2022-03-25 20:59:07 · 481 阅读 · 0 评论 -
DOM编程③ -- 排他思想
文章目录什么是排他思想案例一: 什么是排他思想 如果有同一组元素,我们想要某一个元素实现某种样式(它实现的时候,别人不能实现这种样式), 需要用到循环的排他思想算法: 所有元素全部清除样式(干掉其他人) 给当前元素设置样式 (留下我自己) 注意顺序不能颠倒,首先干掉其他人,再设置自己 案例一: 点击哪个按钮,那个按钮变成粉色背景,不能同时存在多个! 代码实现: <body> <button>按钮</button> <button>按钮&l原创 2022-03-25 16:35:17 · 615 阅读 · 0 评论 -
DOM编程② (操作元素)
文章目录原创 2022-03-23 20:58:08 · 1480 阅读 · 0 评论 -
DOM编程① (DOM简介,获取元素,事件基础)
文章目录预备知识什么是API什么是Web APIDOM简介什么是DOMDOM树获取元素如何获取页面元素根据ID获取根据标签名获取通过 HTML5 新增的方法获取获取特殊元素(body,html)事件基础事件概述事件三要素执行事件的步骤 预备知识 什么是API API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。 简单理解:API是给程原创 2022-03-17 19:07:31 · 1170 阅读 · 0 评论