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—样式修改比较多- 添加
classthis.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两个事件触发时，文字已在文本框中
-
-
常用键盘事件
-
-
-
2083
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
