DOM
文章平均质量分 57
Document Object Model文档对象模型
大名张无忌
前端开发,技术栈涉及:Vue、React、小程序,交流可以私信/邮件:2285546178@qq.com
展开
-
【无障碍】tabindex
简介 tabindex是全局属性:用户操作tab键的顺序 ——HTML标签元素都可以用的属性,比如说id、class等属性都是HTML的全局属性。 tabindex属性是一个与键盘访问行为息息相关的属性,或者说是用户体验息息相关的属性 场景:鼠标坏了/投屏的键盘操作 作用:管理键盘焦点,决定元素能否被选中 交互元素:常见的a、button、input:隐式可聚焦元素、内置键盘事件处理 https://allyjs.io/data-tables/focusable.html document.activeEl原创 2021-11-10 17:22:34 · 2183 阅读 · 0 评论 -
虚拟 DOM 和 DOM diff
虚拟DOM 是什么 是一个能代表DOM的 JavaScript 对象,包含了 tag、props、children 三个属性。 <div id="app"> <p class="text">hello world!!!</p> </div> 转换成虚拟dom,如下: { tag: 'div', props: { id: 'app' }, chidren: [ { tag: 'p', props: {原创 2020-11-19 20:51:14 · 239 阅读 · 0 评论 -
#再读DOM# (1)DOM 事件模型
- 概念 事件:事件是用户或者浏览器自己执行的某种动作,是文档或者浏览器发生的一些交互瞬间 事件流:当一个事件被触发时,一个event对象将被创建并顺序的传递给事件监听者们。事件传递的顺序称为事件流。 事件处理程序:响应事件的函数。如click是事件名称,加上"on"开头,事件处理程序是onclick 事件在子元素和父元素之间的传播分为3个阶段:(1)捕获阶段:事件从window对象自上而下向目标节点传播的阶段;(2)目标阶段:真正的目标节点正在处理事件的阶段;(3)冒泡阶段:事件从目标节点自下而上向win原创 2020-10-04 21:03:19 · 251 阅读 · 0 评论 -
# 高级事件 模拟快递单号输入时放大字体显示
keyup时,将input中的值给div,div的font-size较大 <style> input { width: 200px; } div { position: relative; display: none; width: 180px; height: 50px; ...原创 2020-03-22 11:54:20 · 256 阅读 · 0 评论 -
# 高级事件 页面中键盘点击s光标定到输入框中
核心思想:如果键盘事件的keycode==s,focus() <style> </style> <body> <input type="text" value=""> <button>搜索</button> <script> var input = document.querySelector('input...原创 2020-03-22 10:58:34 · 100 阅读 · 0 评论 -
# 高级事件 图片随鼠标移动效果
核心思想:鼠标移动的X和Y坐标赋值给绝对定位的图片 </head> <style> img { position: absolute;; width: 70px; height: 35px; } </style> <body> <img src="images/afternoon....原创 2020-03-21 22:58:08 · 102 阅读 · 0 评论 -
# 高级事件 IE678浏览器兼容性问题及解决办法汇总
如下方法IE678均不支持 (括号中为IE678支持的方法) 1、addEventListner 绑定/移除事件(attachEvent)2、function(event){} 输出event事件对象(window.event) function (event) { event = event || window.event; console.log(event);...原创 2020-03-18 22:56:00 · 763 阅读 · 0 评论