1.BOM (Brower Object model)
js通过BOM与浏览器打交道
2.window对象的子对象，也是其属性
document: 浏览器是代表html的文档对象
history
location：url对象
screen
navigator
event
3.window对象的常见属性和方法：
1）三个弹出框（内置方法，特点：都会阻塞浏览器代码执行）：
alert(); 弹出框
confirm(); 确认框 点击确认输出true，点击取消输出false
prompt(); 输入框
2）两个定时器：
setInterval()
setTimeout()
3）一个弹窗方法：
open("路径","_blank","弹出窗口外观");外观：width height left top...
返回值：弹出的子窗口
特点：子窗口和父窗口可以互相操作
focus（）；//获取焦点
opener:根据子窗口查找父窗口。这是属性，没有（）；
close();关闭窗口
closed:判断某个窗口是否被关闭，关闭返回true,否则返回false。这是属性，没有（）；
案例：
父窗口和子窗口可互相操作
index.html父窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<botton id="btn">操作子窗口</botton>
<h1>这是网站首页</h1>
</body>
</html>
<script type="text/javascript">
var btn = document.getElementById("btn");
//open方法返回子窗口的window对象
var subWin = window.open("sub.html","_blanck","height=400,width=600,top=200,left=200");
btn.onclick = function(){
var h1 = subWin.document.getElementsByTagName("h1")[0];
h1.style.color = "red";
subWin.focus();
}
window.onunload = function(){
if(!subWin.closed){
subWin.close();
}
}
</script>
sub.html子窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<botton id="btn">操作父窗口</botton>
<h1>这是广告窗口</h1>
</body>
</html>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
var indexWin = window.opener;
var h1 = indexWin.document.getElementsByTagName("h1")[0];
h1.style.color = "red";
}
</script>
4.location:用户操作url
1)window.location.href:获取当前页面的url 可读写
//http://127.0.0.1:8020/1809js/Day11/location/a.html?userName=tom&age=23&phone=123#4
2) location.replace("url")：替换页面，因此没有历史记录，不能返回上一次的页面(了解)
3)location.assign("url"):替换页面(了解) 可读可写
4)location.reload();页面刷新(了解)
http:网络协议
127.0.0.1:域名
8020：端口号
1809js/Day11/location/a.html：页面路径
userName=tom&age=23&phone=123:查询串
#4:哈希值
显示哈希值作用的案例
index.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">刷新页面</button>
<a href="a.html?userName=tom&age=23&phone=123#1">跳转到a页面</a>
<h1></h1>
</body>
</html>
<script src="../../public.js"></script>
<script type="text/javascript">
//url?key=值&key=值
//#4哈希值
//http://127.0.0.1:8020/1809js/Day11/location/a.html?userName=tom&age=23&phone=123#4
//window.location.replace("http://www.baidu.com");//替换
//window.location.assign("http://www.baidu.com");//替换
var h1 =document.getElementsByTagName("h1")[0];
var btn = document.getElementById("btn");
btn.onclick = function(){
location.reload();//页面刷新
}
showTime();
function showTime(){
var date = new Date();
h1.innerHTML = dateToString(date);
}
</script>
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 800px;
height: 300px;
margin: auto;
display: none;
}
#box1{
background: red;
}
#box2{
background: yellow;
}
#box3{
background: blue;
}
#box4{
background: pink;
}
</style>
</head>
<body>
<h1>这是a页面</h1>
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</body>
</html>
<script type="text/javascript">
//http://127.0.0.1:8020/1809js/Day11/location/a.html?userName=tom&age=23&phone=123#4
var url = window.location.href;
var hx = url.split("#")[1];
var str = "box"+hx;
//alert(str)
var box = document.getElementById(str);
box.style.display = "block";
</script>
5.history（了解）
history.go(1)/forward():前进
history.go(-1)/back():后退
history.go(0):刷新
6.document
document.getElementById(id);
document.getElemnetsByTagName(tag)[];
documnet.getElementsByName(name)[];操作表单元素
documnet.getElementsByClassName(className);
document.querySelector(".box");新增方法，低版本IE不支持，根据选择器查找一个节点
documnet.querySelectorAll(".box");根据选择器查找元素，返回一个节点集合
7.元素的操作
1）属性操作
元素.属性
2）样式操作
元素.style
3）内容操作
innerHTML//获取所有的含标签的子内容
innerText //获取所有的文本内容（不含标签）
outerHTML//获取包含本身标签及子内容的所有元素及内容。
value//
var obj = {name:"tom"}
obj.name = "jeryy";