BOM中都是小写字母
顶级对象:window
window对象的方法啊在调用时,对象名可以省略
alert :弹出提示窗口
alert("憨包包");
promp:弹出输出框
var str = prompt("请憨包包输入");
confirm:弹出确认框
<head>
<meta charset="utf-8" />
<title>操作BOM</title>
<script>
// alert("憨包包");
// var str = prompt("请憨包包输入");
function deleteInfo(){
if(confirm("确认删除吗?")){
console.log("删除成功");
}
}
</script>
</head>
<body>
<div>
<button type="button" onclick="deleteInfo()">删除</button>
</div>
</body>
close:关闭窗口
<head>
<meta charset="utf-8" />
<title>操作BOM</title>
<script>
function closeWin(){
window.close();
}
</script>
</head>
<body>
<div>
<button type="button" onclick="closeWin()">关闭窗口 </button>
</div>
</body>
open:打开新窗口
- 要载入新窗口的URL的路径
- 新窗口的名字
- 特性字符串(如下),使用逗号分隔
<script>
function openWin(){
window.open("index.html","aaa","width=500,height=300");
}
</script>
<div>
<button type="button" onclick="openWin()">打开新窗口 </button>
</div>
setInterval() clearInterval()
:设定定时器
- setInterval():让函数在一定时间内执行,递归调用(如果不递归调用,只执行一次)
- clearInterval():取消定时器(手动)
<html>
<head>
<meta charset="utf-8">
<title>定时器</title>
<script>
var number = 1;
function printNum(){
document.write(number+"<br/>");
number++;
if(number==11) {
//清除定时器
window.clearInterval(time);
}
}
//定时器的应用
var time = window.setInterval("printNum()",1000);
</script>
</head>
<body>
</body>
</html>
setTimeout() clearTimeout()
- setTimeout():定义定时器,使某个函数在指定时间后执行一次,外部调用
- clearTimeout() :清除定时器
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function closeCurWin(){
window.close();
}
setTimeout("closeCurWin()",3000);
</script>
</head>
<body>
<div>
3秒钟关闭窗口
</div>
</body>
</html>
document对象:
对象集合:
forms:代表页面中所有表单的集合 返回值是一个数组
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function sub(){
window.document.forms[0].submit();
//提交时更换路径
window.document.forms[0].action = "定时器2.html";
}
</script>
</head>
<body>
<form action="定时器.html" method="get">
<button type="button" onclick="sub()">提交</button>
</form>
</body>
</html>
对象方法:
write():文档中打印信息
writeln():文档中换行打印信息
document.writeln("qwe");
document.writeln("qwe");
getElementById:获取对 ID 标签属性为指定值的第一个对象的引用
要在body体中写 onload = "函数名()"
//调用方法,否则返回值为null
<script>
function load(){
var div1 = document.getElementById("div1");
console.log(div1);//null
}
</script>
</head>
<body onload="load()">
<div id="div1">
<a href="#">aaaa</a>
</div>
</body>
getElementsByName :根据元素的name
获取一组页面元素 ,返回对象集合
<head>
<meta charset="utf-8">
<title></title>
<script>
var chks = document.getElementsByName("chk");
console.log(chks);
</script>
</head>
<body>
<div>
<input type="checkbox" name="chk" value="1" />1
<input type="checkbox" name="chk" value="2" />2
<input type="checkbox" name="chk" value="3" />3
<input type="checkbox" name="chk" value="4" />4
</div>
</body>
getElementsByTagName:根据元素名称获取一组页面元素 返回值是数组
<head>
<meta charset="utf-8">
<title></title>
<script>
var lis = document.getElementsByTagName("li");
console.log(lis);
</script>
</head>
<body>
<div>
<ul>
<li>q</li>
<li>a</li>
<li>z</li>
</ul>
</div>
</body>
getElementsByClassName():根据元素的class的值
获取一组页面元素 ,返回对象集合
<head>
<meta charset="utf-8">
<title></title>
<script>
var liss = document.getElementsByClassName("d");
console.log(liss);
</script>
</head>
<body>
<div>
<ul>
<li class="d">q</li>
<li class="d">a</li>
<li class="d">z</li>
</ul>
</div>
</body>
history对象
- 用户访问过的站点的列表
- 属性:length
- 只对已经访问过的页面有效
- 对象方法(如下)
1. history.go(-3);//向后返回三个访问过的页面
2. histroy.go(3);//向前返回三个访问过的页面
3. back();//与history.go(-1);功能相同
4. forward();//与history.go(1);功能相同
go()
back() = go(-1)
forward() = go(1)
location对象:
reload():重新加载当前页面
<head>
<meta charset="utf-8">
<title></title>
<script>
console.log(location.host);
console.log(location.hash);
console.log(location.hostname);
console.log(location.href);
console.log(location.pathname);
console.log(location.port);
console.log(location.protocol);
// location.reload();
</script>
</head>
<body>
</body>