(7.1)--01_DOM基础为什么会衰败？.pdf

双击此处编辑标题饶晓宇DOM基础认识DOM01了解下DOM的基本概念常DOM接02认识下 DOM的常接，常属性和常法操作DOM03结合些简单的例学习如何操作 DOM01 认识DOM1）DOM是什么2）DOM和 BOM3）DOM的基本概念DOM是什么DOM是什么Document Object Model（档对象模型）DOM是什么Document Object Model（档对象模型）允许程序或脚本语（例如：JavaScript）来操作HTML/XML 档的接DOM的诞DOM的诞上世纪 90 年代末的浏览器战DOM的诞上世纪 90 年代末的浏览器战DOM的诞上世纪 90 年代末的浏览器战W3C推出 DOM标准DOM的诞上世纪 90 年代末的浏览器战W3C推出 DOM标准最新版本是 DOM level4DOM和BOMDOM和BOMBrowser Object Model（浏览器对象模型）DOM和BOMBrowser Object Model（浏览器对象模型）BOM没有统的标准，但是 window 的些对象有对应的标准DOM和BOMBrowser Object Model（浏览器对象模型）BOM没有统的标准，但是 window 的些对象有对应的标准DOM标准 HTML标准-navigatorHTML标准-locationHTML标准-historyHRTime标准CSSOMView Model 草案Performance Timeline标准Resource Timing标准User Timing标准DOM的基本概念DOM的基本概念档树DOM的基本概念档树节点 NodeDOM的基本概念档树节点 Node元素 ElementHTMLElementHTMLDivElementHTMLAnchorElementSVGElementDOM的基本概念根节点和根元素每棵档树只会有个根节点和个根元素根节点不定是根元素DOM的基本概念根节点和根元素每棵档树只会有个根节点和个根元素根节点不定是根元素根元素 Root ElementDOM的基本概念根节点和根元素每棵档树只会有个根节点和个根元素根节点不定是根元素根节点 Root Node根元素 Root Element获取根节点和根元素获取根节点和根元素?获取根节点?法1function getRootNode(node)while(node.parentNode)node=node.parentNode;return node;?法2 Node.getRootNode();获取根节点和根元素?获取根节点?法1function getRootNode(node)while(node.parentNode)node=node.parentNode;return node;?法2 Node.getRootNode();?获取根元素function getRootElement(node)while(node.parentElement)node=node.parentElement;?确保 node 是元素类型 if(node.nodeType?Node.ELEMENT_NODE)return node;return null;获取 DocumentHTML、Window获取 DocumentHTML、Window?获取 document node.ownerDocument;?document?null?获取 html 元素document.documentElement;?document.rootElement;（已废弃）?获取 window 对象document.defaultView;?window?nulldocument.parentWindow;?非标准，IE only获取 DocumentHTML、Window?获取 document node.ownerDocument;?document?null?获取 html 元素document.documentElement;?document.rootElement;（已废弃）?获取 window 对象document.defaultView;?window?nulldocument.parentWindow;?非标准，IE only思考题：node.ownerDocument 和直接访问document 对象有什么不同？02 常DOM接1）节点 Node2）元素 Element3）事件 Event节点 Node节点 Node节点的常属性节点 Node节点的常属性节点 Node节点 Node节点的常法节点 Node节点的常法节点 Node常节点类型节点 Node常节点类型元素 Element元素 ElementElement继承Node接 元素 ElementElement继承Node接 Element的常属性元素 ElementElement继承Node接 Element的常属性元素 Element元素 Element元素常法元素 Element元素常法HTMLElementHTMLElementHTMLElement继承Element 接HTMLElementHTMLElement继承Element 接HTMLElement的常属性HTMLElementHTMLElement继承Element 接HTMLElement的常属性EventEventEvent 的常属性EventEvent 的常属性EventEventEvent 的常法EventEvent 的常法03 操作DOM1）DOM的获取和创建2）DOM的修改3）事件监听DOM的获取DOM的获取?根据 id 获取document.getElementById(main);DOM的获取?根据 id 获取document.getElementById(main);?根据 className 获取document.getElementsByClassName(list);DOM的获取?根据 id 获取document.getElementById(main);?根据 className 获取document.getElementsByClassName(list);?根据 tagName 获取document.getElementsByTagName(li);DOM的获取?根据 id 获取document.getElementById(main);?根据 className 获取document.getElementsByClassName(list);?根据 tagName 获取document.getElementsByTagName(li);?根据 name 获取document.getElementsByName(btn01);DOM的获取?根据 id 获取document.getElementById(main);?根据 className 获取document.getElementsByClassName(list);?根据 tagName 获取document.getElementsByTagName(li);?根据 name 获取document.getElementsByName(btn01);DOM的获取?根据 id 获取document.getElementById(main);?根据 className 获取document.getElementsByClassName(list);?根据 tagName 获取document.getElementsByTagName(li);?根据 name 获取document.getElementsByName(btn01);成功 返回标元素失败 返回nullDOM的获取?根据 id 获取document.getElementById(main);?根据 className 获取document.getElementsByClassName(list);?根据 tagName 获取document.getElementsByTagName(li);?根据 name 获取document.getElementsByName(btn01);成功 返回标元素失败 返回null成功 返回 HTMLCollection失败 返回空的 HTMLCollectionDOM的获取?根据 id 获取document.getElementById(main);?根据 className 获取document.getElementsByClassName(list);?根据 tagName 获取document.getElementsByTagName(li);?根据 name 获取document.getElementsByName(btn01);成功 返回标元素失败 返回null成功 返回 HTMLCollection失败 返回空的 HTMLCollection成功 返回 HTMLCollection失败 返回空的 HTMLCollectionDOM的获取?根据 id 获取document.getElementById(main);?根据 className 获取document.getElementsByClassName(list);?根据 tagName 获取document.getElementsByTagName(li);?根据 name 获取document.getElementsByName(btn01);成功 返回标元素失败 返回null成功 返回 HTMLCollection失败 返回空的 HTMLCollection成功 返回 HTMLCollection失败 返回空的 HTMLCollection成功 返回动态NodeList失败 返回空的动态 NodeList通过CSS选择器获取通过CSS选择器获取?根据 id 选择器获取document.querySelector(#main);通过CSS选择器获取?根据 id 选择器获取document.querySelector(#main);?根据类选择器获取document.querySelectorAll(.list);通过CSS选择器获取?根据 id 选择器获取document.querySelector(#main);?根据类选择器获取document.querySelectorAll(.list);?根据标签选择器获取document.querySelectorAll(li);通过CSS选择器获取?根据 id 选择器获取document.querySelector(#main);?根据类选择器获取document.querySelectorAll(.list);?根据标签选择器获取document.querySelectorAll(li);?根据属性选择器获取document.querySelectorAll(name=btn01);通过CSS选择器获取?根据 id 选择器获取document.querySelector(#main);?根据类选择器获取document.querySelectorAll(.list);?根据标签选择器获取document.querySelectorAll(li);?根据属性选择器获取document.querySelectorAll(name=btn01);?根据复杂的 CSS 选择器获取document.querySelectorAll(#main .list li:nth?child(n+5)buttonname?btn);DOM 的获取document.querySelector(CSS Selector);document.querySelectorAll(CSS Selector);DOM 的获取document.querySelector(CSS Selector);document.querySelectorAll(CSS Selector);成功 第个命中选择器的元素失败 返回nullDOM 的获取document.querySelector(CSS Selector);document.querySelectorAll(CSS Selector);成功 第个命中选择器的元素失败 返回null成功 返回静态NodeList列表失败 返回空的静态 NodeListHTMLCollection vs NodeListHTMLCollection vs NodeList都是类数组，提供了 length属性和通过下标索引的功能，可以通过 Array.from等式转为数组HTMLCollection vs NodeList都是类数组，提供了 length属性和通过下标索引的功能，可以通过 Array.from等式转为数组HTMLCollection和动态 NodeList 的结果是实时更新的，静态 NodeList不实时更新HTMLCollection vs NodeList都是类数组，提供了 length属性和通过下标索引的功能，可以通过 Array.from等式转为数组HTMLCollection和动态 NodeList 的结果是实时更新的，静态 NodeList不实时更新HTMLCollection可以通过下标、id、name进索引，NodeList只能通过下标进索引HTMLCollection vs NodeList都是类数组，提供了 length属性和通过下标索引的功能，可以通过 Array.from等式转为数组HTMLCollection和动态 NodeList 的结果是实时更新的，静态 NodeList不实时更新HTMLCollection可以通过下标、id、name进索引，NodeList只能通过下标进索引ES5、ES6之后，NodeList提供了迭代的法，HTMLCollection没有HTMLCollection vs NodeListHTMLCollection vs NodeList?HTMLCollectionlet btns1=document.getElementsByTagName(button);document.getElementsByTagName(button)?document.getElementsByTagName(button);?trueHTMLCollection vs NodeList?HTMLCollectionlet btns1=document.getElementsByTagName(button);document.getElementsByTagName(button)?document.getElementsByTagName(button);?true?动态 NodeListlet btns2=document.getElementsByName(btn);document.getElementsByName(btn)?document.getElementsByName(btn);?trueHTMLCollection vs NodeList?HTMLCollectionlet btns1=document.getElementsByTagName(button);document.getElementsByTagName(button)?document.getElementsByTagName(button);?true?动态 NodeListlet btns2=document.getElementsByName(btn);document.getElementsByName(btn)?document.getElementsByName(btn);?true?静态 NodeListlet btns3=document.querySelectorAll(button);document.querySelectorAll(button)?document.querySelectorAll(button);?false获取节点let p=document.getElementById(p);获取节点let p=document.getElementById(p);?获取第个节点 p.f?rstChild;获取节点let p=document.getElementById(p);?获取第个节点 p.f?rstChild;?获取最后个节点 p.lastChild;获取节点let p=document.getElementById(p);?获取第个节点 p.f?rstChild;?获取最后个节点 p.lastChild;?获取全部节点 p.childNodes;获取节点let p=document.getElementById(p);let div=document.querySelector(div);?获取第个节点 p.f?rstChild;?获取最后个节点 p.lastChild;?获取全部节点 p.childNodes;获取节点let p=document.getElementById(p);let div=document.querySelector(div);?获取第个节点 p.f?rstChild;?获取第个元素 div.f?rstElementChild;?获取最后个节点 p.lastChild;?获取全部节点 p.childNodes;获取节点let p=document.getElementById(p);let div=document.querySelector(div);?获取第个节点 p.f?rstChild;?获取第个元素 div.f?rstElementChild;?获取最后个节点 p.lastChild;?获取全部节点 p.childNodes;?获取最后个元素 p.lastElementChild;获取节点let p=document.getElementById(p);let div=document.querySelector(div);?获取第个节点 p.f?rstChild;?获取第个元素 div.f?rstElementChild;?获取最后个节点 p.lastChild;?获取全部节点 p.childNodes;?获取全部元素 p.children;?获取最后个元素 p.lastElementChild;获取节点获取节点let ul=document.querySelector(ul);获取节点let ul=document.querySelector(ul);?获取元素 ul.parentElement;获取节点let ul=document.querySelector(ul);let html=document.documentElement;?获取元素 ul.parentElement;获取节点let ul=document.querySelector(ul);let html=document.documentElement;?获取元素 ul.parentElement;?获取节点 html.parentNode;?document获取节点获取兄弟节点let btn3=document.getElementById(btn3);获取兄弟节点let btn3=document.getElementById(btn3);?获取前个兄弟节点 btn3.previousSibling;获取兄弟节点let btn3=document.getElementById(btn3);?获取前个兄弟节点 btn3.previousSibling;?获取前个兄弟元素 btn3.previousElementSibling;获取兄弟节点let btn3=document.getElementById(btn3);?获取前个兄弟节点 btn3.previousSibling;?获取后个兄弟节点 btn3.nextSibling;?获取前个兄弟元素 btn3.previousElementSibling;获取兄弟节点let btn3=document.getElementById(btn3);?获取前个兄弟节点 btn3.previousSibling;?获取后个兄弟节点 btn3.nextSibling;?获取前个兄弟元素 btn3.previousElementSibling;?获取后个兄弟元素 btn3.nextElementSibling;获取兄弟节点创建节点并插DOM创建节点并插DOMlet a=document.createElement(a);创建节点创建节点并插DOMlet a=document.createElement(a);a.textContent=link to ;创建节点设置本创建节点并插DOMlet a=document.createElement(a);a.textContent=link to ;a.href=https:?;?property 式 a.setAttribte(target,_blank);?attribute 式创建节点设置本设置属性创建节点并插DOMlet a=document.createElement(a);a.textContent=link to ;a.href=https:?;?property 式 a.setAttribte(target,_blank);?attribute 式a.style.cssText=color:red;?cssText 式 a.style.fontSize=40px;?属性式创建节点设置本设置属性设置样式创建节点并插DOMlet a=document.createElement(a);a.textContent=link to ;a.href=https:?;?property 式 a.setAttribte(target,_blank);?attribute 式a.style.cssText=color:red;?cssText 式 a.style.fontSize=40px;?属性式document.body.appendChild(a);创建节点设置本设置属性设置样式插 DOM批量插节点批量插节点?批量插入 DOMfor(let i=0;i 10;i?)let p=document.createElement(p);p.textContent=这是第$i+1 个;?执了10次，DOM重绘了10次 document.body.appendChild(p);批量插节点?批量插入 DOMfor(let i=0;i 10;i?)let p=document.createElement(p);p.textContent=这是第$i+1 个;?执了10次，DOM重绘了10次 document.body.appendChild(p);?利 DocumentFragmentlet frag=document.createDocumentFragment();for(let i=0;i 10;i?)let p=document.createElement(p);p.textContent=这是第$i+1 个;?没有实际插入 DOM，不触发重绘 frag.appendChild(p);?只插入次 DOM，触发次重绘document.body.appendChild(frag);?fragment 本并不会被插入 DOMconsole.log(frag.parentNode);?null?只会将节点全部插入DOM，并将 fragment 清空console.log(frag.children);?HTMLCollenction 批量插节点批量插节点?利 ParentNode.append()法（IE 不持）let arr=;for(let i=0;i 10;i?)let p=document.createElement(p);p.textContent=这是第$i+1 个;arr.push(p);document.body.append(?arr);?document.body.append.apply(document.body,arr);批量插节点?利 ParentNode.append()法（IE 不持）let arr=;for(let i=0;i 10;i?)let p=document.createElement(p);p.textContent=这是第$i+1 个;arr.push(p);document.body.append(?arr);?document.body.append.apply(document.body,arr);?ParentNode.append()还可以插入本信息let p=document.createElement(p);p.textContent=这是个段落;document.body.append(这是段落前的本,p,这是段落后的本);插到指定节点之前插到指定节点之前let p=document.getElementById(p);let text=document.createTextNode(这是段本);document.body.insertBefore(text,p);替换已有的节点替换已有的节点let p=document.getElementById(p);let text=document.createTextNode(这是段本);document.body.replaceChild(text,p);移除节点移除节点let p=document.getElementById(p);p.parentNode.removeChild(p);属性相关的其它操作属性相关的其它操作let p=document.getElementById(p);?属性判断console.log(p.hasAttribute(title);?falseconsole.log(p.hasAttribute(id);?true?属性获取console.log(p.getAttribute(title);?nullconsole.log(p.getAttribute(id);?p?属性移除 p.removeAttribute(id);事件的监听事件的监听let btn=document.getElementById(btn1);?写法1 btn.addEventListener(click,function(ev)console.log(点击位置：$ev.pageX,$ev.pageY),false?是否在捕获阶段触发);?写法2 btn.addEventListener(click,function(ev)console.log(点击位置：$ev.pageX,$ev.pageY),passive:false,?是否允许 ev.preventDefault()取消事件 capture:false,?是否在捕获阶段触发 once:false,?是否只触发次);事件的解除事件的解除let btn=document.getElementById(btn1);function handler(ev)console.log(点击位置：$ev.pageX,$ev.pageY)?事件绑定 btn.addEventListener(click,handler,false);?事件解除 btn.removeEventListener(click,handler,false);事件的解除let btn=document.getElementById(btn1);function handler(ev)console.log(点击位置：$ev.pageX,$ev.pageY)?事件绑定 btn.addEventListener(click,handler,false);?事件解除 btn.removeEventListener(click,handler,false);?注意1：解除事件的函数必须和绑定时指向同个 btn.removeEventListener(click,function handler(ev)console.log(点击位置：$ev.pageX,$ev.pageY),false);?解除失败事件的解除let btn=document.getElementById(btn1);function handler(ev)console.log(点击位置：$ev.pageX,$ev.pageY)?事件绑定 btn.addEventListener(click,handler,false);?事件解除 btn.removeEventListener(click,handler,false);?注意1：解除事件的函数必须和绑定时指向同个 btn.removeEventListener(click,function handler(ev)console.log(点击位置：$ev.pageX,$ev.pageY),false);?解除失败?注意2：尽可能地保证解除事件时第三个参数与绑定时相同 btn.removeEventListener(click,handler,true);?解除失败DOM事件的阶段DOM事件的阶段DOM事件分为三个阶段：捕获阶段标阶段冒泡阶段DOM事件的阶段DOM事件分为三个阶段：捕获阶段标阶段冒泡阶段事件代理事件代理利事件冒泡的原理事件代理let num=0;document.body.addEventListener(click,function(ev)switch(ev.target.id)case btn1:num?;break;case btn2:num?;break;case btn3:num*=2;break;case div:num=0;break;console.log(num);,false);利事件冒泡的原理冒泡事件与不冒泡事件并不是所有的事件都会冒泡冒泡事件与不冒泡事件并不是所有的事件都会冒泡冒泡的事件有：clickmousedownmouseup冒泡事件与不冒泡事件并不是所有的事件都会冒泡冒泡的事件有：clickmousedownmouseup不冒泡的事件有：mouseentermouseleave练习题：了解下还有哪些事件是冒泡的，哪些是不冒泡的冒泡事件与不冒泡事件并不是所有的事件都会冒泡冒泡的事件有：clickmousedownmouseup不冒泡的事件有：mouseentermouseleave