DOM基础学习笔记
文章平均质量分 91
布白whitenot1
先把它完成,再说要不要完美。
展开
-
八 、冒泡捕获流、事件与事件源对象、事件委托
八 、冒泡捕获流、事件与事件源对象、事件委托一、冒泡捕获流事件流:页面中接收事件的顺序。IE提出的 事件冒泡流(Event Bubbling);网景公司提出的 事件捕获流(Event Capturing)三个阶段的规范:DOM0:onxxx句柄绑定事件的形式DOM1:没有定义这个事件模型DOM2:addEventListener(type, fn, false),removeEventListener()->w3c规范事件流三个阶段:捕获阶段目标阶段冒泡阶段通过点击事原创 2022-02-24 19:51:33 · 187 阅读 · 0 评论 -
九、鼠标行为坐标系、pageXY封装、拖拽函数封装
九、鼠标行为坐标系、pageXY封装、拖拽函数封装一、鼠标行为坐标系事件对象e的一些属性值代表了此时鼠标行为的坐标:clientX/Y 鼠标位置相对于当前可视区域的坐标(不包括滚动条的距离)x/y 同clientX/Y相同,火狐不支持screenX/Y 鼠标位置相对于设备屏幕的坐标pageX/pageY 鼠标位置相对于当前文档的坐标(包括滚动条ie9以下不支持)layerX/Y 同pageX/pageY相同,IE11以下同clientX/YoffsetX/y 鼠标相对于块元素的坐标,左上角原创 2022-02-24 19:46:58 · 403 阅读 · 0 评论 -
七、事件处理函数、冒泡捕获、阻止冒泡默认事件
七、事件处理函数、冒泡捕获、阻止冒泡默认事件一、事件处理函数事件是元素天生就具备的能力,比如可以被点击。绑定事件——>绑定事件的处理函数。事件 + 事件的反馈 == 前端交互,交互体验1.1 如何绑定事件(绑定事件处理函数)1.1.1 elem.onxxx = function(){} 句柄绑定形式兼容性好;一个元素同一种事件只能绑定一个事件处理函数,后写覆盖先写。位置:js中,一个元素同一种事件只能绑定一个事件处理函数,后写覆盖先写。内联事件监听器(行内事件监听器),每一原创 2022-02-14 23:45:36 · 537 阅读 · 0 评论 -
六、读写样式属性、操作伪元素、元素运动初探
六、读写样式属性、操作伪元素、元素运动初探一、读写样式属性1.1 element.style.xxxDOM无法直接操作CSS样式表,而是通过操作标签上的style属性来修改/访问样式。DOM动态设置行内样式的特点:属性值可读可写。多个单词属性名使用小驼峰形式。属性值的写法必须为字符串。复合值一定要拆解赋值,利于排除错误。保留字前加css。<style type="text/css"> .box { width: 200px; }</st原创 2022-02-08 21:22:23 · 714 阅读 · 0 评论 -
五、滚动距离与高度、兼容模式、可视尺寸
五、滚动距离与高度、兼容模式、可视尺寸一、滚动距离与高度(页面偏移量)滚动距离与高度:实际上是页面移动的距离,而不是滚动条移动的距离。查看滚动条的距离:常规方法: window.pageXOffset/pageYOffsetIE9某一些版本/IE8及以下没有常规方法,有自己的方法document.body.scrollLeft/scrollTopdocument.documentElement.scrollLeft/scrollTop为什么有两个方法:不同的浏览器中它俩的值总是一个是0,另原创 2022-02-08 08:51:39 · 1879 阅读 · 0 评论 -
四、节点创建删除、元素属性设置获取、节点属性
四、节点创建删除、元素属性设置获取、节点属性一、节点创建删除1.1 节点创建/增加/插入/替换删除DOM树 == 元素节点树 ≠ DOM结构树 ==节点树创建元素节点document.createElement()创建文本节点document.createTextNode()创建注释节点document.createComment()上述都在Document.prototype上。增加子节点/剪切节点:element.appendChild(aChild),增加的子节点在父元素内的原创 2022-02-08 08:50:44 · 246 阅读 · 0 评论 -
三、节点属性、方法、封装方法、DOM结构
三、节点属性、方法、封装方法、DOM结构一、节点属性1.1 nodeName(只读)元素节点的nodeName返回大写值。其他节点的nodeName为’#节点名’,例如document.nodeName:’#document’。<div class="text"> <!-- 这是一个注释 --> <h1>h1标题</h1> <a href=""></a> <p></p>原创 2022-01-22 20:20:52 · 540 阅读 · 0 评论 -
二、document对象、获取元素、节点、遍历树
二、document对象、获取元素、节点、遍历树一、document对象控制台打印document——>整个html结构console.log(document);其实document是一个对象,内部有方法和属性。console.dir(document);…二、获取元素2.1 document.getElementById()功能:通过标签id属性获取 一个 元素。兼容性:IE8以下获取标签id属性不区分大小写。IE8以下若标签没有id属性,匹配name属性。开原创 2022-01-22 20:19:36 · 3198 阅读 · 0 评论 -
一、DOM初探、JS对象、XML
一、DOM初探、JS对象、XML一、DOM初探DOM:Document Object Model (文档对象模型),提供与网页内容交互的方法和接口。DOM对象——>宿主对象。二、JS对象(两种类型,3种对象)两种类型,3种对象:ES的内部对象:本地对象、内置对象宿主对象。本地对象(Native Object)与浏览器无关Object Function Array String Number BooleanError SyntaxError ReferenceError R原创 2022-01-22 20:18:44 · 353 阅读 · 0 评论