1. 瀏覽器對(duì)象模型 BOM ,它是沒(méi)有規(guī)范,各個(gè)瀏覽器廠商按照自己的想法進(jìn)行擴(kuò)展
? ? ? ? //? BOM對(duì)象的頂級(jí)對(duì)象是 window
? ? ? ? //? window.alert("")
? ? ? ? //? window.confirm("確認(rèn)要?jiǎng)h除嗎?")
? ? ? ? //? window.prompt("請(qǐng)輸入一個(gè)數(shù)")
? ? ? ? //? window.print()? 調(diào)用打印功能
? ? ? ? //關(guān)閉瀏覽
? ? ? ? // window.close() 關(guān)閉瀏覽器
? ? ? ? // setInterval(): 設(shè)置定時(shí)器
? ? ? ? // clearInterval() : 移除定時(shí)器
? ? ? ? // setTimeOut() : 設(shè)置延時(shí)器
? ? ? ? // clearTimeOut(): 移除延時(shí)器
? ? ? ? //open 打開(kāi)一個(gè)新的窗口
/由于openPage是唯一的id,可以不用document.getElementById,
// window的組成 (document,history,location,frames,screen,navigator)
? ? ? ? //? docuemnt --> DOM 對(duì)象 (重點(diǎn))
? ? ? ? // 2.location
? ? ? ? // 3.history? 歷史記錄
window.location
? ? ? ? //協(xié)議 https 443? (加密,需要證書(shū) 更加安全)
? ? ? ? //? ? http? 80
? ? ? ? //location的屬性
? ? ? ? console.log(location.protocol);
? ? ? ? console.log(location.host); //主機(jī)名稱+端口
? ? ? ? console.log(location.hostname);//主機(jī)名稱
? ? ? ? console.log(location.port);//端口
? ? ? ? console.log(location.pathname);//路徑
? ? ? ? console.log(location.search); // ?+參數(shù)
? ? ? ? console.log(location.search.split("?")[1]); //手動(dòng)得到 query
? ? ? ? console.log(location.hash); //hash
? ? ? ? console.log(location.href);//整個(gè)url路徑
? ? ? ? //location的方法 (大部分 跳轉(zhuǎn))
? ? ? ? jump.onclick = function () {
? ? ? ? ? ? // location="https://www.baidu.com"
? ? ? ? ? ? // location.
? ? ? ? ? ? //跳轉(zhuǎn)后,沒(méi)有歷史記錄
? ? ? ? ? ? // location.replace("https://www.sina.com")
? ? ? ? ? ? // location.assign("http://www.douyu.com")
? ? ? ? ? ? //刷新頁(yè)面
? ? ? ? ? ? // location.reload()
? ? ? ? ? ? // location.reload(true)//強(qiáng)制刷新
? ? ? ? ? ? // <meta http-equiv="refresh" content="3"/>? ? /content 3秒刷新一次
// history 歷史
? ? ? ? //
? ? ? ? // history.forward() 前進(jìn)
? ? ? ? //? history.back() 后退
? ? ? ? // history.go()? ? -1 后退, 0 刷新? 1 前進(jìn)
// DOM 文檔對(duì)象模型 w3c規(guī)范
? ? ? ? //? 用js操作div..元素,就操作dom對(duì)象
? ? ? ? // div,span,a
? ? ? ? // 1.dom對(duì)象的組成 有哪些?? (dom 聯(lián)想 木偶 )
? ? ? ? //? 一個(gè)dom對(duì)象包含? (元素節(jié)點(diǎn) 屬性節(jié)點(diǎn)? 文本節(jié)點(diǎn))
? ? ? ? //2.獲取dom對(duì)象
? ? ? ? //2.1一個(gè)dom對(duì)象
? ? ? ? var oDiv = document.getElementById("box");
? ? ? ? // console.log(oDiv);
? ? ? ? //查看對(duì)象的詳細(xì)信息
? ? ? ? // console.dir(oDiv);
? ? ? ? //2.2根據(jù)標(biāo)簽名稱 獲取多個(gè)dom對(duì)象? 多->數(shù)組
? ? ? ? var oDivs = document.getElementsByTagName("div")
? ? ? ? console.log(oDivs);
? ? ? ? // oDivs[0].innerHTML="abc123";
? ? ? ? // oDivs[1].innerHTML="abc123";
? ? ? ? for (var i = 0; i < oDivs.length; i++) {
? ? ? ? ? ? oDivs[i].innerHTML = "abc123";
? ? ? ? }
? ? ? ? //2.3 根據(jù) 類名稱獲取頁(yè)面上元素
? ? ? ? var oBoxs = document.getElementsByClassName("box");
? ? ? ? console.log(oBoxs);
? ? ? ? //2.4? 根據(jù)name屬性 獲取頁(yè)面上的元素
? ? ? ? var oBoxs = document.getElementsByName("myname")
? ? ? ? console.log(oBoxs);
? ? ? ? oBoxs[1].style.color = "green";
? ? ? ? //3. 最新的選擇器
? ? ? ? // document.querySelector()? 只會(huì)獲取一個(gè)
? ? ? ? var oDiv = document.querySelector("div");
? ? ? ? oDiv.style.backgroundColor = "pink";
? ? ? ? // document.querySelectorAll()? 獲取多個(gè)? 數(shù)組
? ? ? ? var oDivs = document.querySelectorAll("div");
? ? ? ? console.log(oDivs);
? ? ? ? //總結(jié)下
? ? ? ? // document.getElementById() 獲取頁(yè)面上帶有id的元素
? ? ? ? // document.getElementsByTagName("") 獲取帶有指定標(biāo)簽名稱的元素? 數(shù)組
? ? ? ? // document.getElementsByClassName("") 獲取帶有指定類名稱的元素? 數(shù)組
? ? ? ? //? document.getElementsByName()? ? 獲取帶有指定name屬性的的元素? 數(shù)組
? ? ? ? // document.querySelector()? 只會(huì)獲取一個(gè)
? ? ? ? // document.querySelectorAll()? 會(huì)獲取多個(gè)
? ? ? ? //有兼容問(wèn)題? ()
? ? ? ? //但是 不推薦這么用
