JS的window对象和document对象
Posted 南岸青栀*
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS的window对象和document对象相关的知识，希望对你有一定的参考价值。
JS的window对象和document对象
文章目录
window对象
BOM浏览器对象模型：规范浏览器对JS的支持（JS调用浏览器本身的功能）
BOM实现是window对象
1.框体方法
警告框：alert()提示一个警告信息，没有返回值
确认框：confirm()提示用户选择一项操作（确认/取消）确认返回True，取消返回False
提示框：prompt()提示用户某个信息的录入，点击确定返回空字符串，点击取消返回null，输入后电器确认返回输入内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window对象的学习</title>
<!--
1.框体方法
2.定时和间隔执行方法
3.子窗口方法
-->
<script type="text/javascript">
// 警告框
function testAlert(){window.alert("我是警示框")}
// 确认框
function testConfirm(){confirm("确定要删除吗？")}
// 提示框
function testPrompt(){prompt("请输入名称")}
</script>
</head>
<body>
<input type="button" name="" id="" value="测试警示框" onclick="testAlert()"/>
<input type="button" name="" id="" value="测试确认框" onclick="testConfirm()"/>
<input type="button" name="" id="" value="测试提示框" onclick="testPrompt()"/>
</body>
</html>
2.定时和间隔执行方法
定时：setTimeout()指定时间后执行函数。
- 参数1：函数对象
- 参数2：时间，单位毫秒
- 返回值：返回当前定时器的id值
间隔执行：setInterval()每间隔指定时间后执行指定函数
- 参数1：函数对象
- 参数2：时间，单位毫秒
- 返回当前间隔器的id值
停止定时：clearTimeout()用来停止指定的定时器
停止间隔：clearInterval()用来停止指定的间隔器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window对象的学习</title>
<!--
1.框体方法
2.定时和间隔执行方法
3.子窗口方法
-->
<script type="text/javascript">
var id1,id2
// 定时执行
function testSetTimeout(){
id1 = setTimeout(
function(){alert('我是定时执行')},3000)
}
// 间隔执行
function testSetInterval(){
id2 = setInterval(function(){alert('我是间隔执行')},2000)
}
// 结束当前定时方法
function testClearTimeout(){
clearTimeout(id1)
}
// 结束当前间隔方法
function testClaetInterval(){
clearInterval(id2)
}
</script>
</head>
<body>
<input type="button" name="" id="" value="定时执行" onclick="testSetTimeout()"/>
<input type="button" name="" id="" value="间隔执行" onclick="testSetInterval()"/>
<input type="button" name="" id="" value="停止定时执行" onclick="testClearTimeout()"/>
<input type="button" name="" id="" value="停止间隔执行" onclick="testClaetInterval()"/>
</body>
</html>
3.子窗口方法
打开子窗口：window.open('子页面的资源（相对路径）','打开方式','配置');
示例：open('son.html','newwindow','height=100,width=400,top = 100,left = 100')
关闭子窗口：window.close(),但是此方法只能关闭open方法打开的子页面。
4.子页面调用父页面的方法
window.opener.父页面
JS的window对象的常用属性
1.地址栏属性：location
- location.href=‘新的资源路径(相对路径/URL)’
- location.reload();重新加载页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window对象学习（2）</title>
<script type="text/javascript">
// -------------------------------------------------------
// 地址栏属性
function testLoaction(){
location.href='http://www.baidu.com'
}
function testLoaction2(){
location.reload()
}
</script>
</head>
<body>
<input type="button" name="" id="" value="测试地址栏属性--资源跳转" onclick="testLoaction()"/>
<input type="button" name="" id="" value="测试地址栏属性--重新加载" onclick="testLoaction2()"/>
</body>
</html>
2.历史记录属性
history.forward();页面资源前进，历史记录的前进
history.back();页面资源后退，历史记录的后退
history.go(index);跳转到指定历史资源记录
history.go(0)相当于刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window对象学习（2）</title>
<script type="text/javascript">
// 历史资源（前进）
function testHistory(){
history.forward()
}
</script>
</head>
<body>
<input type="button" name="" id="" value="历史资源记录--前进" onclick="testHistory()"/>
</body>
</html>
3.屏幕属性
- screen.width;获取屏幕宽度属性
- screen.height;获取屏幕高度属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window对象学习（2）</title>
<script type="text/javascript">
// ------------------------------------------------------
// 屏幕属性
function testScreen(){
var x=screen.width
var y=screen.height
alert(x+':'+y)
}
</script>
</head>
<body>
<hr >
<input type="button" name="" id="" value="获取屏幕长宽" onclick="testScreen()"/>
</body>
</html>
4.浏览器配置属性
navigator.userAgent；查看User-Agent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window对象学习（2）</title>
<script type="text/javascript">
// 浏览器配置属性
function testNa(){
alert(navigator.userAgent)
}
</script>
</head>
<body>
<input type="button" name="" id="" value="浏览器配置属性" onclick="testNa()"/>
</body>
</html>
5.主体面板属性（document）
（1）Document对象的概念：
浏览器对外提供的支持JS的用来操作HTML文档的一个对象，此对象封存HTML文档的所有信息。
（2）使用document
1）获取HTML元素对象
直接获取方式：
- 通过id属性值
- 通过name属性值
- 通过标签名
- 通过class属性值
间接获取方式
- 父子关系
- 子父关系
- 兄弟关系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document对象的学习</title>
<script type="text/javascript">
// 直接获取方式
function getElemById(){
var id = document.getElementById("uname")
alert(id)
}
function testGetElemByName(){
var name = document.getElementsByName("fav")
alert(name)
alert(name.length)
}
function testGetElemByTagName(){
var tagName = document.getElementsByTagName("input")
alert(tagName.length)
}
function testGetElemByClass(){
var cla = document.getElementsByClassName("comment")
alert(cla.length)
}
// 间接获取
// 父子关系
function testParent(){
var showdiv = document.getElementById('showdiv')
var childs = showdiv.childNodes
alert(childs)
alert(childs.length)
}
// 子父关系
function testChilds(){
var inp = document.getElementById("inp")
var div = inp.parentNode;
alert(div)
}
// 兄弟关系
function testBrother(){
var inp = document.getElementById("inp")
prev = inp.previousSibling //弟取兄
next = inp.nextSibling //兄取弟
alert(prev+"::"+next)
}
</script>
<style type="text/css">
.comment{color: red;}
#showdiv{
border: solid 1px red;
width: 500px; height: 400px;
}
</style>
</head>
<body>
<h1>document Object Learning</h1>
<input type="button" name="" id="" value="测试获取HTML对象--ID" onclick="getElemById()"/>
<input type="button" name="" id="" value="测试获取HTML对象--Name" onclick="testGetElemByName()"/>
<input type="button" name="" id="" value="测试获取HTML对象--TagName" onclick="testGetElemByTagName()"/>
<input type="button" name="" id="" value="测试获取HTML对象--Class" onclick="testGetElemByClass()"/>
<input type="button" name="" id="" value="测试获取HTML对象--父子关系" onclick="testParent()"/>
<input type="button" name="" id="" value="测试获取HTML对象--子父关系" onclick="testChilds()"/>
<input type="button" name="" id="" value="测试获取HTML对象--兄弟关系" onclick="testBrother()"/>
<hr >
用户名：<input type="text" id="uname" value="" name="uname" />
<input type="checkbox" name="fav" id="fav" value="" class="comment"/>sing
<input type="checkbox" name="fav" id="fav" value="" class="comment"/>sleep
<input type="checkbox" name="fav" id="fav" value="" />listening music
<input type="checkbox" name="fav" id="fav" value="" />basketball
<hr ><hr >
<div id="showdiv">
<input type="text" id="inp"><input type="text">以上是关于JS的window对象和document对象的主要内容，如果未能解决你的问题，请参考以下文章
为啥js的手册里没有window document等对象的资料？