PowerPoint 演示文稿

Size: px

Start display at page:

Download "PowerPoint 演示文稿"

衡吕
5 years ago
Views:

1 文档对象模型管理科学与工程学科耿方方

2 主要内容 Document 对象 DOM 概述访问 HTML 网页修改 HTML 网页

3 Document 对象 Document 对象的属性

4 Document 对象 Document 对象的方法

5 Document 对象 Document 对象的应用链接的颜色 1 alinkcolor 属性该属性用来获取或设置当链接被单击时显示的颜色 document.alinkcolor=setcolor 2 linkcolor 属性该属性用来获取或设置页面中未单击的链接的颜色 3 vlinkcolor 属性该属性用来获取或设置页面中单击过的链接的颜色

6 Document 对象 Document 对象的应用文档背景色和前景色 1 bgcolor 属性该属性用来获取或设置页面的背景颜色 document.bgcolor=setcolor 2 fgcolor 属性该属性用来获取或设置页面的前景颜色, 即页面中文字的颜色

7 Document 对象 Document 对象的应用 : <body> 背景自动变色 <script language="javascript"> var Arraycolor=new Array("#00FF66","#FFFF99","#99CCFF","#FFCCFF","#FFCC99","#00FFFF"); var n=0; function changecolors(){ n++; if (n==(arraycolor.length)) n=0; document.bgcolor = Arraycolor[n]; document.fgcolor=arraycolor[n+1]; settimeout("changecolors()",1000); } changecolors(); </script> </body>

8 Document 对象查看文档创建时间修改时间文档大小以及获取 URL 1 filecreatedate 属性该属性用来获取文档的创建日期 2 filemodifieddate 属性用来获取文档最后修改日期 3 lastmodified 属性用来获取文档最后修改的日期 4 filesize 属性用来获取文档的大小 5 URL 属性 document.url

9 Document 对象实例 01-02:<script> function openwin(){ var dw; dw=window.open("","","width=200,height=200"); dw.document.open(); dw.document.write("<html><head><title> 一个新的窗口 </title>"); dw.document.write("</head>"); dw.document.write("<body>"); dw.document.write("<h1> 这是一个新窗口 </h1><br>"); dw.document.write("<p> 这里有新的内容!</p>"); dw.document.write("</body></html>"); dw.document.close();} </script> <input type="button" value=" 打开一个新文档 " onclick="openwin();"/>

10 DOM 概述 DOM 定义文档对象模型简称 DOM,DOM 是一种 HTML/XHTML 页面的编程接口 (API) 借助 DOM 模型, 可以将结构化文档转换成 DOM 树实际上, 它是把我们的标记方式转换为 JavaScript 可以理解的格式简单的说就是 DOM 就像页面上的所有元素的一个地图使用它通过名字和元素来找到元素, 然后添加修改或删除元素及其内容通过 DOM 技术不仅可以操作 HTML 页面的内容, 包括添加元素修改元素属性删除元素等, 而且还能操作 HTML 页面的风格样式

11 DOM 概述 DOM 定义在 DOM 中,HTML 文档的层次结构被表示为一个树形结构树的根节点是一个表示当前 HTML 文档的 document 对象, 树的每个子节点表示 HTML 文档中的不同内容

12 DOM 概述节点类型在 DOM 树中有很多不同类型的节点主要包括文档节点元素节点属性节点和文本节点文档节点 :HTML 中每个元素属性以及文本都由它自己的 DOM 节点呈现这棵树的顶端是文档节点, 它呈现为整个页面当需要访问任何元素属性和文本节点时, 都需要通过文本节点进行导航元素节点 :HTML 元素描述了 HTML 页面的结构例如 <p> 表示段落 <ul> 表示列表属性节点 :HTML 元素的开始标签中可以包含若干属性, 这些属性再 DOM 树中形成属性节点文本节点 : 当访问元素节点时, 可以访问元素内部的文本, 这些文本保存再文本节点中

13 DOM 概述节点之间的关系节点之间的关系包括三种关系 : 父子关系兄弟关系和祖孙关系例如 :<html> <head> <title> 节点关系 </title> </head> <body> <ul style= none > <li>javascript</li> <li>jquery</li> </ul> </body> </html>

14 DOM 概述 DOM 级别 W3C 在 1998 年 10 月标准化了 DOM 第一级, 不仅定义了基本的接口, 其中还包含了所有 HTML 接口在 2000 年 11 月标准化了 DOM 第二级, 在第二级中不但对核心的接口升级, 还定义了使用文档事件和 CSS 样式表的标准的 API DOM1:W3C 规范专注于 HTML 文档和 XML 文档 DOM2: 对 DOM1 增加了样式表对象模型 DOM3: 对 DOM2 增加了内容模型 (DTD Schemas) 和文档验证

