javascript-DOM 15章

1、DOM 李晓明 TelDAY 01 TEL教学内容： 日期函数、时间戳、系统日期、定时器 教学目标： 让学生明白时间函数用法 教学难点： 时间戳、算法、定时器,DAY 01 （1-1）,DOM简介,DOM = Document Object Model(文档对象模型)，根据W3C DOM规范，DOM是由html与xml的应用编程接口，DOM将整个页面映射为一个由层次节点组成的文件。,DAY 01 TELDAY 01 （1-1）,DOM对象,js把浏览器、网页文档及网页文档中的html元素都用相应的内置对象来表示，这些

2、对象与对象之间的层次关系称为DOM，现在所说的为 html dom。,DAY 01 TELHTML DOM （文档对象模型） 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树。 HTML DOM 树,DAY 01 TELDAY 01 （1-1）,结构,DAY 01 TEL作用,通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素 JavaSc

3、ript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应,DAY 01 TEL常用方法： 1、如果找到会得到元素类型如div得到的是HTMLDivElement，如果找不到会得到null； 2、在查找元素时必须等html内容加载完毕再获取元素才能正确获取，这时可以用window.onload方法;ie5以下不支持,DAY 01 TEL一、获取元素,3、元素获取： 1）、tagName得到标签的名称，注意大小写之分；获取li，就可以得到一个数组

