DOM简单使用
DOM:Document Object Model 文档对象模型
1.获取标签对象
根据id获取标签对象:getElementById(id值);
练习:01_DOM_获取元素对象.html
事件:
鼠标单击事件:onclick
练习:02_事件绑定.html
案例:03案例1电灯开关.html 电风扇.html
BOM:Browser Object Model 浏览器对象模型
1.Navigate:浏览器对象
2.Screen:屏幕对象
3.window:窗口对象
* 方法:
alert() 弹出警告框
【重点】confirm() 确认取消框 确认true 取消false
prompt() 修改框
open() 打开新窗口 返回值是一个新窗口对象
close() 关闭窗口
一次性定时器:
setTimeOut(参数1,参数2) 参数1:js代码 参数2:毫秒值 达到指定毫秒,自动执行js代码。 会返回定时器编号
clearTimeOut(参数); 参数:定时器编号。 取消指定的定时器
循环定时器:
setInterval(参数1,参数2); 参数1:js代码 参数2:毫秒值 达到指定毫秒,自动执行js代码。 会返回定时器编号
clearInterval(参数) 参数:定时器编号。 取消指定的定时器
* 属性
navigate
screen
location
history
* 练习:
04_Window对象.html
05_案例2_轮播图.html
4.Location:地址栏对象
* 方法:
reload() 刷新当前页面
* 属性:
href 跳转的url路径地址
* 练习:
06_Location对象.html
07_案例3_自动跳转.html
5.History:当前窗口历史记录对象
* 方法:
back() 后退到前一个页面
forward() 前进到后一个页面
go(数字) 根据传递的数字来进行前进或后退页面
* 属性:
length 获取当前页面历史记录的个数
* 练习:
08_History对象.html
DOM:
DOM:
DOM:Document Object Model 文档对象模型
1. Document 文档对象
* 获取方法
根据id值来获取指定的元素对象:getElementById()
根据标签名称来获取多个元素对象:getElementsByTagName()
根据class属性来获取多个元素对象:getElementsByClassName()
根据name属性值来获取多个元素对象:getElementsByName() 常用于表单项中的单选、复选~~~
* 创建方法
创建标签对象:createElement()
创建属性对象:createAttribute()
创建文本对象:createTextNode()
* 练习:
10_Document对象.html
|
|