十三、認(rèn)識BOM&DOM
1.BOM
BOM 是瀏覽器對象模型，就可以理解成是當(dāng)前瀏覽器打開的窗口
window對象 就是 BOM。通過window對象 可以操作瀏覽器本身 它里面提供了一些操作當(dāng)前瀏覽器的對象和方法。
1.1. 各種彈框：
window.alert('消息框')
window.prompt('輸入框')
window.confirm('確認(rèn)框')
1.2. 打開和關(guān)閉窗口：
open()方法，打開新的窗口
window.open('http://baidu.com')
close()方法，關(guān)閉當(dāng)前窗口
window.close()
1.3. 通用方法：
window.parseInt('123') //將字符串的'123'，強(qiáng)轉(zhuǎn)為整型的123
window.parseFloat('12.12') //將字符串的'12.12'，強(qiáng)轉(zhuǎn)為浮點(diǎn)型的12.12
window.isNaN('abc') //判斷'abc'，不是數(shù)值數(shù)據(jù)，成立返回true
1.4. 定時(shí)器方法：
指定毫秒后，執(zhí)行的定時(shí)器? =>? window.setTimeout()
每隔指定的毫秒后，執(zhí)行的定時(shí)器 => window.setInterval()
1.5. 常用屬性：
location屬性：
location是window對象的屬性，該屬性用于設(shè)置網(wǎng)頁的地址欄
location.href屬性 表示跳轉(zhuǎn)，當(dāng)前瀏覽器的地址欄發(fā)生了跳轉(zhuǎn)
其實(shí)超鏈接標(biāo)簽的內(nèi)部就是對location.href屬性的封裝
window.location.
location.reload()方法 表示刷新當(dāng)前地址欄（刷新當(dāng)前窗口）
window.location.reload()
history屬性：
history是window對象的屬性，該屬性用于設(shè)置網(wǎng)頁的瀏覽歷史記錄
forward()前進(jìn)
window.history.forward()
back()后退
window.history.back()
go()方法，既可以實(shí)現(xiàn)前進(jìn)，也可以實(shí)現(xiàn)后退
window.history.go(1) //前進(jìn)一次
window.history.go(3) //前進(jìn)三次
window.history.go(-1) //后退一次
window.history.go(-3) //后退三次
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>JS的組成部分</title>
</head>
<body>
? ? <script>
? ? ? ? // JS的組成部分：
? ? ? ? // 1. ECMAScript，是JS的核心語法，目前最新的標(biāo)準(zhǔn)是ES6。所謂ES6，指的是ECMAScript2015之后的版本
? ? ? ? // 2. BOM，是瀏覽器對象模型，提供了操作瀏覽器的api
? ? ? ? // 3. DOM，是文檔對象模型，提供了操作當(dāng)前網(wǎng)頁的api
? ? ? ? // window對象就BOM，它提供了操作當(dāng)前瀏覽器的方法
? ? ? ? console.log(window);
? ? ? ? /* // 1.各種彈框
? ? ? ? // 消息框
? ? ? ? window.alert('消息框')
? ? ? ? // 輸入框
? ? ? ? window.prompt('請輸入：')
? ? ? ? // 確認(rèn)框
? ? ? ? window.confirm('確定嗎？') */
? ? ? ? // 2. 定時(shí)器
? ? ? ? // setTimeout定時(shí)器，在指定的毫秒后執(zhí)行一次
? ? ? ? window.setTimeout(()=>{
? ? ? ? ? ? // 3. open方法，用于打開新的窗口
? ? ? ? ? ? // window.open('http://baidu.com')
? ? ? ? },5000);
? ? ? ? // setInterval定時(shí)器，每隔指定的毫秒后執(zhí)行一次
? ? ? ? window.setInterval(()=>{
? ? ? ? ? ? console.log('好好學(xué)習(xí)，天天向上');
? ? ? ? },1000)
? ? ? ? window.setTimeout(()=>{
? ? ? ? ? ? // 4. close方法，用于關(guān)閉當(dāng)前窗口
? ? ? ? ? ? // window.close()
? ? ? ? },10000)
? ? ? ? // 5.數(shù)據(jù)轉(zhuǎn)換方法
? ? ? ? let num1 = window.parseInt('100')
? ? ? ? console.log(typeof num1);
? ? ? ? let num2 = window.parseFloat('100.55')
? ? ? ? console.log(typeof num2);
? ? ? ? console.log(window.isNaN('100'));
? ? ? ? console.log(window.isNaN('100s'));
? ? ? ? // window對象還提供了一些屬性
? ? ? ? // 1.location屬性里面保存的是地址欄相關(guān)的信息
? ? ? ? console.log(window.location);
? ? ? ? // 跳轉(zhuǎn)到其他地址，其實(shí)超鏈接內(nèi)部就是對location屬性的封裝
? ? ? ? // setTimeout(() => {
? ? ? ? //? ? window.location.
? ? ? ? // }, 5000);
? ? ? ? // 2.history屬性里面保存的是歷史記錄
? ? ? ? console.log(window.history);
? ? ? ? // 由于window對象是瀏覽器環(huán)境里面的默認(rèn)對象就是window對象，所以，是window對象的成員時(shí)，可以省略window對象
? ? </script>
</body>
</html>
2.DOM
DOM 是文檔對象模型，就是當(dāng)前網(wǎng)頁里面的所有內(nèi)容。
因?yàn)榫W(wǎng)頁是在瀏覽器中顯示的，整個(gè)瀏覽器是BOM，所以DOM其實(shí)是BOM的一部分
BOM 就是 window對象 ，DOM 就是 document對象
2.1使用DOM獲取網(wǎng)頁元素：
如果該元素，是網(wǎng)頁的必備元素，而且只能有一個(gè)，可以通過document對象直接獲取。
比如：head,title,body
document.body.style.border = "1px solid #ccc"?
document.title = 'helloworld
更多的時(shí)候，我要需要獲取網(wǎng)頁中的指定元素，這就需要專門的方法來獲取了。
getElementById()方法，根據(jù)元素的id屬性值來獲取指定的元素。
注意：如果網(wǎng)頁中id屬性值重復(fù)，只獲取第一個(gè)。
getElementsByTagName()方法，根據(jù)元素的標(biāo)簽名獲取所有該元素。
getElementsByClassName()方法，根據(jù)元素的類選擇器名稱獲取所有該元素。
getElementsByName()方法，根據(jù)元素的name屬性值獲取所有該元素。
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>DOM</title>
</head>
<body>
? ? <h2 name="red">北京</h2>
? ? <h2 class="blue">南京</h2>
? ? <div id="sh">上海</div>
? ? <div id="sh">武漢</div>
? ? <p name="red">長沙</p>
? ? <p class="blue">合肥</p>
? ? <script>
? ? ? ? // DOM是網(wǎng)頁的所有內(nèi)容，網(wǎng)頁是通過瀏覽器打開的，所以，DOM是BOM的一部分。
? ? ? ? console.log(window);? //window對象是整個(gè)BOM
? ? ? ? console.log(window.document);? //window對象的document屬性就是DOM
? ? ? ? // 使用DOM獲取網(wǎng)頁元素
? ? ? ? // 1.如果該網(wǎng)頁元素，在一個(gè)網(wǎng)頁中只會(huì)出現(xiàn)一次，通過document可以直接獲取
? ? ? ? document.title = "好好學(xué)習(xí)DOM"
? ? ? ? document.body.style.backgroundColor = "lightblue"
? ? ? ? // 2.如果網(wǎng)頁元素，在網(wǎng)頁中會(huì)經(jīng)常使用，就需用通過特定的方法來獲取
? ? ? ? // getElementsByTagName()方法，根據(jù)標(biāo)簽的名稱獲取所有該標(biāo)簽
? ? ? ? let hs = document.getElementsByTagName('h2')
? ? ? ? hs[0].innerText = '天津'
? ? ? ? hs[1].innerText = '東京'
? ? ? ? // getElementById()方法，根據(jù)標(biāo)簽的id屬性名稱，獲取對應(yīng)的標(biāo)簽
? ? ? ? // 如果id屬性值不唯一，只獲取第一個(gè)
? ? ? ? let sh = document.getElementById('sh')
? ? ? ? sh.innerText = '鐵嶺'
? ? ? ? // getElementsByName()方法，根據(jù)標(biāo)簽的name屬性值，獲取所有對應(yīng)的標(biāo)簽
? ? ? ? let red = document.getElementsByName('red')
? ? ? ? for(let i=0;i<red.length;i++){
? ? ? ? ? ? red[i].style.color="red"
? ? ? ? }
? ? ? ? // getElementsByClassName()方法，根據(jù)標(biāo)簽的class屬性值，獲取所有對應(yīng)的標(biāo)簽
? ? ? ? let blue = document.getElementsByClassName('blue')
? ? ? ? for(let i=0;i<blue.length;i++){
? ? ? ? ? ? blue[i].style.backgroundColor = 'blue'
? ? ? ? }
? ? </script>
</body>
</html>
簡單的封裝一下：
function $(id){
? ? return document.getElementById(id)
}
querySelector()方法，根據(jù)選擇器的名稱返回元素，如果有多個(gè)元素，只返回第一個(gè)元素。
querySelectorAll()方法，根據(jù)選擇器的名稱返回所有的元素。
注意：querySelectorAll()方法，返回的是集合對象，不是數(shù)組對象?？梢岳谜归_運(yùn)算符，將集合對象轉(zhuǎn)為數(shù)組對象。
轉(zhuǎn)為數(shù)組對象后，就可以使用數(shù)組相關(guān)的方法了。
let divs2 = [...divs]
querySelector()和querySelectorAll()方法里面也可以寫所有的css選擇器。
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>封裝DOM獲取</title>
? ? <style>
? ? ? ? .c{
? ? ? ? ? ? font-size: 30px;
? ? ? ? ? ? color: red;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="nj"></div>
? ? <div id="sh"></div>
? ? <hr>
? ? <div class="a">
? ? ? ? <div class="b">
? ? ? ? ? ? <div class="c">巧克力</div>
? ? ? ? </div>
? ? </div>
? ? <div class="c">薯片</div>
? ? <script>
? ? ? ? // 定義一個(gè)獲取元素的方法
? ? ? ? function $(id){
? ? ? ? ? ? return document.getElementById(id)
? ? ? ? }
? ? ? ? $('nj').innerText = '南京'
? ? ? ? $('sh').innerText = '上海'
? ? ? ? console.log('---------------------------------------');
? ? ? ? // querySelector()方法，根據(jù)選擇器規(guī)則，獲取對應(yīng)的第一個(gè)元素
? ? ? ? // 如果選擇器的返回的結(jié)果不止一個(gè)，只返回第一個(gè)。
? ? ? ? let c = document.querySelector('.a .b .c')
? ? ? ? c.innerText = '蘋果'
? ? ? ? // querySelectorAll()方法，根據(jù)選擇器規(guī)則，獲取對應(yīng)的所有元素
? ? ? ? let cs = document.querySelectorAll('.c')
? ? ? ? cs.forEach(r=>{
? ? ? ? ? ? r.style.backgroundColor = 'pink'
? ? ? ? })
? ? </script>
</body>
</html>
2.2. 操作DOM元素的內(nèi)容和樣式
操作DOM的樣式，有多種方式：
1.通過style屬性直接設(shè)置
2.通過className屬性設(shè)置類選擇器
3.也可以通過classList屬性添加多個(gè)類選擇器
操作DOM的內(nèi)容：
1.innerText屬性，用于獲取 和 操作 DOM的文本內(nèi)容。
2.innerHTML屬性，用于獲取 和 操作 DOM的HTML內(nèi)容。
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>操作DOM的內(nèi)容和樣式</title>
? ? <style>
? ? ? ? div{
? ? ? ? ? ? border: 1px solid #eee;
? ? ? ? ? ? margin: 5px 0;
? ? ? ? ? ? padding: 5px;
? ? ? ? }
? ? ? ? .class1{
? ? ? ? ? ? font-size: 30px;
? ? ? ? ? ? color: blue;
? ? ? ? ? ? border-radius: 5px;
? ? ? ? ? ? background-color: lightblue;
? ? ? ? }
? ? ? ? .size{
? ? ? ? ? ? font-size: 30px;
? ? ? ? }
? ? ? ? .color{
? ? ? ? ? ? color: green;
? ? ? ? }
? ? ? ? .radius{
? ? ? ? ? ? border-radius: 5px;
? ? ? ? }
? ? ? ? .bgcolor{
? ? ? ? ? ? background-color: lightcoral;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="a"></div>
? ? <div class="b"></div>
? ? <div id="c">我正在學(xué)習(xí)JS-DOM</div>
? ? <div id="d">我正在學(xué)習(xí)HTML</div>
? ? <button id="size">添加大小</button>
? ? <button id="color">添加顏色</button>
? ? <button id="radius">添加圓角</button>
? ? <button id="bgcolor">添加背景</button>
? ? <br><br>
? ? <button id="size2">移除大小</button>
? ? <button id="color2">移除顏色</button>
? ? <button id="radius2">移除圓角</button>
? ? <button id="bgcolor2">移除背景</button>
? ? <div id="e">我正在學(xué)習(xí)JavaScript</div>
? ? <script>
? ? ? ? // innerText屬性設(shè)置內(nèi)容時(shí)，不能識別html標(biāo)簽，會(huì)將html標(biāo)簽以文本的形式呈現(xiàn)
? ? ? ? document.querySelector('.a').innerText = '<h2>好好學(xué)習(xí)，天天向上</h2>'
? ? ? ? // innerHTML屬性設(shè)置內(nèi)容時(shí)，能夠識別html標(biāo)簽
? ? ? ? document.querySelector('.b').innerHTML = '<h2>好好學(xué)習(xí)，天天向上</h2>'
? ? ? ? let c = document.querySelector('#c')
? ? ? ? // 通過style屬性設(shè)置元素的樣式
? ? ? ? c.style.color='red'
? ? ? ? // 如果樣式名稱是多個(gè)單詞的組合，需要使用小駝峰命名規(guī)范
? ? ? ? c.style.fontSize='30px'
? ? ? ? let d = document.querySelector('#d')
? ? ? ? // 通過className屬性，給元素指定一個(gè)類選擇器
? ? ? ? d.className = 'class1'
? ? ? ? //獲取div#e元素
? ? ? ? let e = document.querySelector('#e')
? ? ? ? // 通過classList屬性，給元素添加多個(gè)類選擇器
? ? ? ? //獲取#size按鈕，并給按鈕注冊一個(gè)點(diǎn)擊事件
? ? ? ? document.querySelector('#size').onclick = function(){
? ? ? ? ? ? // 通過add方法，添加類選擇器
? ? ? ? ? ? e.classList.add('size')
? ? ? ? }
? ? ? ? // 顏色按鈕點(diǎn)擊事件
? ? ? ? document.querySelector('#color').onclick = function(){
? ? ? ? ? ? e.classList.add('color')
? ? ? ? }
? ? ? ? // 圓角按鈕點(diǎn)擊事件
? ? ? ? document.querySelector('#radius').onclick = function(){
? ? ? ? ? ? e.classList.add('radius')
? ? ? ? }
? ? ? ? // 背景按鈕點(diǎn)擊事件
? ? ? ? document.querySelector('#bgcolor').onclick = function(){
? ? ? ? ? ? e.classList.add('bgcolor')
? ? ? ? }
? ? ? ? // 下面是移除樣式
? ? ? ? document.querySelector('#size2').onclick = function(){
? ? ? ? ? ? // 通過remove方法，移除類選擇器
? ? ? ? ? ? e.classList.remove('size')
? ? ? ? }
? ? ? ? document.querySelector('#color2').onclick = function(){
? ? ? ? ? ? e.classList.remove('color')
? ? ? ? }
? ? ? ? document.querySelector('#radius2').onclick = function(){
? ? ? ? ? ? e.classList.remove('radius')
? ? ? ? }
? ? ? ? document.querySelector('#bgcolor2').onclick = function(){
? ? ? ? ? ? e.classList.remove('bgcolor')
? ? ? ? }
? ? </script>
</body>
</html>
2.3. 操作DOM元素的屬性
獲取和設(shè)置標(biāo)簽自帶的屬性(原生屬性)，直接點(diǎn)
let src = img.src //src是圖片標(biāo)簽的原生屬性
獲取和設(shè)置標(biāo)簽自定義的屬性，需要通過getAttribute()和setAttribute()方法
setAttribute()方法，設(shè)置元素的屬性值，需要傳兩個(gè)參數(shù)（屬性名和屬性值）
getAttribute()方法，獲取元素的屬性值，只需要傳一個(gè)參數(shù)（屬性名）
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>操作DOM的屬性</title>
</head>
<body>
? ? <button id="btn1">顯示圖片</button>
? ? <button id="btn2">更換圖片title</button>
? ? <button id="btn3">給圖片添加address屬性</button>
? ? <br>
? ? <img id="img" title="美麗的風(fēng)景">
? ? <script>
? ? ? ? //獲取圖片標(biāo)簽
? ? ? ? let img = document.querySelector('#img')
? ? ? ? //獲取按鈕并添加點(diǎn)擊事件
? ? ? ? document.querySelector('#btn1').onclick = function(){
? ? ? ? ? ? // 獲取 或 設(shè)置 標(biāo)簽的原生屬性，直接點(diǎn)
? ? ? ? ? ? img.src = 'https://img2.baidu.com/it/u=4265591365,617998863&fm=26&fmt=auto'
? ? ? ? }
? ? ? ? document.querySelector('#btn2').onclick = function(){
? ? ? ? ? ? img.title = '美麗的森林'
? ? ? ? }
? ? ? ? document.querySelector('#btn3').onclick = function(){
? ? ? ? ? ? // 獲取屬性的統(tǒng)一方法 getAttribute('屬性名稱')
? ? ? ? ? ? // 設(shè)置屬性的統(tǒng)一方法 setAttribute('屬性名稱','屬性值')
? ? ? ? ? ? img.setAttribute('address','地址在西班牙')
? ? ? ? ? ? // console.log(img.getAttribute('address'));
? ? ? ? }
? ? </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>js-輪播圖</title>
</head>
<body>
? ? <img id="img">
? ? <script>
? ? ? ? //圖片數(shù)組
? ? ? ? let arr = ["http://p1.music.126.net/wBMu9w9U8o7k4CDssm5FDg==/109951166684652624.jpg?imageView&quality=89",
? ? ? ? ? ? ? ? ? ? "http://p1.music.126.net/82byaQmflAHb77TFu5l5HQ==/109951166682139804.jpg?imageView&quality=89",
? ? ? ? ? ? ? ? ? ? "http://p1.music.126.net/5u6sN5t0dV1HuYjwMrgLbQ==/109951166684095755.jpg?imageView&quality=89",
? ? ? ? ? ? ? ? ? ? "http://p1.music.126.net/k_nbrLSjaqTw1e1Qqy2zDQ==/109951166684891970.jpg?imageView&quality=89",
? ? ? ? ? ? ? ? ? ? "http://p1.music.126.net/uVakCiFutVAzUWZXa8olzQ==/109951166681362674.jpg?imageView&quality=89"]
? ? ? ? //獲取圖片對象
? ? ? ? let img = document.querySelector('#img')
? ? ? ? //定義一個(gè)下標(biāo)
? ? ? ? let index = 0
? ? ? ? //默認(rèn)顯示第一張圖片
? ? ? ? img.src = arr[index]
? ? ? ? setInterval(() => {
? ? ? ? ? ? //如果下標(biāo)已經(jīng)越界了，從頭開始
? ? ? ? ? ? if(index===arr.length-1) index = -1
? ? ? ? ? ? //3秒鐘切換，顯示下一張圖片
? ? ? ? ? ? img.src = arr[++index]
? ? ? ? }, 3000);
? ? </script>
</body>
</html>
2.4. 創(chuàng)建和刪除DOM元素
createElement()方法，用于創(chuàng)建DOM元素
appendChild()方法，用于在當(dāng)前DOM元素中添加子元素
刪除元素有兩種寫法：
1.自刪 remove()方法，是元素刪除自己
2.通過父級刪除子級 removeChild()方法，是刪除元素里面指定的子元素
補(bǔ)充1：onclick是點(diǎn)擊事件，on表示當(dāng)，click表示點(diǎn)擊
補(bǔ)充2：parentElement和parentNode屬性，返回父級元素
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>創(chuàng)建和刪除元素</title>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? #root{
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? padding: 10px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <span>城市：</span>
? ? <input type="text" id="city">
? ? <button id="addElement">添加一個(gè)元素</button>
? ? <ul id="root">
? ? </ul>
? ? <div>
? ? ? ? <p></p>
? ? </div>
? ? <script>
? ? ? ? //獲取ul標(biāo)簽
? ? ? ? let ul = document.querySelector('#root')
? ? ? ? //獲取文本框
? ? ? ? let city = document.querySelector("#city")
? ? ? ? document.querySelector('#addElement').onclick = function(){
? ? ? ? ? ? // createElement()方法，用于創(chuàng)建元素
? ? ? ? ? ? // 創(chuàng)建一個(gè)li標(biāo)簽
? ? ? ? ? ? let li = document.createElement('li')
? ? ? ? ? ? li.innerHTML = city.value? //從文本框里面獲取value屬性值
? ? ? ? ? ? // appendChild()方法，用于向當(dāng)前元素里面追加子元素
? ? ? ? ? ? ul.appendChild(li)
? ? ? ? ? ? // 給創(chuàng)建的每一個(gè)li標(biāo)簽，綁定一個(gè)點(diǎn)擊事件，點(diǎn)擊li標(biāo)簽時(shí)，刪除自己
? ? ? ? ? ? li.onclick = function(){
? ? ? ? ? ? ? ? // 事件方法里面的this，指向事件的調(diào)用者
? ? ? ? ? ? ? ? // console.log(this);?
? ? ? ? ? ? ? ? // 刪除元素的第一種方式，自刪
? ? ? ? ? ? ? ? // li.remove()
? ? ? ? ? ? ? ? // 刪除元素的第二種方式，由父級刪除子級
? ? ? ? ? ? ? ? ul.removeChild(li)
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // parentElement 和 parentNode 返回父級元素
? ? ? ? console.log(document.querySelector('p').parentElement);
? ? ? ? console.log(document.querySelector('p').parentNode);
? ? </script>
</body>
</html>