4、集合 1、id获取 var li=document.getElementsByName(li); alert(li0) /弹出是个li节点也可以 alert(li.item(0); /意义同上一样 alert(li0.innerHTML) /值 alert(li0.tagName) /标签名 2、标签名获取 A）alert(document.getElementsByTagName(body)0) /结果：object HTMLBodyElemen B）获取所有标签： alert(document.getElementsByTagName(*).length); /结果：获取文档所有元素,DA

5、Y 01 TELDAY 01 （1-1）,C）如果有个div有个name为abc也可以这样获取，但注意ie兼容，因为name不是div的合法属性，ie要忽略掉了这属性，不合法尽量不要使用。 alert(document.getElementsByName(abc)0.innerHTML) D）、获取属性：div的name属性为abc，class为aa，如下可以获取到aa，但获取不到自定义属性（就是自己瞎定的属性），看看ie是否支持 alert(document.getElementsByName(abc)0.className) innerText:元素纯文本，如果里

6、面有标签页不能识别。,DAY 01 TELDAY 01 （1-1）,4、属性获取：如id、class、style、title等 getAttribute属性: ss alert(document.getElementById(box).getAttribute(class) ss /获取样式 alert(document.getElementById(box).getAttribute(style) /非ie返回是style字符串，ie返回是个对象，兼容问题注意,DAY 01 TELDAY 01 （1-1）,自定义属性值 ss alert(d

7、ocument.getElementById(box).getAttribute(bb),DAY 01 TELDAY 01 （1-1）,获取class名 ie方法： alert(document.getElementById(box).getAttribute(classname) 非ie方法 - alert(document.getElementById(box).getAttribute(class),DAY 01 TELDAY 01 （1-1）,怎样做兼容 alert(document.getElementById(box).class

8、Name) /其实都兼容,如果就用attribute那么就可以了,没有必要写兼容，但如果就想用attribute做兼容怎么写。,DAY 01 TELDAY 01 （1-1）,if(document.getElementById(box).getAttribute(classname)=null) /if ie不支持这个属性就用非ie的方法获取 alert(document.getElementById(box).getAttribute(class) else /ie的方法获取document.getElementById(box).getAttribute(clas

9、sname) ,DAY 01 TELDAY 01 （1-1）,5、setAttribute：设置属性（方法1） ss document.getElementById(box).setAttribute(style,color: blue); document.getElementById(box).setAttribute(title,haha); /ie7以下style和onclick没有效果兼容不好,DAY 01 TELDAY 01 （1-1）,setAttribute：设置属性（方法2） alert(document.getElemen

10、tById(box).id); alert(document.getElementById(box).className); alert(document.getElementById(box).title) ,DAY 01 TELDAY 01 （1-1）,获取设置节点属性,身上的方法的 /获取属性 alert(document.getElementById(box).getAttribute(id); alert(document.getElementById(box).getAttribute(classname); /设置属性 document.getEleme

11、ntById(box).setAttribute(title,盒子); alert(document.getElementById(box).getAttribute(title) ,DAY 01 TELDAY 01 （1-1）,6、removeAttribute移除属性 document.getElementById(box).removeAttribute(title),DAY 01 TELDAY 01 （1-1）,移除属性,身上的方法的 document.getElementById(box).removeAttribute(title

12、); alert(document.getElementById(box).getAttribute(title); ,DAY 01 TELDAY 01 （1-1）,7、getAttribute获取属性 document.getElementById(box).getAttribute(title),DAY 01 TELDAY 01 （1-1）,获取设置节点属性（可修改）,身上的方法的 /获取属性 alert(document.getElementById(box).getAttribute(id); alert(document.getEl

13、ementById(box).getAttribute(classname); /设置属性 document.getElementById(box).setAttribute(title,盒子); alert(document.getElementById(box).getAttribute(title) ,DAY 01 TELDAY 01 （1-1）,节点属性（可修改）, alert(document.getElementById(box).id); alert(document.getElementById(box).className); alert(docum

14、ent.getElementById(box).title) ,DAY 01 TELDAY 01 （1-1）,其他方法,DAY 01 TELDAY 01 （1-1）,查找html标签： document.documentElement 查找body标签 document.body 查找 document.doctype,1、HTML、BODY、DOCTYPE标签获取,DAY 01 TELDAY 01 （1-1）,2、文档标题： document.title、document.title=value,DAY 01 TE

15、LDAY 01 （1-1）,3、item方法：,语法： nodelist.item(index) item() 方法节点列表中位于指定索引的节点： document.body.childNodes.item(0); document.body.childNodes0;,DAY 01 TELDAY 01 （1-1）,item案例, alert(document.getElementsByTagName(img)0.src) alert(document.getElementsByTagName(img).item(0).src) ,DAY 01

16、 TELDAY 01 （1-1）,4、nameItem,namedItem() 方法从集合中取回带有指定名称的节点或元素 alert(document.getElementsByTagName(img).namedItem(imgs).src) ,DAY 01 TELDAY 01 （1-1）,5、DOM API,querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。 区别： 1、querySelector只返回匹配的第一个元素，如果没

17、有匹配项，返回null。 2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。 3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。 这两个方法都可以接受三种类型的参数：id(#)、class(.)、标签，很像jquery的选择器。,DAY 01 TELid=demo 的 p 元素 id=demo 的 p 元素 点击按钮修改过第一个 id=demo 的 p元素内容 点我 function myFunction() document.querySelector(#demo).inne

18、rHTML = Hello World!; ,DAY 01 TELquerySelectorAll, 123 var test=document.querySelector(#test); var span = test.querySelectorAll(div span); alert(span0.innerHTML); ,DAY 01 TEL多种获取方法,前端布局： ,DAY 01 TELDAY 01 （1-1）,/id /alert(document.getElementsByName(user)0.value

19、) /alert(document.getElementsByClassName(user)0.value)/ie不支持 /alert(document.getElementsByTagName(input)0.value) /ie、谷歌、火狐支持 /alert(document.forms0.children0.value) /alert(document.forms0.childNodes1.value); /alert(document.forms00.value); /alert(document.forms0.user.value);,DAY 01 TELD

20、AY 01 （1-1）,/alert(abc.user.value) /alert(abc0.value); /alert(abcuser.value) /alert(document.getElementsByName(“user”).item(0).value); alert(document.getElementsByTagName(input).namedItem(user).value) alert(document.querySelectorAll(input)0.value) alert(document.querySelectorAll(input)0.value) alert

21、(document.querySelector(.user).value);,DAY 01 TELDAY 01 （1-1）,6、节点名和标签名, alert(document.getElementById(imgs).nodeName=document.getElementById(imgs).tagName) /true ,DAY 01 TELDAY 01 （1-1）,innerHTML、outerHTML、innerText,outerHTML可以用来更改或获取元素内所有的html和文本内容，包含引用该方法元素自身的标签 innerHTM

22、L是用来获取元素内的html内容和文本 innerText只获取元素内的文本内容，html标签将被忽略,DAY 01 TELDAY 01 （1-1）,p标签Hello World! var html = document.getElementById(p1).outerHTML; alert(html); /p标签Hello World! var html=document.getElementById(p1).innerHTML; alert(html) /p标签Hello World! var html=document.getElementById(p1) /a

23、lert(html.textContent); ,DAY 01 TELDAY 01 （1-1）,scrollIntoView,scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果 alignWithTop为true-或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐。,DAY 01 TELdasdasd sadasdasd function onc () var dd = document.getElementById(nn).scrollIntoView(true)

24、; /将这个元素到顶部来浏览器窗口的顶部来显示 /var dd = document.getElementById(nn).scrollIntoView(false); /将这个元素到顶部来浏览器窗口的底部来显示 ,DAY 01 TEL案例-选项卡,布局： 标签1 标签2 标签3 内容1,DAY 01 TELDAY 01 （1-1）,样式： ul padding: 0; margin: 0; ul li list-style: none; float: left; width:60px; height: 30px; border: 1px #

25、fff solid;background: #999; .bor border-bottom: 1px #666 solid; background: #666; .div clear: both; background: #666; width: 400px; height: 200px; ,DAY 01 TELDAY 01 （1-1）,function tab(val) if(val=s) document.getElementById(s).className=bor; document.getElementById(f).removeAttribute(cla

26、ss); document.getElementById(t).removeAttribute(class); document.getElementById(div).innerHTML=内容2 if(val=t) document.getElementById(t).className=bor; document.getElementById(s).removeAttribute(class); document.getElementById(f).removeAttribute(class); document.getElementById(div).innerHTML=内容3 if(v

27、al=f) document.getElementById(f).className=bor; document.getElementById(s).removeAttribute(class); document.getElementById(t).removeAttribute(class); document.getElementById(div).innerHTML=内容1 ,DAY 01 TELDAY 01 （1-1）,DAY 01 TEL作业： 动态标题栏,DAY 01 （1-1）,二、DOM元素节点,各种DOM节点,DAY 01

28、 TELDAY 01 （2-1）,DOM有三种节点： 1、元素节点：如div p之类 2、文本节点:元素里的纯文本 3、属性节点：标签里的属性,DAY 01 TEL1、node节点类型： 1)、节点类型 nodeName nodeType nodeValue 元素 元素名称 1 null 属性 属性名称 2 属性名 文本 #text 3 文本内容不含html,DAY 01 TEL哈哈！ 哈哈1哈哈呵呵！ var box=document.getElementById(box); var box1=document.g

29、etElementById(box1); /alert(box.nodeName) /节点元素标签名等价于box.tagName /alert(box.nodeType) /1,元素节点 alert(box1.nodeValue) /null,nodeValue只是把指针定位到div这个标签上，不包含其中内容，要想输出内容用innerHTML,DAY 01 TELchildNode: /alert(box1.childNodes) /object NodeList是个集合，返回当前元素所有子节点，既然是集合，那就有长度 /alert(box1.childNodes.l

30、ength); /哈哈1哈哈呵呵！,一共三个节点 /alert(box1.childNodes0) /object Text,是个文本节点 /alert(box1.childNodes0.nodeType) /3，文本节点是3 /alert(box1.childNodes0.nodeValue) /文本节点内容 /alert(box1.childNodes0.innerHTML) /undefined,为什么呢，因为box1.childNodes0已经指向了第一个节点，这时再弹出这个节点里面的内容，那就没有内容了 /alert(box1.childNodes0.nodeName) /#text

31、,文本节点没有标签名,DAY 01 TEL案例：输出文本节点和元素节点 /*for(i=0;ibox1.childNodes.length;i+) if(box1.childNodesi.nodeType=1) alert(元素节点:+box1.childNodesi.nodeName) else alert(文本节点:+box1.childNodesi.nodeValue) */,DAY 01 TEL案例：赋值 /box1.childNodes0.nodeValue=aaa /box1.nodeValue=bbbb /错误的 /box1.i

32、nnerHTML=bbb /可以赋值也可以赋值标签 /box1.innerHTML=bbbhah; /标签有效 box1.childNodes0.nodeValue=“bbbhah” /标签无效,DAY 01 TEL2、节点操作： 1、childNode获取当前节点所有子节点 2、firstChild获取当前元素第一个节点 3、lastChild：获取当前元素最后一个节点 4、ownerDocument:获取当前元素根节点，相当于document 5、parentNode获取当前节点的父节点 6、previousSibling获取当前节点前一个同级节点 7、nextS

33、ibling获取当前节点的最后一个同级节点 8、attributes获取当前元素节点的所有属性 9、 innerHTML文本节点是个整体，层次文本节点*/ /alert(box.innerHTML) /获取的是文本整体：哈哈1哈哈 /另外innerhtml也可以赋值，里面可以赋值标签，标签有效,DAY 01 TEL第一个和最后一个节点 alert(box1.childNodes0.nodeValue); /第一个节点 alert(box1.childNodesbox1.childNodes.length-1.nodeValue);/最后一个节点*/ 这样比较麻烦，第一

34、个节点还可以，可是最后一个节点就不行了，太麻烦了 /alert(box1.firstChild.nodeValue); /第一个节点 /alert(box1.lastChild.nodeValue); /最后一个节点,DAY 01 TELownerDocument根节点-不经常使用 /*alert(box1.ownerDocument); /object HTMLDocument得到是元素的根节点 alert(document);/和上面结果一样，这个根节点不是html，是文档节点 alert(box1.ownerDocument=document); /true*/

35、 alert(box1.ownerDocument.nodeName) /节点名称#document alert(box1.ownerDocument.nodeType) /节点类型9，文档根 9,DAY 01 TEL父子节点层级操作 alert(box1.parentNode); /HTMLBodyElement alert(box1.firstChild.nextSibling.nodeType); /元素节点类型-下一个 alert(box1.firstChild.nextSibling.nodeName) /em,元素节点名称-下一个 alert(box1.l

36、astChild.previousSibling.nodeName) /em-上一个,DAY 01 TEL子节点,123 var l=document.getElementById(ul).getElementsByTagName(li); for(i=0;i,DAY 01 TEL 糖醋排骨粉蒸肉板栗烧鸡麻婆豆腐 window.onload=function() var oMyDearFood = document.getElementById(myDearFood); /alert(oMyDearFood.nextSibling.nodeT

37、ype); alert(oMyDearFood.nextSibling.id) oMyDearFood.nextSibling.style.color=red; oMyDearFood.previousSibling.style.color=blue; oMyDearFood.parentNode.style.backgroundColor=yellow; ,DAY 01 TEL属性节点操作 /alert(box1.attributes.length); /3属性的个数 /alert(box1.attributes0.nodeType); /属性节点类型值 /aler

38、t(box1.attributes0.nodeValue); /0是第一个 /alert(box1.attributes0.nodeName); /title,对应的节点属性名称 /*如果只想知道某个属性的值怎么办两种方法*/ alert(box1.attributestitle.nodeValue); /b alert(box1.attributes.getNamedItem(title).nodeValue) /b,DAY 01 TEL创建节点-布局 1 2 3 span window.onload=function() var box=document.getE

39、lementById(box2); alert(box.childNodes.length); /7,前后空格加起来共7个,没有忽略空字符 ,DAY 01 TEL创建节点, var obj=document.createElement(input) obj.type=button; obj.value=button; document.body.appendChild(obj); ,DAY 01 TELDAY 01 （1-1）, var board = document.getElementById(board); var e2 = docu

40、ment.createElement(select); e2.options0 = new Option(加载项1, ); e2.options1 = new Option(加载项2, ); e2.size = 2; var object = board.appendChild(e2); ,DAY 01 TELDAY 01 （1-1）, var board = document.getElementById(board); var e3 = document.createElement(input); e3.setAttribute(type, text); e3.s

41、etAttribute(name, q); e3.setAttribute(value, 使用setAttribute); e3.setAttribute(onclick, javascript:alert(This is a test!); /ie不支持 var object = board.appendChild(e3); ,DAY 01 TELDAY 01 （1-1）,DAY 01 TEL window.onload=function () var oBtn=document.getElementById(btn1); var oTxt

42、=document.getElementById(txt1); var oUl=document.getElementById(ul1); oBtn.onclick=function () var oLi=document.createElement(li); var oText = document.createTextNode(oTxt.value); oLi.appendChild(oText); oUl.appendChild(oLi); ,创建节点-js部分 /*在后面添加节点*/ /*var elements=document.getElementById(box2); var p

43、=document.createElement(p);/这是文档中并没有这个节点,只是放到了内存中 elements.appendChild(p) /*添加到节点的末尾上，但是没有内容*/ /var text=document.createTextNode(4); /创建文本节点*/ /p.appendChild(text) /添加到p /document.getElementsByTagName(body)0.appendChild(text); /document.getElementsByTagName(body)0.appendChild(p).appendChild(text),DA

44、Y 01 TEL/*在前面添加节点*/ /*var elements=document.getElementById(box2); var p=document.createElement(p);/这是文档中并没有这个节点,只是放到了内存中 elements.parentNode.insertBefore(p,elements); /要想在div前面添加节点，必须先将指针移动到盒子前面，然后再指定在谁的前面插入内容：p,elements指的是在div前面插入p标签 var text=document.createTextNode(5); /创建文本节点 p.appen

45、dChild(text) /添加到p*/,DAY 01 TELvar elements=document.getElementById(“box2”); var p=document.createElement(“p”);/这是文档中并没有这个节点,只是放到了内存中 elements.parentNode.insertBefore(p,elements); /要想在div前面添加节点，必须先将指针移动到盒子前面，然后再指定在谁的前面插入内容：p,elements指的是在div前面插入p标签 var text=document.createTextNode(“5”);

46、/创建文本节点 p.appendChild(text) /添加到p*/ /*在后面添加节点*/ var elements=document.getElementById(“box2”); var p=document.createElement(“p”);/这是文档中并没有这个节点,只是放到了内存中 elements.parentNode.appendChild(p);,DAY 01 TEL/要想在div前面添加节点，必须先将指针移动到盒子前面，然后再指定在谁的后面插入内容：p,如果有span就添加到了span后面，如果没有span则添加到了div后面 /elemen

47、ts.appendChild(p); /如果没有父级，则添加到了div节点的内部后面 var text=document.createTextNode(“5”); /创建文本节点 p.appendChild(text) /添加到p 非ie添加 var input=document.createElement(input); input.setAttribute(type,radio); input.setAttribute(name,sex); var body=document.getElementsByTagName(body)0; body.appendChild(input),DAY

48、01 TELie7以下兼容模式添加： var input=document.createElement(); var body=document.getElementsByTagName(body)0; body.appendChild(input),DAY 01 TEL案例评论：前端布局： 今天天气真好，没有太阳还不下雨，不出汉！ 样式： *margin:0;padding:0; bodywidth:900px;margin:0 auto;background:#F0FFD2; #div1width:900px;height:60px;bo

49、rder:1px solid #9C0;background:#fff ulmin-height:30px;max-height:100px;overflow:auto;margin:10px 0px;border:1px solid #060; ul liheight:38px;font-size:12px;color:#333;line-height:38px;border-bottom:1px dashed #060; ,DAY 01 TELjs部分： window.onload=function () var oul=document.getElementsB

50、yTagName(ul)0; var aTe=document.getElementById(te); var obut=document.getElementById(but); obut.onclick=function () var oli=document.createElement(li);/创建新元素 oli.innerHTML=aTe.value; /把文本框中的内容加到新添加的子元素里 var ali=oul.getElementsByTagName(li); if(ali.length0) oul.insertBefore(oli,ali0) else oul.appendC

51、hild(oli);/ 添加子元素 ,DAY 01 TEL替换节点： 1 2 3 span,DAY 01 TELvar p=document.getElementsByTagName(p)0; var div=document.createElement(div); p.parentNode.replaceChild(div,p); /要想替换必须先转到父节点，div是新节点，p是被替换的节点 var text=document.createTextNode(5); div.appendChild(text);,DAY 01 TEL:1520

52、1504091,克隆 span1span2 div var p=document.getElementById(p); var clone=p.firstChild.cloneNode(true); /如果没有true只能拷贝标签，没有内容 document.getElementById(box3).appendChild(clone);/*移除*/ /document.getElementById(p).firstChild.remove() /第一个节点 /*var box=document.getElementById(p); /移除整个p box.parentNode.removeCh

53、ild(box);*/ var box=document.getElementById(p); /移除p里元素 box.remove();,DAY 01 TEL删除节点,布局： 有人说，现在晚上，三岁以下的小孩子，可以看到幽灵删除 袁新同学一直在看小说删除 小徐同学玩游戏删除 杜唱同学在玩联盟删除 张小百同学在看电子书删除 ,DAY 01 TELjs部分： window.onload=function () var oul=document.getElementsByTagName(ul)0; var oli=oul.getElementsB

54、yTagName(li); var oa=oul.getElementsByTagName(a); for(var i=0;i,DAY 01 TEL文档碎片问题,向文档中添加的节点非常多时，页面的执行效率会降低。通常的解决方法是，创建一个文档碎片，将新节点添加到碎片上，再一次性地将碎片添加到文档中。,DAY 01 TEL普通文档碎片 window.onload=function () var oBtn=document.getElementById(btn1); var oUl=document.getElementById(ul1); oB

55、tn.onclick=function () var iStart=new Date().getTime(); for(var i=0;i,DAY 01 TELcreateDocumentFragment创建 window.onload=function () var oBtn=document.getElementById(btn1); var oUl=document.getElementById(ul1); oBtn.onclick=function () var iStart=new Date().getTime(); var oFrag=document.c

56、reateDocumentFragment(); for(var i=0;i ,DAY 01 TEL案例分析： 基础兄弟中的案例,DAY 01 TEL动态css（动态获取）, var head = document.getElementsByTagName(HEAD).item(0); var style = document.createElement(link); style.href = style.css; style.rel = stylesheet; style.type = text/css; head.appendChild(

57、style); ,DAY 01 TEL动态脚本 怎样根据条件动态加载js脚本呢？ window.onload=function() var bool=true; if(bool) var script=document.createElement(script); script.type=text/javascript; script.src=test.js”;document.getElementsByTagName(head)0.appendChild(script); ,DAY 01 TEL三、HTML DOM - 改变 CSS,HTM

58、L DOM 允许 JavaScript 改变 HTML 元素的样式。改变 HTML 样 式如需改变 HTML 元素的样式，语法： document.getElementById(id).perty=new style,DAY 01 TEL实例, My Heading 1 点击这里 ,DAY 01 TEL实例,请点击该文本 文本 文本 function aa() document.getElementById(h1).style.fontSize=20px; document.getElementById(h1).style.background=yellow; ,DAY 01 TEL实例,Hello World! Hello World! document.getElementById(p2).style.color=blue; document.getE