15 访问 HTML 网页通过 ID 访问 getelementbyid DOM 提供了一个名为 getelementbyid 的方法, 这个方法将返回一个与哪个有着给定 id 属性值的元素节点对应的对象 getelementbyid 是 document 对象特有的函数在脚本代码里, 函数名的后面必须跟有一对圆括号, 这对圆括号包含着函数的参数 getelementbyid 方法只有一个参数 : 想要获得的那个元素的 id 属性的值, 这个 id 属性值必须放在单引号或者双引号里, 其使用方法如下所示 :

16 访问 HTML 网页案例 1: 通过 id 获取元素, 主要代码 <body> <div id="page"> <h1 id="header">list King</h1> <h2>buy groceries</h2> <ul> < li i d = "o n e " c la s s = " h ot " > <e m > f re s h < /e m> figs</li> <li id="two" class="hot">pine nuts</li> </ul> </div> <script> var el = document.getelementbyid('one'); el.classname = 'cool'; </script> </body> </html>.hot {.cool { background-color: #d7666b; color: #fff; text-shadow: 2px 2px 1px #914141; border-top: 1px solid #e99295; border-bottom: 1px solid #914141;} background-color: #6cc0ac; color: #fff; text-shadow: 2px 2px 1px #3b6a5e; border-top: 1px solid #7ee0c9; border-bottom: 1px solid #3b6a5e;}

17 访问 HTML 网页以上是返回单一元素的方法, 使用下面方式可以返回多个元素, 即返回一个 NodeList NodeList 是一组元素的集合每个节点都有索引编号 ( 从 0 开始编号 ), 元素节点出现的顺序和它们在 HTML 页面中出现的顺序相同当 DOM 查询返回一个 NodeList 时, 可以 ; 从 NodeList 选择元素, 遍历 NodeList 中的每个元素, 然后针对每个元素节点执行相同的语句 length 属性表示 NodeList 中一共有多少项,item() 方法返回 NodeList 中特定的节点, 需要在小括号中制定所需要的索引编号还可以像数组那样, 获取 NodeList 中的一项

18 访问 HTML 网页通过元素标签访问 getelementsbytagname getelementsbytagname 方法返回一个对象数组, 每个对象分别对应着文档里有着给定标签的一个元素类似于 getelementbyid, 这个方法也是只有一个参数的函数, 它的参数是标签的名字, 其使用方法如下所示 :

19 访问 HTML 网页通过类名访问 getelementsbyclassname HTML5 DOM 中新增了一个方法 :getelementsbyclassname 这个方法能够使我们通过 class 属性中的类名来访问元素不过由于这是一个新增方法, 某些 DOM 实现中可能还未支持此方法的解析, 其在 Internet Explorer 5,6,7,8 中无效, 因此在使用时要注意其兼容性 : getelementsbyclassname 方法与 getelementsbytagname 方法相似, 也只接受一个参数, 就是类名, 其使用方法如下所示 :

20 访问 HTML 网页 item() 方法 : var elements=document.getelementsbyclassname( hot ); if(elements.length>=1){ var firstitem=elements.item(0); } 数组方法 var elements=document.getelementsbyclassname( hot ); if(elements.length>=1){ var firstitem=elements[0]; }

21 访问 HTML 网页遍历 NodeList queryselector() 方法返回文档中匹配指定 CSS 选择器的一个元素语法 :document.queryselector(css selectors) 例如 :document.queryselector("p"); document.queryselector(".example"); document.queryselectot( #example ); document.queryselector("p.example"); document.queryselector("a[target]");

22 访问 HTML 网页遍历 NodeList queryselector() 方法返回文档中匹配指定 CSS 选择器的多个元素语法 :document.queryselectorall(css selectors) 遍历 NodeList 使其具备相同的操作例如 :var hotitems=document.queryselectorall('li.hot'); if(hotitems.length>0){ for(var i=0;i<hotitems.length;i++){ hotitems[i].classname='cool'; } }

23 访问 HTML 网页遍历 DOM 得到一个元素节点后, 可以使用如下 5 个属性来找到其他相关的元素, 这种方式被称为遍历 DOM parentnode: 该属性在 HTML 中找到包含该元素的元素节点 ( 或其父元素节点 ) previoussibling 和 nextsibling 这两个属性找到当前节点的前一个或后一个兄弟节点 firstchild 和 lastchild 这两个属性找到当前元素的第一个或最后一个子节点使用这些属性可能会遇到一些麻烦, 例如有些浏览器会在元素之间添加一个文本节点, 不管它们之间是不是真的有空白解决这个方法最受欢迎的方法就是使用像 jquery 这样的 JavaScript 库, 可以解决因为浏览器之间的不一致性

24 访问 HTML 网页前后兄弟节点案例 2: < u l > < l i i d = " o n e " class="hot"><em>fresh</em> figs</li><li id="two" class="hot">pine nuts</li><li i d = " t h r e e" c l a s s = " h o t " > h o n e y < / l i > < l i id="four">balsamic vinegar</li></ul> var startitem = document.getelementbyid('two'); var previtem = startitem.previoussibling; var nextitem = startitem.nextsibling; // Change the values of the siblings' class attributes previtem.classname = 'complete'; nextitem.classname = 'cool';

25 修改 HTML 网页获取和更新元素内容可以使用如下方法来操作元素的内容 : 导航到文本节点这种方式在元素只包含文本不包含其他元素时最好用在一个元素导航到它的文本节点后, 使用 nodevalue 访问文字使用包含元素这种方法可以让你同时获取到其文本节点和子元素当操作一个元素节点时, 这个元素可能包含标签可以选择需要获取 / 更新标签, 或是获取 / 更新文本 innerhtml: 获取 / 设置文本和标签 textcontent: 仅获取 / 设置文本 innertext: 仅获取 / 设置文本

26 修改 HTML 网页获取和更新元素内容例如 nodevalue 的使用 : <li id= one ><em>fresh</em>figs</li> document.getelementbyid( one ).firstchild.nextsibling.nova lue

27 修改 HTML 网页获取和更新元素内容案例 3: 使用 nodevalue 更新文本节点内容 : <body> <div id="page"> <h1 id="header">list</h1> <h2>buy groceries</h2> <ul> <li id="one" class="hot"><em>fresh</em> figs</li> <script> var itemtwo = document.getelementbyid('two'); var eltext = itemtwo.firstchild.nodevalue; eltext = eltext.replace('pine nuts', 'kale'); itemtwo.firstchild.nodevalue = eltext; </script> <li id="two" class="hot">pine nuts</li> <li id="three" class="hot">honey</li> <li id="four">balsamic vinegar</li> </ul> </div> </body>

28 修改 HTML 网页获取和更新元素内容案例 4:innerText 与 TextContent: <body> <div id="page"> <h1 id="header">list</h1> <h2>buy groceries</h2> <ul> <li id="one" class="hot"><em>fresh</em> figs</li> <li id="two" class="hot">pine nuts</li> <li id="three" class="hot">honey</li> <li id="four">balsamic vinegar</li> </ul> <script> var firstitem = document.getelementbyid('one'); var showtextcontent = firstitem.textcontent; var showinnertext = firstitem.innertext; var msg = '<p>textcontent: ' + showtextcontent + '</p>'; msg += '<p>innertext: ' + showinnertext + '</p>'; var el = document.getelementbyid('scriptresults'); el.innerhtml = msg; firstitem.textcontent = 'sourdough bread'; </script> <div id="scriptresults"></div> </div> </body>

29 修改 HTML 网页获取和更新元素内容 innertext 与 TextContent 的区别 : innertext: 支持情况, 虽然大多数浏览器厂商都接受这个属性, 不过 Firefox 不支持它, 因为 innertext 不属于任何标准遵从 CSS, 它不会返回任何被 CSS 隐藏的内容性能, 因为 innertext 属性需要考虑到布局规则来判断元素的可见性, 它在获取文本内容时的速度比 textcontent 要慢在 IE8 或更早地 IE 中,textContent 属性不起作用

30 修改 HTML 网页添加或移除 HTML 内容有两种不同的方法来添加和移除 DOM 树种的内容 :innerhtml 属性和 DOM 操作 innerhtml 属性可以获取或修改元素的内容, 包括其中的所有子节点例如 <li id= one ><em>fresh</em>figs</li> 获取内容 : var elcontent=document.getelementbyid( one ).innerhtml 则 elcontent 变量应包含如下字符串 :<em>fresh</em> figs 设置内容 : document.getelementbyid( one ).innerhtml=elcontent 注意 : 当使用 innerhtml 添加新内容时, 需要注意如果缺失关闭标签的话, 可能会影响整个页面的设计更坏的情况是, 如果使用 innerhtml 把用户提供的内容添加到一个页面上, 他们可能会添加恶意内容

31 修改 HTML 网页添加或移除 HTML 内容 DOM 操作 - 添加元素如果我们需要向 HTML 中添加新元素, 那么我们首先便需要创建该元素, 然后向已存在的元素追加创建的新元素具体涉及以下三个步骤 : 1 创建元素 createelement() 2 设置内容 createtextnode() 3 把它添加到 DOM 中 appendchild()

32 修改 HTML 网页添加或移除 HTML 内容 DOM 操作 - 添加元素首先创建一个新的元素, 比如 <p>, 其代码如下所示 : 如果需要向 <p> 元素中添加文本内容, 必须先创建一个文本节点, 如以下代码所示 : 然后将该文本节点追加到刚开始创建的 <p> 元素中, 代码如下所示 : 最后必须向一个已有的元素追加这个新建的元素, 其实现代码如下所示 :

33 修改 HTML 网页添加或移除 HTML 内容案例 5: <div id="page"> <h1 id="header">list</h1> <h2>buy groceries</h2> <ul id="todo"><li id="one" class="hot"><em>fresh</em> figs</li><li id="two" class="hot">pine nuts</li><li id="three" class="hot">honey</li><li id="four">balsamic vinegar</li></ul> <script> var newel = document.createelement('li'); var newtext = document.createtextnode('quinoa'); newel.appendchild(newtext); var position = document.getelementsbytagname('ul')[0]; position.appendchild(newel); </script> </div> </body>

34 修改 HTML 网页添加或移除 HTML 内容创建多个节点创建多个节点使用循环语句, 利用 createelement() 方法和 createtextnode() 方法生成新元素并生成文本节点, 最用使用 appendchild() 方法将创建的新节点添加到页面上例如 5-01: <body onload="dc()"> <script> function dc(){ var atext=[" 第一个节点内容 "," 第二个节点内容 "," 第三个节点内容 "," 第四个节点内容 "]; for (i=0;i<atext.length;i++){ var ce=document.createelement("p"); var ctext=document.createtextnode(atext[i]); ce.appendchild(ctext); document.body.appendchild(ce); } } </script> </body>

35 修改 HTML 网页添加或移除 HTML 内容创建多个节点由于每次添加新的节点时都会刷新页面, 通过循环语句添加节点的方法会使浏览器显得十分缓慢这里可以通过使用 createdocumentfragment() 方法来解决这个问题例如 5-02: <body onload="dc()"> <script> function dc(){ var atext=[" 第一个节点内容 "," 第二个节点内容 "," 第三个节点内容 "," 第四个节点内容 "]; var cdf=document.createdocumentfragment();// 创建文件碎片节点 for(var i=0;i<atext.length;i++){// 遍历节点 var ce=document.createelement("b"); var cb=document.createelement("br"); var ctext=document.createtextnode(atext[i]); ce.appendchild(ctext); cdf.appendchild(ce); cdf.appendchild(cb); } document.body.appendchild(cdf); } </script> </body>

36 修改 HTML 网页添加或移除 HTML 内容节点的插入和追加插入节点通过使用 insertbefore() 方法来实现 insertbefore() 方法将新的子节点添加到当前节点的前面语法 : Obj.insertBefore(new,ref) New: 表示新的子节点 ; Ref: 指定一个节点, 在这个节点前插入新的节点

37 修改 HTML 网页添加或移除 HTML 内容节点的复制复制节点可以使用 clonenode() 方法来实现语法 : Obj.cloneNode(deep)

38 修改 HTML 网页添加或移除 HTML 内容案例 :5-03: <script language="javascript">  </script>

39 修改 HTML 网页添加或移除 HTML 内容 DOM 操作 - 删除元素如果需要在 HTML 中删除元素, 那么我们首先便需要获得该元素, 然后得到该元素的父元素, 最后通过 removechild 方法删除该元素, 其实现流程如下所示 : 获得该元素, 比如要获得 id 属性值为 div1 的元素, 其代码如下所示 : 获得该元素的父元素, 代码如下所示 : 从父元素中删除该元素

40 修改 HTML 网页添加或移除 HTML 内容案例 6: <body> <div id="page"> <h1 id="header">list</h1> <h2>buy groceries</h2> var removeel = document.getelementsbytagname('li')[3]; var containerel = document.getelementsbytagname('ul')[0]; containerel.removechild(removeel); <ul> < l i i d = " o n e " class="hot"><em>fresh</em> figs</li> nuts</li> <li id="two" class="hot">pine < l i i d = " t h r e e " class="hot">honey</li> <li id="four">balsamic vinegar</li> </body> </ul> </div>

41 修改 HTML 网页添加或移除 HTML 内容 DOM 操作 - 属性操作得到一个元素节点后, 可以在这个元素上使用其他一些对象属性和方法来获取和修改它的 HTML 属性 getattribute 方法就是专门用来获取元素属性的, 相应的我们也可以使用 setattribute 方法来更改元素节点的值 getattribute 是一个函数, 它只有一个参数即 : 查询的属性的名称, 其使用方法如下所示 :

42 修改 HTML 网页添加或移除 HTML 内容 DOM 操作 - 属性操作 hasattribute() 检查元素节点是否包含特定属性 setattribute() 方法是用来进行设置属性的, 它允许我们对属性节点的值做出修改, 与 getattribute 方法一样, 它也是只能用于元素节点, 其使用方法如下所示 : removeattribute() 从元素移除属性属性 : classname 获取或设置 class 属性的值 id 获取或设置 id 属性的值

43 修改 HTML 网页添加或移除 HTML 内容案例 7: 获取属性 <div id="page"> <h1 id="header">list</h1> <h2>buy groceries</h2> <ul> < l i i d = " o n e " class="hot"><em>fresh</em> figs</li> var firstitem = document.getelementbyid('one'); if (firstitem.hasattribute('class')) { var attr = firstitem.getattribute('class'); var el = document.getelementbyid('scriptresults'); el.innerhtml = '<p>the first item has a class name: ' + attr + '</p>';} nuts</li> <li id="two" class="hot">pine < l i i d = " t h r e e " class="hot">honey</li> < l i i d = " f o u r " > b a l s a m i c vinegar</li> </ul> <div id="scriptresults"></div> </div>

44 修改 HTML 网页添加或移除 HTML 内容案例 8: 更新和创建属性 <ul> <li id="one" class="hot"><em>fresh</em> figs</li> <li id="two" class="hot">pine nuts</li> <li id="three" class="hot">honey</li> <li id="four">balsamic vinegar</li> </ul> var firstitem = document.getelementbyid('one'); // Get the first item firstitem.classname = 'complete'; // Change its class attribute <style>.hot{color:red;}.cool{color:blue;} var fourthitem = document.getelementsbytagname('li').item(3); // Get fourth item // NOTE: The following line should say fourthitem (not el2) fourthitem.setattribute('class', 'cool');.complete{color:gray;} </style>

45 修改 HTML 网页添加或移除 HTML 内容案例 9: 综合示例 html: <body> <div id="page"> <h1 id="header">list</h1> <h2>buy groceries</h2> CSS: <style>.cool{ color:blue; } span{ color:red; } </style> <ul> < l i i d = " o n e " > < e m > f r e s h < / e m > figs</li> <li id="two">pine nuts</li> <li id="three">honey</li> < l i i d = " f o u r " > b a l s a m i c vinegar</li></ul> </body> </div>

46 修改 HTML 网页添加或移除 HTML 内容案例 9: 综合示例 JS: var list = document.getelementsbytagname('ul')[0]; var newitemlast = document.createelement('li'); var ne w Te x tl a s t = do c u m en t.c r ea t e Te x tno d e ( 'c r ea m ') ; newitemlast. a p p e n d C h i l d ( n e w T e x t L a s t ) ; l i s t. a p p e n d C h i l d ( n e w I t e m L a s t ) ; // Add element end of list var newitemfirst = document. createelement('li'); // Create element var ne w Te x tf i r st = d o c u me n t.cre a t et e xtn o d e (' k al e ') ; // Create text node newitemfirst. a p p e n d C h i l d ( n e w T e x t F i r s t ) ; // Add text node to element list. i n s e r t B e f o r e ( n e w I t e m F i r s t, list. firstchild); // Add element to list var listitems = document. queryselectorall('li'); // All <li> elements // ADD A CLASS OF COOL TO ALL LIST ITEMS var i; // Counter variable for (i = 0; i < listitems.length; i++) {listitems[i].classname = 'cool';} // ADD NUMBER OF ITEMS IN THE LIST TO THE HEADING var heading = document.queryselector('h2'); // h2 element var headingtext = heading.firstchild.nodevalue; // h2 text var totalitems = listitems.length; // No. of <li> elements var newheading = headingtext + '<span>' + totalitems + '</span>'; // Content heading.innerhtml = newheading;

47 想一想? 1 总结获取网页元素的方法, 以及网页元素的操作方法 ; 2 使用 DOM 编程, 在网页上显示一个列表, 例如 : <li> 星期一 </li> <li> 星期二 </li> <li> 星期三 </li> <li> 星期四 </li> <li> 星期五 </li> <li> 星期六 </li> <li> 星期日 </li> 统计项目数, 也显示至网页

05 01 accordion UI containers 03 Accordion accordion UI accordion 54

jquery UI plugin Accordion 05 01 accordion UI containers 03 Accordion accordion UI accordion 54 05 jquery UI plugin 3-1