DOM
-
1. JS组成
- JS基础–JS语法–ECMAScript
- Web APIs
- 组成
- 页面文档对象模型–DOM
- 浏览器对象模型–BOM
- 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM,DOM)
- 比如alert();
- 组成
-
2. DOM简介
-
文档对象模型–处理标记语言的标准编程接口
- 改变网页的内容,结构,样式
-
DOM树–对象
- 文档–页面Document
- 元素–标签element
- 节点–网页内容node-标签,属性,文本,注释…
-
获取网页元素
-
方式 实现 返回值 ID getElementById(‘ID’) 元素对象 标签名 getElementsByTagName(‘tag’) 伪数组形式的元素对象集合 getElementByClassName() 伪数组形式的元素对象集合 HTML5新增 querySelector(‘选择器#.’) 第一个元素对象 querySelectorAll(‘选择器#.’) 所有元素对象的伪数组形式 特殊元素 body body元素对象 documentElement html元素对象 -
父元素必须是单个对象–获取时不包括父元素本身
-
常用方法
-
方法 作用 typeof 变量 变量类型 console.dir(变量) 查看元素对象的属性和方法
-
-
-
-
3. 事件基础
-
触发-响应
-
事件三要素
事件源 获取元素对象 事件类型 如何触发 事件处理程序 函数实现 -
<button id="btn">点击</button> <script> var btn=document.getElementById('btn'); btn.onclick = function(){ alert('lemon'); } </script>
-
-
-
4. 操作元素
-
改变元素内容
-
类别 特点 作用 innerText 不识别HTML标签 可获取可赋值,获值时保留空格和换行,不包括HTML标签 innerHTML 识别HTML标签 可获取可赋值,获值时去除空格和换行,有包括HTML标签 -
<script> var btn=document.getElementById('btn'); //获取值 conso.log(btn.innerHTML); //改变值 btn.onclick = function(){ btn.innerHTML='on' } </script>
-
-
修改元素属性
-
element.属性
-
表单元素属性
-
type 输入类型 value 值 checked 选中 selected 选中 disabled 禁用 = true
-
-
this
指向事件函数的调用者this.disabled = true ;
-
-
修改元素样式
-
element.style.样式
----样式修改比较少- 驼峰命名法
- 行内样式,CSS权重较高
-
className
—样式修改比较多- 添加
class
this.className=''
- 注意不是
style.className
- 会覆盖原来的class类名
- 添加
-
保留原来class
- 多类名选择器
this.className='原类名 新类名'
- 多类名选择器
-
精灵图技巧
- 图片位置规律
-
焦点–默认文字显示隐藏
-
密码框验证信息
-
排他思想
- 成组—for循环内给每个增加事件
- 清除上一状态
-
自定义属性的操作
-
获取属性值
-
方法 特点 element.属性 获得内置属性值 element.getAttribute(‘属性’) 主要获得自定义属性值
-
-
设置属性值
-
方法 特点 element.属性 = 值 设置内置属性值 element.setAttribute(‘属性’,‘值’) 主要设置自定义属性值
-
-
移除属性值
element.removeAttribute('属性')
-
避免区分不开内置属性&自定义属性
-
H5规定自定义属性
data-
开头
-
H5新增获得自定义属性值方法
-
dataset是存放了所有以dataset开头的自定义属性集合;
-
若自定义属性里有多个-链接的单词: 采取
驼峰命名法
-
<div data-index="2" class="e" data-get-Time="4"></div> <script> var div = document.querySelector('.e'); /* getAttribute() */ console.log(div.getAttribute('data-index')); console.log(div.getAttribute('data-get-Time')); // console.log(div.getAttribute('getTime')); /* H5新方法 */ console.log(div.dataset); console.log(div.dataset.index); // console.log(div.dataset['get-Time']); console.log(div.dataset['getTime']); </script>
-
-
-
-
tab栏切换
- tab_list
- 自定义属性
- tab_content
- 显示隐藏
- tab_list
-
-
5. 节点操作
-
获取元素方式 实现 1. DOM方式 逻辑不强,繁琐 2. 节点层级关系 利用父子兄关系,逻辑强,兼容性差 -
文档节点,元素节点,文本节点,属性节点
-
节点
-
节点属性 nodeType nodeName nodeValue -
nodeType
- 元素节点–1
- 属性节点–2
- 文本节点–3 (包括文字,空格,换行)
-
关系
-
关系 表示 父节点 parentNode 子节点 1. childNodes(集合),包含元素等全部节点 2. children,只有元素节点(非标准),children[i] 兄弟节点 1.node.nextSibling/previousSibling,包含其他节点 2. next / previousElementSibling,下一元素节点(兼容性)
-
-
-
创建和添加节点
-
动态创建元素节点
-
<ul id="ull"> <li>123</li> </ul> <script> /*新增节点*/ // document.createElement var li = document.createElement('li'); /*添加到父节点的子节点末尾*/ var ul = document.querySelector('#ull'); console.dir(ul); ul.appendChild(li); /*指定子节点前*/ var lili = document.createElement('li'); ul.insertBefore(lili, ul.children[0]); </script>
-
-
-
删除节点
-
<script> /*依次删除节点*/ if(list.length == 0) { btn.disabled = true; } node.removeChild(list[0]); </script>
-
标签不跳转
-
<a href='javascript:;'>删除</a>
-
href='javascript:;'
-
-
-
复制节点
-
<ul id="ull"> <li>123</li> </ul> <!--Clone--> <script> /*clone节点*/ var ul = document.querySelector('#ull'); /*浅拷贝---只复制标签*/ var lili=ul.children[0].cloneNode(); /*深拷贝---复制标签及内容*/ var lili=ul.children[0].cloneNode(true); /*添加到父节点的子节点末尾*/ ul.appendChild(lili); /*指定子节点前*/ ul.insertBefore(lili, ul.children[0]); </script>
-
深拷贝与浅拷贝
-
-
三种动态创建元素区别
-
方法 特点 1. document.createElement() 效率比普通的innerHTML高 2. element.innerHTML 1.在大量创建时,利用的是字符串拼接,会重新不断开辟空间,效率低; 2. 当将新增元素加入数组push,再join(‘ ’)转换为字符串传给innerHTML,效率比createHTML高 3. document.write() 直接将内容写入页面的内容流,但文档流执行加载完毕,会导致页面全部重绘
-
-
-
-
DOM重点核心
-
增,删,改,查,属性操作,事件操作
-
类别 具体操作 创建 1.document.write 2.innerHTML 3. createElement 增 1. appendChild 2. insertBefore 删 1. removeChild 改 1. 修改元素属性:src,href 2.修改普通元素内容:innerHTML,innerText 3.修改表单元素:value,type,disabled 4.修改元素样式:style,className 查 **1.DOM-API:**getElementById,getElementByTagName **2. H5:**querySelector,querySelectorAll (推荐) (推荐) **3.节点操作:**parentNode,children,previousElementSibling,nextElementSibling 属性操作 自定义属性:1.setAttribute 2.getAttribute 3.removeAttribute 事件操作 事件源.事件类型 = function(){ 事件处理程序 }
-
-
6. 事件–高级
-
注册事件(绑定事件)
-
方式 特点 1. 传统方式–on开头 注册事件唯一性,同一元素同一事件设置多个处理函数会被覆盖 2.方法监听注册-addEventListener 同一元素同一事件可注册多个监听器 -
方法监听注册–
addEventListener(type,listener,useCapture)
-
参数 type-事件类型字符串,不是on开头 listener-事件处理函数,事件发生时,调用该监听函数 useCapture-可选参数,boolean默认false冒泡,true捕获 -
<button id="btn">测试</button> <script> var btn = document.querySelector('#btn'); btn.addEventListener('click', function () { alert('测试成功'); }) /*可叠加事件处理程序,不被覆盖*/ btn.addEventListener('click', function () { alert('再来一次,成功!'); }) </script>
-
attachEvent(eventNameWithOn,callback)
不推荐使用detachEvent(eventNameWithOn,callback)
不推荐使用
-
-
注册事件兼容性解决方案
-
<script> function addEventListener(element, eventName, fn) { //判断当前浏览器是否支持addeventlistener方法 if (element.addEventListener) { element.addEventListener(eventName, fn); } else if (element.attachEvent) { element.attachEvent('on' + eventName, fn); } else { element['on' + eventName] = fn; } } </script>
-
-
删除事件(解绑事件)
-
方法 传统方式:element.事件= null 监听方式:eventTarget.removeEventListener(type,listener,【userCapture】) -
<script> var btn = document.querySelector('#btn'); btn.addEventListener('click', fn); /*监听函数不需要调用,直接就绑定了,需要分开写函数*/ function fn() { alert('测试成功'); btn.removeEventListener('click', fn); } </script>
-
删除事件兼容性解决方案
-
<script> function removeEventListener(element, eventName, fn) { //判断当前浏览器是否支持removeeventlistener方法 if (element.removeEventListener) { element.removeEventListener(eventName, fn); } else if (element.detachEvent) { element.detachEvent('on' + eventName, fn); } else { element['on' + eventName] = null; } } </script>
-
-
-
DOM事件流
-
从页面中接收时间的顺序
-
事件发生时会在元素节点之间按照特定的顺序传播的传播过程
-
DOM事件流 三个阶段
-
阶段 捕获阶段:Document-html-body-div点击事件 当前目标阶段:div点击事件 冒泡阶段:div点击事件-body-html-Document
-
-
事件冒泡
- 事件开始时由具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程
-
事件捕获
- 由DOM最顶层节点开始,逐级向下传播到最具体的元素接收的过程
-
注意 1.JS代码中只能执行捕获或者冒泡其中的一个阶段 2.onclick和attachEvent()只能得到冒泡阶段 3. 若addEventListener第三个参数是true,则处于捕获阶段 4.若addEventListener第三个参数是false/省略,则处于冒泡阶段 5.常用事件冒泡 6. 有些事件没有冒泡,如onblur,onmouseenter,onmouseleave -
多个事件点击区域的交集
-
-
事件对象(命名:event,eve,e)
-
有事件才会存在,由系统自动创建,作事件函数形参
-
即事件相关的事件信息
-
传统事件对象
-
<script> var father = document.querySelector('.father'); father.onclick= function (event) { console.log(event); alert('father'); } </script>
-
-
主流事件对象
-
<script> var father = document.querySelector('.father'); father.addEventListener('click', function (event) { console.log(event); alert('father'); }, true) </script>
-
兼容性处理
-
e = e || windows.event
-
-
-
事件对象常见属性和方法
-
事件对象属性方法 说明 e.target 触发事件的对象(标准) e.srcElement 触发事件的对象(ie6-8) e.type 事件类型(不带on) e.cancelBubble 阻止冒泡(非标准ie6-8) e.returnValue 阻止默认事件(默认行为-非标准) e.preventDefault 阻止默认事件(默认行为-标准) e.stopPropagation 阻止冒泡(标准) -
触发事件的标准
-
<ul id="uull"> <li>1</li> <li>2</li> </ul> <script> /this和target的区别/ var ul = document.querySelector('#uull'); ul.addEventListener('click', function (e) { console.log(this); /this在对象e中的替代,有兼容性问题/ console.log(e.currentTarget); console.log(e.target); }) </script>
-
<script> /兼容性/ var ul = document.querySelector('#uull'); ul.addEventListener('click', function (e) { e = e || window.event; console.log(this); console.log(e.target); }) </script>
-
-
阻止默认事件/行为
-
<script> /让链接不跳转,提交按钮不提交/ var a = document.querySelector('#a'); a.addEventListener('click', function (e) { /1. dom标准写法--普通浏览器-e.preventDefault()方法/ e.preventDefault(); /2. 低版本浏览器-ie678--returnValue属性/ e.returnValue; /3. return false,无兼容性问题/ return false; /之后的代码不执行/ }) </script>
-
-
阻止冒泡的方式
-
在对应的传播节点阻止
-
<div class="father"> <div class="son"> </div> </div> <script> var father = document.querySelector('.father'); var son = document.querySelector('.son'); father.addEventListener('click', function (event) { console.log(event); alert('father'); }, false) son.addEventListener('click', function (e) { alert('son'); /方法形式/ e.stopPropagation(); /属性方式 低版本浏览器/ e.cancelBubble; }, false) </script>
-
-
-
事件委托/代理/委派—事件冒泡的好处
- 访问DOM的次数越多,整个页面的交互就绪事件越长
不给每个子节点单独设置事件监听器,而是将事件监听器设置在父节点上,然后利用冒泡原理影响设置每个子节点
- 再利用
e.target
选择实际的点击元素 - 好处,只操作一次DOM,提高了程序的性能
- 再利用
-
常用鼠标事件
-
作用 实现 1. 禁止鼠标右键菜单 a.addEventListener('contextmenu', function (e) {e.preventDefault();})
2.禁止鼠标选中 a.addEventListener('selectstart', function (e) {e.preventDefault();})
-
-
鼠标事件对象–MouseEvent
-
鼠标点击–坐标
- 可视区–clientX,clientY
- 页面–pageX,pageY
- 屏幕–screenX,screenY
-
跟随鼠标移动
-
鼠标移动事件–mousemove
-
页面移动–document事件
-
移动距离,不占位置–绝对定位,
记得+单位
-
<div style="position: relative;"> <img src="angel.png" alt="天使" class="imgg"> </div> <script> var img = document.querySelector('.imgg'); document.addEventListener('mousemove', function (e) { img.style.top = e.pageY - 520 + 'px'; img.style.left = e.pageX - 20 + 'px'; }) </script>
-
-
-
键盘事件对象–KeyboardEvent
-
键盘事件 触发条件 onkeyup 某个键盘按键被松开时触发,不区分大小写 onkeydown 某个键盘按键被按下时触发,不区分大小写 onkeypress 某个键盘按键被按下时触发(不识别功能键),区分大小写 -
执行顺序
- onkeydown—>onkeypress—>onkeyup
-
事件对象主要属性
- key–按键值
- keyCode–按键的Ascii码
-
注意:keydown和keypress两个事件触发时,文字未在文本框中
-
注意:keyup两个事件触发时,文字已在文本框中
-
-
常用键盘事件
-
-
-