DOM
文章平均质量分 64
DOM
Stephy_Yy
此人很懒,还是写了点什么
展开
-
DOM-8 【兼容】冒泡捕获流、事件与事件源对象、事件委托
事件流1. 含义描述从页面中接收事件的顺序2. 分类IE提出的 事件冒泡流 Event BubblingNetscape提出的 事件捕获流 Event Capturing3. 阶段事件捕获阶段处于目标阶段事件冒泡阶段事件捕获先于事件冒泡执行domdom0:定义句柄方式,兼容性最好dom1:没有事件相关定义dom2:addEventListener / removeEventListener W3C规范事件对象e / window.event1原创 2021-06-09 07:38:17 · 148 阅读 · 0 评论 -
DOM-7 【兼容】事件处理函数、冒泡捕获、阻止冒泡默认事件
事件处理函数绑定事件 = 绑定事件的处理函数(事件本身是存在的,绑定的是相应的反馈)事件 + 事件的反馈 = 前端交互 (前端核心)绑定事件的方式1. 句柄绑定为某一个元素(事件源)指定了一个事件句柄(onclick,事件发生时要进行的操作)oDiv.onclick = function(){} // 事件句柄 = 处理函数onclick绑定的事件处理函数内写的其他函数,在非严格模式下,指向的是window【该方式】一个元素、同一事件、只能绑定一个事件处理函数(绑定多个取最后)原创 2021-06-08 08:09:22 · 226 阅读 · 0 评论 -
DOM-6 【兼容】读写样式属性、操作伪元素、运动元素初探
规范<style type="text/css"></style><script type="text/javascript"></script>读写样式属性.style是访问不到css样式表的,只能访问到行内/内联的属性,当未设置行内属性时,结果为空字符串设置时,对复合值需要拆解赋值,不拆解效率更低oDiv.style.weight='200px';oDiv.style.border='5px solid #000';// 更合适的原创 2021-06-06 17:54:16 · 176 阅读 · 0 评论 -
DOM-5【兼容】滚动距离与高度、兼容模式、可视尺寸
查看滚动条的距离方法版本window.pageXOffset / pageYOffsetIE9/IE8及以下不支持(常规)document.body.scrollLeft/scrollTopIE9/IE8及以下(部分支持,具体看模式)document.documentElement.scrollLeft/scrollTopIE9/IE8及以下(部分支持,具体看模式)window.scrollX / scrollY不常见滚动条距离:也看页面真实移动了多原创 2021-06-04 08:01:23 · 99 阅读 · 0 评论 -
DOM-4 【utils/待讲评】节点创建删除、元素属性设置获取、节点属性
节点创建Document.prototype ← document.createElement('div')document.createTextNode('xxx') // 创建文本节点document.createComment('xxx') // 创建注释节点增加/剪切子节点Node.prototype ← node.appendChild(node)总是在父元素的最后增加(类似push)同时也能剪切(对于存在的节点/DOM元素),可用于移动位置,绝不能写字符串插入inse原创 2021-06-03 07:55:08 · 145 阅读 · 0 评论 -
DOM-3 【utils/待讲评】节点属性、方法、封装方法、DOM结构
节点属性nodeType元素节点 1 大写属性节点 2文本节点 3 #text注释节点 8 #commentdocument 9DocumentFragment 11nodeName是只读属性元素节点的nodeName是大写的其余的是#小写的元素节点没有nodeValue属性,null,是可写的其余有(属性、注释、文本…)getAttributeNode(获取属性节点)属性节点有nodeValue、value属性nodeType,只读封装方法遍历子元素常规原创 2021-06-02 07:53:42 · 91 阅读 · 0 评论 -
DOM-2 document对象、获取元素、节点、遍历树
一、document获取元素1. 方法document.getElementById(‘box’) // 在IE8及以下是不分大小写的,而且name值也能匹配上document.getElementsByClassName(’’) // IE8及以下是用不了的document.getElementsByTagName() 都兼容document.getElementsByName() 用的非常少返回的是类数组(对象),可用下标访问,没有数组方法企业级开发一般不使用id获取元素,id一原创 2021-06-01 07:18:43 · 199 阅读 · 0 评论 -
DOM-1 DOM初探、JS对象、XML、幻灯片案例展示
DOM —— Document Object Model(文档对象模型)DOM 对象 → 宿主对象(是浏览器提供的)通过浏览器提供的方法表示或操作HTML和XML不能操作css标签:<></>对元素:<>及内部的内容,getElementsByTagName获取的是元素,是类数组,没有数组方法,但能通过下标访问JavaScript 3种对象本地对象(Native Object)Object Function Array String Number .原创 2021-05-30 08:36:12 · 127 阅读 · 0 评论 -
DOM-9 【实战】模块化开发Todolist(面向过程)
模块化分类按dom结构划分按功能划分(组件化开发)模块与模块之间可以相互依赖,但互不影响模块:IIFE赋值给一个变量,当引入模块时,IIFE会立即执行单标签闭合才符合W3C规范display、position放在上面css是有顺序的,先宽高、margin、box-shadow、border-radius级联选择器,css样式是从右到左查找,效率更高绝对定位会让块级元素变成内联块级元素,原先占满整行的会收缩showInput = !showInput没有条件语句里明确false原创 2021-06-19 07:43:39 · 143 阅读 · 0 评论 -
DOM-11 【兼容】鼠标行为坐标系、pageXY封装、拖拽函数封装
鼠标行为e.属性含义相关属性clientX/Y鼠标位置相对于当前可视区域的坐标x/y(FF火狐部分版本不支持)pageX/Y(IE9以下不支持)鼠标位置相对于当前文档的坐标layerX/Y (IE11以下同clientX/Y)screenX/Y鼠标位置相对于显示器屏幕的坐标offsetX/Y鼠标位置相对于块元素的坐标(以左上角为顶点,包括边框,Safari不包括边框)pageXY封装// 兼容性写法:获取相对文档的位置function pa原创 2021-06-19 10:04:17 · 62 阅读 · 0 评论 -
DOM-10 面向对象开发Todolist
将插件配置项写在html的div里,data-config自定义属性,外单引号,内双引号(内部是JSON字符串)<div class="todo-wrap" data-config='{ "plusBtn":"j-show-input", "inputArea":"input-wrap", "addBtn":"j-add-item", "list":"list-wrap", "itemClass":"item"}'></div>/.原创 2021-06-19 18:32:54 · 113 阅读 · 0 评论 -
DOM-12 【模拟桌面待讲评】鼠标事件深入、点击与拖拽分离、双击事件
鼠标事件深入点击事件 = mousedown + mouseupposition: absolute 会将内联元素变为块级(比如a)a标签的协议限定符(伪协议,防止跳转和刷新,让href不生效),javascript:;,可以让点击和拖拽分离模块的声明:xx变量 = function () { } / IIFE等待型模块和立即执行的模块用按下、抬起的时间差值来判断是拖拽还是点击边界问题浏览器可能有计算误差,可以适当将范围缩小1像素,防止出现滚动条鼠标点击鼠标右键、中键没有o原创 2021-06-20 12:04:32 · 155 阅读 · 0 评论 -
DOM-13 【实战】输入及状态改变事件、京东搜索框
模块化IIFEwindow.onload = function () { init()}function init() { keySearch() others() // 多人开发的模块}var keySearch = (function () { var searchKw = document.getElementById('J_search_kw'), autoKw = document.getElementById('J_autoK原创 2021-06-21 21:24:05 · 89 阅读 · 0 评论 -
DOM-14 【实战】解决事件代理和鼠标移动事件的窘态
鼠标的滑入滑出案例事件现象应用场景mouseover/mouseout绑定在父元素时,对她的所有子元素,事件都生效dom结构简单mouseenter/mouseleave只对她绑定的元素有效,对window绑定无效dom结构复杂mousemove长触发// 绑定在父元素上// 即使取消冒泡,这个结果也不变,证明这个现象不是冒泡造成的<body> <div class="outer"> <div原创 2021-06-22 07:25:35 · 126 阅读 · 1 评论 -
DOM-15/16【实战】鼠标行为预测技术
鼠标预测行为动作复杂,使用事件代理得不偿失,在数量有限的情况下,使用循环绑定更好用户从menu斜着向右下角滑入时,可能是进入main,也可能是要选择子菜单,在判断前先做延迟如何判断用户进入main的意图,数组前一个点p1,和main左上下两个顶点组成一个三角形,当后一个点p2在三角形内,认为有进入main的意图,否则认为是切换菜单如何判断一个点是否在三角形内:向量 + 叉乘公式pointInTriangle(p, a, b, c)...原创 2021-06-23 07:57:50 · 178 阅读 · 0 评论