欢迎来到天天文库
浏览记录
ID:40043387
大小:617.50 KB
页数:140页
时间:2019-07-18
《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
7、e返回是个对象,兼容问题注意DAY01TEL:15201504091DAY01(1-1)自定义属性值ss
此文档下载收益归作者所有
点击更多查看相关文章~~