DOM的简单学习
DOM的简单学习:为了满足案例需求
*功能:控制html文档的内容
*代码:获取页面标签(元素)对象Element
document.getElementById("id值")//通过元素的id获取元素对象
*操作Element对象:
1.修改属性值:
a.明确获取的对象是哪一个
b.查看API文档,找其中有哪些属性可以设置
2.修改标签体内容:
*属性:innerHTML//设置标签体的内容
简单事件
*功能:某些组件被执行了某些操作后,触发某些代码的执行。
*如何绑定事件
1.直接在html标签上,指定事件的属性(操作),属性值就是js代码
onclick--单击事件
2.通过js获取元素对象,指定事件属性,设置一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change</title><!--点击交换图片案例-->
</head>
<body>
<img id="Id" src="pic/1.jpg">
<script>
var s=document.getElementById("Id");
flag=true;
s.onclick=function () {
if(flag){Id.src="pic/2.jpg";
flag=false;
}
else{
Id.src="pic/1.jpg";
flag=true;
}
}
</script>
</body>
</html>
BOM的简单学习
BOM的简单学习
*概念:浏览器对象模型。将浏览器的各个组成部分封装为对象、 Window:窗口对象
1.创建
2.方法
a.与弹出框有关的方法
alert();弹出警告框
confirm();确认取消对话框
prompt();用户输入框
b.与打开关闭有关的方法
close();关闭浏览器窗口
open();打开新浏览器窗口
*返回一个新的Window对象
c.与定时器有关的方法
setTimeout();在指定的毫秒数后执行代码
*参数
1.js代码或者方法对象
2.等待执行毫秒值
例如:var id=setTimeout("alert("等待时 间过长")",2000);
clearTimeout(id);//不会弹出警示框
clearTimeout();取消setTimeout方法设置的timeout
setInterval();按照指定的周期来调用代码
clearInterval()取消由setInterval设置的timeout
3.属性
a.获取其他BOM对象
history
location
navigator
screen
b.获取DOM对象
document
4.特点
*Window对象不需要创建可以直接使用 window使用 window.方法名();
*window引用可以省略 方法名();
Navigator:浏览器对象
Screen:显示器屏幕对象
History:历史记录对象
1.创建(获取):
window.history/history
2.方法:
back() 加载history列表中的前一个URL
forward() 加载history列表中的下一个URL
go(参数) 加载history列表中的某个具体页面
*参数为正数,前进几个历史记录
参数为负数,后退几个历史记录
3.属性:
length 返回当前窗口历史列表中的URL数量
Location:地址栏对象
1.创建(获取)
window.location/location
2.方法
reload();重新加载文档,刷新
3.属性
href 设置或返回完整的URL