随笔分类 - Web API [DOM]
摘要：navigation 对象 navigator对象包含有关浏览器的信息.它有很多属性,我们最常用的是 userAgent ,该属性可以返回由客户机发送服务器的user-agent头部的值。 下面前端代码可以判断用户那个终端打开页面,实现跳转
阅读全文
摘要：案例：模拟京东快递单号查询（当我们在文本框输入内容时，文本框上面自动显示大号字的内容） 案例分析： 快递单号输入内容时，上面的大号字体盒子（con）显示（这里的字号更大） 表单检验用户输入：给表单添加键盘事件 同时把快递单号里面的值（value）获取过来赋值给con盒子（innerText）作为内容
阅读全文
摘要：案例：模拟京东按键输入内容（当我们按下 s 键，光标就定位到搜索框） 案例分析： 核心思路：检测用户是否按下了 s 键，如果按下了 s 键，就把光标定位到搜索框里面 使用键盘事件对象里面的keyCode判断用户按下的是否是 s 键 搜索框获得焦点：使用 js 里面的 focus( )方法
阅读全文
摘要：JS高级事件-键盘事件 1.常用键盘事件 注意： 如果使用addEventListener 不需要加 on onkeypress 和前面两个的区别是，他不识别功能键，比如左右箭头、shift等。 三个事件的执行顺序是：keydown-- keypress--keyup 2.键盘事件对象 | 键盘事件
阅读全文
摘要：案例：跟随鼠标的天使 案例分析： 1.鼠标不断地移动，使用鼠标移动事件：mousemove 2.在页面中移动，给document注册事件 3.图片要移动距离，而且不占位置，我们使用绝对定位即可 4.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以
阅读全文
摘要：高级事件-鼠标事件 鼠标事件： 鼠标事件对象：
阅读全文
摘要：高级事件-事件委托 事件委托也称为事件代替，在jQuery里面称为事件委派。 原理： 不是每个子节点单独设置事件监听器，而是将事件监听器设置在父节点上，然后利用冒泡原理影响设置每个子节点。 作用： 我们只操作了一次DOM，提高了程序的性能。 ==案例== 给ul 注册点击事件，然后利用事件对象的ta
阅读全文
摘要：e.target 和 this 区别、阻止默认事件、阻止冒泡事件 1.e.target 和 this 区别 事件对象的常见属性和方法 2.返回事件类型 3.阻止默认事件 4.阻止冒泡 阻止事件冒泡兼容性解决方案
阅读全文
摘要：高级事件-事件对象 1.事件对象 eventTarget.onclick = function(event){} eventTarget.addEventListener('click',function(event){}) //这个 event 就是事件对象，我们还喜欢写成 e 或者 evt 官方
阅读全文
摘要：DOM事件流 1.理论 事件流描述的是从页面中接受事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。 比如我们给一个div注册了一个点击事件： DOM流分为3个阶段：捕获阶段、当前目标阶段、冒泡阶段 事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后
阅读全文
摘要：高级事件-删除事件（解绑事件）方式：detachEvent、removeEventListener 1.删除事件的方式 传统注册方式： eventTarget.onclick=null; 方法监听注册方式： eventTarget.removeEventListener(type,listener[
阅读全文
摘要：高级事件-注册事件（绑定事件）事件监听方式：addEventLIstener、attachEvent 1.事件监听概述 给元素添加事件，称为注册事件或者绑定事件 注册事件有两种方式：传统方法 和 方法监听注册方式 传统注册方式 利用on开头的事件onclick <button onclick="al
阅读全文
摘要：三种动态创建元素及其区别 document.write( ) element.innerHTMML document.createElement( ) 区别： 1.document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。 2.innerHTMML 是将
阅读全文
摘要：案例：动态生成表格 注意：本案例不涉及数据库 ==style：== ==body:== ==script:== ==结果：== 当点击删除时，对应的行会被删除
阅读全文
摘要：复制节点（克隆节点）[ node.cloneNode() ] node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点。 注意： 1.如果括号参数为 空 或者 为 false ，则是 浅拷贝,即只克隆赋值节点本身，不克隆里面的子节点。 2.如果括号参数为true
阅读全文
摘要：删除节点[ node.removeChild(child) ] node.removeChild(child) 方法从DOM中删除一个子节点，返回删除节点 *上述代码中，如果 ul 里面的 子节点集合 的长度不等于0，则删除 ul 里面的第一个子节点元素。
阅读全文
摘要：1.为什么学节点操作 （1）利用DOM提高的方法获取元素 document.getElementById( ) document.getElementByTagName( ) document.querySelector( )等 逻辑性不强，繁琐 （2）利用节点层级关系获取元素 利用父子兄节点关系获
阅读全文
摘要：## 节点操作——父节点(node.parentNode) 利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。 parentNode 属性可返回某节点的父节点，注意是最近的一个父节点 如果指定的节点没有父节点则返回null
阅读全文
摘要：## 节点操作——子节点(标准：parentNode.childNodes、非标准：parentNode.childrens、parentNode.firstChild、parentNode.lastChild) parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为及
阅读全文
摘要：## 节点操作：兄弟节点（nextSibling、previousSibling、node.nextElementString、node,previousElementString） node.nextSibling：返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有节点。 no
阅读全文
浙公网安备 33010602011771号