day 10 BOM
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";