javascript-dom 15章

《javascript-dom 15章》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、，现在所说的为htmldom。DAY01TEL:15201504091HTMLDOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（DocumentObjectModel）。HTMLDOM模型被构造为对象的树。HTMLDOM树DAY01TEL:15201504091DAY01（1-1）结构DAY01TEL:15201504091作用通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。•JavaScript能够改变页面中的所有HTML元素•JavaScript能够改变页面中的所有HTML属性•JavaScript能够改变页面中的

3、所有CSS样式•JavaScript能够对页面中的所有事件做出反应DAY01TEL:15201504091常用方法：1、如果找到会得到元素类型如div得到的是HTMLDivElement，如果找不到会得到null；2、在查找元素时必须等html内容加载完毕再获取元素才能正确获取，这时可以用window.onload方法;ie5以下不支持DAY01TEL:15201504091一、获取元素3、元素获取：1）、tagName得到标签的名称，注意大小写之分；获取li，就可以得到一个数组集合1、id获取varli=document.getElementsByName("li")

4、;alert(li[0])//弹出是个li节点也可以alert(li.item(0));//意义同上一样alert(li[0].innerHTML)//值alert(li[0].tagName)//标签名2、标签名获取A）alert(document.getElementsByTagName("body")[0])//结果：[objectHTMLBodyElemen]B）获取所有标签：alert(document.getElementsByTagName(‘*’).length);//结果：获取文档所有元素DAY01TEL:15201504091DAY01（1-1）C）

5、如果有个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:元素纯文本，如果里面有标签页不能识别。DAY01TEL:1

6、5201504091DAY01（1-1）4、属性获取：如id、class、style、title等getAttribute属性:ss