(7.1)--01_DOM基础为什么会衰败?.pdf
《(7.1)--01_DOM基础为什么会衰败?.pdf》由会员分享,可在线阅读,更多相关《(7.1)--01_DOM基础为什么会衰败?.pdf(140页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、双击此处编辑标题饶晓宇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推出
2、 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 Mod
3、el 草案Performance Timeline标准Resource Timing标准User Timing标准DOM的基本概念DOM的基本概念档树DOM的基本概念档树节点 NodeDOM的基本概念档树节点 Node元素 ElementHTMLElementHTMLDivElementHTMLAnchorElementSVGElementDOM的基本概念根节点和根元素每棵档树只会有个根节点和个根元素根节点不定是根元素DOM的基本概念根节点和根元素每棵档树只会有个根节点和个根元素根节点不定是根元素根元素 Root ElementDOM的基本概念根节点和根元素每棵档树只会有个根节点和个根元素根节
4、点不定是根元素根节点 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();?获取根元素funct
5、ion 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;(已废弃)
6、?获取 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.
7、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元素常法元素 Ele
8、ment元素常法HTMLElementHTMLElementHTMLElement继承Element 接HTMLElementHTMLElement继承Element 接HTMLElement的常属性HTMLElementHTMLElement继承Element 接HTMLElement的常属性EventEventEvent 的常属性EventEvent 的常属性EventEventEvent 的常法EventEvent 的常法03 操作DOM1)DOM的获取和创建2)DOM的修改3)事件监听DOM的获取DOM的获取?根据 id 获取document.getElementById(main);
9、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);?根据 class
10、Name 获取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 获取docu
11、ment.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 获取
12、document.getElementsByClassName(list);?根据 tagName 获取document.getElementsByTagName(li);?根据 name 获取document.getElementsByName(btn01);成功 返回标元素失败 返回null成功 返回 HTMLCollection失败 返回空的 HTMLCollectionDOM的获取?根据 id 获取document.getElementById(main);?根据 className 获取document.getElementsByClassName(list);?根据 tagName
13、 获取document.getElementsByTagName(li);?根据 name 获取document.getElementsByName(btn01);成功 返回标元素失败 返回null成功 返回 HTMLCollection失败 返回空的 HTMLCollection成功 返回 HTMLCollection失败 返回空的 HTMLCollectionDOM的获取?根据 id 获取document.getElementById(main);?根据 className 获取document.getElementsByClassName(list);?根据 tagName 获取docu
14、ment.getElementsByTagName(li);?根据 name 获取document.getElementsByName(btn01);成功 返回标元素失败 返回null成功 返回 HTMLCollection失败 返回空的 HTMLCollection成功 返回 HTMLCollection失败 返回空的 HTMLCollection成功 返回动态NodeList失败 返回空的动态 NodeList通过CSS选择器获取通过CSS选择器获取?根据 id 选择器获取document.querySelector(#main);通过CSS选择器获取?根据 id 选择器获取documen
15、t.querySelector(#main);?根据类选择器获取document.querySelectorAll(.list);通过CSS选择器获取?根据 id 选择器获取document.querySelector(#main);?根据类选择器获取document.querySelectorAll(.list);?根据标签选择器获取document.querySelectorAll(li);通过CSS选择器获取?根据 id 选择器获取document.querySelector(#main);?根据类选择器获取document.querySelectorAll(.list);?根据标签选择
16、器获取document.querySelectorAll(li);?根据属性选择器获取document.querySelectorAll(name=btn01);通过CSS选择器获取?根据 id 选择器获取document.querySelector(#main);?根据类选择器获取document.querySelectorAll(.list);?根据标签选择器获取document.querySelectorAll(li);?根据属性选择器获取document.querySelectorAll(name=btn01);?根据复杂的 CSS 选择器获取document.querySelecto
17、rAll(#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.querySe
18、lectorAll(CSS Selector);成功 第个命中选择器的元素失败 返回null成功 返回静态NodeList列表失败 返回空的静态 NodeListHTMLCollection vs NodeListHTMLCollection vs NodeList都是类数组,提供了 length属性和通过下标索引的功能,可以通过 Array.from等式转为数组HTMLCollection vs NodeList都是类数组,提供了 length属性和通过下标索引的功能,可以通过 Array.from等式转为数组HTMLCollection和动态 NodeList 的结果是实时更新的,静态 N
19、odeList不实时更新HTMLCollection vs NodeList都是类数组,提供了 length属性和通过下标索引的功能,可以通过 Array.from等式转为数组HTMLCollection和动态 NodeList 的结果是实时更新的,静态 NodeList不实时更新HTMLCollection可以通过下标、id、name进索引,NodeList只能通过下标进索引HTMLCollection vs NodeList都是类数组,提供了 length属性和通过下标索引的功能,可以通过 Array.from等式转为数组HTMLCollection和动态 NodeList 的结果是实时更
20、新的,静态 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)
21、;?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);?trueH
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 7.1 01 _DOM 基础 为什么 衰败
限制150内