【目錄】
一、BOM操作
1、window 物件
2、window 子物件
3、history 物件
4、location 物件(掌握)
5、彈出框
6、計時器相關
二、DOM操作
1、DOM相關概念
2、查找標簽
3、節點操作
4、獲取值操作
5、class、css操作
6、原生JS事件

（以下是使用mac筆記本中的瀏覽器（檢查元素的 console 界面）進行的操作）

一、BOM操作

瀏覽器物件模型 Browser Object Model
js代碼操作瀏覽器

1、window物件

# window物件window物件指代的就是瀏覽器視窗window.innerHeight  瀏覽器視窗的高度900window.innerWidth   瀏覽器視窗的寬度1680

# 新建視窗打開頁面 第二個引數寫空即可 第三個引數寫新建的視窗的大小和位置

window.open(url,target,features)

eg:window.open('https://www.baidu.com/','','height=400px,width=400px,top=400px,left=400px')# 擴展父子頁面通信 window.opener()  了解window.close()  關閉當前頁面

2、window子物件

window.navigator.appName
"Netscape"

window.navigator.appVersion
"5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
window.navigator.userAgent # 用來表示當前是否是一個瀏覽器
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

"""
擴展:防爬措施
1.最簡單最常用的一個就是校驗當前請求的發起者是否是一個瀏覽器
（有以下配置資訊，說明是瀏覽器）
userAgent
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
2、如何破解該措施
在你的代碼中加上上面的user-agent配置即可
"""
window.navigator.platform
"MacIntel"
# 如果是window的子物件那么window可以省略不寫

3、history物件

window.history.back() 回退到上一頁
window.history.forward() 前進到下一頁
# 對應的就是你使用的瀏覽器左上方的兩個的箭頭

4、location物件(掌握)

window.location.href # 獲取當前頁面的url
window.location.href = https://www.cnblogs.com/bigorangecc/p/url # 跳轉到指定的url
window.location.reload() # 屬性頁面瀏覽器左上方的小圓圈

5、彈出框

警告框
alert('請謹慎訪問此網站')

確認框
confirm('你確定加入游戲嗎?')
false
confirm('你確定進入下一輪游戲嗎？')
true

提示框
prompt('歡迎光臨','請先登入')
"歡迎加入"

6、計時器相關

1、過一段時間之后觸發(一次)
setTimeout(func1,3000)
clearTimeout(t)
2、每隔一段時間觸發一次(回圈)
setInterval(func2,3000)
clearInterval(t)

<script>

 // 1、過一段時間之后觸發(一次)    function func1() {        alert(123)    }    let t = setTimeout(func1,3000);      // 毫秒為單位 3秒之后自動執行func1函式    clearTimeout(t)      // 取消定時任務  如果你想要清除定時任務 需要日前用變數指代定時任務

//2、每隔一段時間觸發一次(回圈)    function func2() {        alert(123)    }    function show(){        let t = setInterval(func2,3000);  // 每隔3秒執行一次        function inner(){            clearInterval(t)  // 清除定時器        }        setTimeout(inner,9000)  // 9秒中之后觸發    }    show()</script>

二、DOM操作

檔案物件模型 Document Object Model
js代碼操作標簽

1、DOM相關概念

# DOM樹的概念
所有的標簽都可以稱之為是節點
# JavaScript 可以通過DOM創建動態的 HTML：
JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應
# DOM操作
操作的是標簽而一個html頁面上的標簽有很多
1.先學如何查找標簽
2.再學DOM操作標簽

# DOM操作需要用關鍵字 document 起首

2、查找標簽

（1）直接查找

"""id查找類查找標簽查找"""# 注意三個方法的回傳值是不一樣的document.getElementById('d1')<div id=?"d1">?…?</div>?document.getElementsByClassName('c1')    # 注意 類查找和標簽查找  getElementsBy… —— Element 寫的是復數 Elements 
HTMLCollection [p.c1]0: p.c1length: 1__proto__: HTMLCollection


document.getElementsByTagName('div') 
HTMLCollection(3) [div#d1, div, div, d1: div#d1]  let divEle = document.getElementsByTagName('div')[1] divEle <div>? div>div? </div>?
"""當你用變數名指代標簽物件的時候 一般情況下都推薦你書寫成xxxEledivEleaElepEle"""

（2）間接查找

let pEle = document.getElementsByClassName('c1')[0]  # 注意是否需要索引取值pEle.parentElement  # 拿父節點<div id=?"d1">?"div    "<div>?div>div?</div>?<p class=?"c1">?…?</p>?<p>?div>p?</p>?</div>?
pEle.parentElement.parentElement<body>?…?</body>?
pEle.parentElement.parentElement.parentElement<html lang=?"en">?<head>?…?</head>?<body>?…?</body>?</html>?
pEle.parentElement.parentElement.parentElement.parentElementnulllet divEle = document.getElementById('d1')divEle.children  # 獲取所有的子標簽divEle.children[0]<div>?div>div?</div>?divEle.firstElementChild<div>?div>div?</div>?divEle.lastElementChild<p>?div>p?</p>?divEle.nextElementSibling  # 同級別下面第一個<div>?div下面div?</div>?divEle.previousElementSibling  # 同級別上面第一個<div>?div上面的div?</div>?

3、節點操作

（1）

document.createElement('img')  # 創建標簽

"""通過DOM操作動態的創建img標簽并且給標簽加屬性最后將標簽添加到文本中"""let imgEle = document.createElement('img')  # 創建標簽imgEle.src = '111.png'  # 給標簽設定默認的屬性"111.png"imgEleimgEle.username = 'jason'  # 自定義的屬性沒辦法點的方式直接設定"jason"imgEle<img src=https://www.cnblogs.com/bigorangecc/p/?"111.png">?imgEle.setAttribute('username','jason')   # 既可以設定自定義的屬性也可以設定默認的書寫undefinedimgEle<img src=https://www.cnblogs.com/bigorangecc/p/?"111.png" username=?"jason">?imgEle.setAttribute('title','一張圖片')imgEle<img src=https://www.cnblogs.com/bigorangecc/p/?"111.png" username=?"jason" title=?"一張圖片">?let divEle = document.getElementById('d1')undefineddivEle.appendChild(imgEle)  # 標簽內部添加元素(尾部追加)<img src=https://www.cnblogs.com/bigorangecc/p/?"111.png" username=?"jason" title=?"一張圖片">?

(2)

"""創建a標簽設定屬性設定文本添加到標簽內部    添加到指定的標簽的上面"""let aEle = document.createElement('a')aEle<a>?</a>?aEle.href = 'https://www.mzitu.com/'"https://www.mzitu.com/"aEle<a href=https://www.cnblogs.com/bigorangecc/p/?"https:?/?/?www.mzitu.com/?">?</a>?aEle.innerText = '點我有你好看!'  # 給標簽設定文本內容"點我有你好看!"aEle<a href=https://www.cnblogs.com/bigorangecc/p/?"https:?/?/?www.mzitu.com/?">?點我有你好看!?</a>?let divEle = document.getElementById('d1')undefinedlet pEle = document.getElementById('d2')undefineddivEle.insertBefore(aEle,pEle)  # 添加標簽內容指定位置添加<a href=https://www.cnblogs.com/bigorangecc/p/?"https:?/?/?www.mzitu.com/?">?點我有你好看!?</a>?

(3)

"""額外補充    appendChild()        removeChild()        replaceChild()            setAttribute()  設定屬性        getAttribute()  獲取屬性        removeAttribute()  移除屬性"""# innerText與innerHTMLdivEle.innerText  # 獲取標簽內部所有的文本"div 點我有你好看!div>pdiv>span"divEle.innerHTML  # 內部文本和標簽都拿到"div        <a href=https://www.cnblogs.com/bigorangecc/p/"https://www.mzitu.com/">點我有你好看!</a><p id="d2">div&gt;p</p>        <span>div&gt;span</span>    "    divEle.innerText = 'heiheihei'"heiheihei"divEle.innerHTML = 'hahahaha'"hahahaha"divEle.innerText = '<h1>heiheihei</h1>'  # 不識別html標簽"<h1>heiheihei</h1>"divEle.innerHTML = '<h1>hahahaha</h1>'  # 識別html標簽"<h1>hahahaha</h1>"

4、獲取值操作

# 獲取用戶資料標簽內部的資料let seEle = document.getElementById('d2')seEle.value"111"seEle.value"333"let inputEle = document.getElementById('d1')inputEle.value

# 如何獲取用戶上傳的檔案資料let fileEle = document.getElementById('d3')fileEle.value  # 無法獲取到檔案資料"C:\fakepath\02_測驗路由.png"fileEle.filesFileList {0: File, length: 1}0: File {name: "02_測驗路由.png", lastModified: 1557043082000, 
lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中國標準時間),
 webkitRelativePath: "", size: 29580, …}length: 1__proto__: FileList      fileEle.files[0]  # 獲取檔案資料File {name: "02_測驗路由.png", lastModified: 1557043082000, 
lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中國標準時間), webkitRelativePath: "", size: 29580, …}

5、class、css操作

let divEle = document.getElementById('d1')undefineddivEle.classList  # 獲取標簽所有的類屬性DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]divEle.classList.remove('bg_red')  # 移除某個類屬性undefineddivEle.classList.add('bg_red')  # 添加類屬性undefineddivEle.classList.contains('c1')  # 驗證是否包含某個類屬性truedivEle.classList.contains('c2')falsedivEle.classList.toggle('bg_red')  # 有則洗掉無則添加falsedivEle.classList.toggle('bg_red')truedivEle.classList.toggle('bg_red')falsedivEle.classList.toggle('bg_red')truedivEle.classList.toggle('bg_red')falsedivEle.classList.toggle('bg_red')true# DOM操作操作標簽樣式 統一先用style起首let pEle = document.getElementsByTagName('p')[0]undefinedpEle.style.color = 'red'"red"pEle.style.fontSize = '28px'"28px"pEle.style.backgroundColor = 'yellow'"yellow"pEle.style.border = '3px solid red'"3px solid red"

6、原生JS事件

(1) 什么是事件，以及系結事件的兩種方法

"""達到某個事先設定的條件 自動觸發的動作"""# 系結事件的兩種方式<button onclick="func1()">點我</button><button id="d1">點我</button><script>    // 第一種系結事件的方式    function func1() {        alert(111)    }    // 第二種    let btnEle = document.getElementById('d1');    btnEle.onclick = function () {        alert(222)    }</script>"""script標簽既可以放在head內 也可以放在body內但是通常情況下都是放在body內的最底部# 等待瀏覽器視窗加載完畢之后再執行代碼window.onload = function () {            // 第一種系結事件的方式            function func1() {                alert(111)            }            // 第二種            let btnEle = document.getElementById('d1');            btnEle.onclick = function () {                alert(222)            }        }"""

（2）應用栗子

開關燈案例

<div id="d1" class="c1 bg_red bg_green"></div>    <button id="d2">變色</button>    <script>        let btnEle = document.getElementById('d2')        let divEle = document.getElementById('d1')        btnEle.onclick = function () {  // 系結點擊事件            // 動態的修改div標簽的類屬性            divEle.classList.toggle('bg_red')        }    </script>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <meta name="viewport" content="width=device-width, initial-scale=1">    <style>        .c1 {            height: 400px;            width: 400px;            border-radius: 50%;        }        .bg_green {            background-color: greenyellow;        }        .bg_red {            background-color: red;        }    </style></head><body>    <div id="d1" class="c1 bg_red bg_green"></div>    <button id="d2">變色</button>    <script>        let btnEle = document.getElementById('d2')        let divEle = document.getElementById('d1')        btnEle.onclick = function () {  // 系結點擊事件            // 動態的修改div標簽的類屬性            divEle.classList.toggle('bg_red')        }    </script></body></html>

詳細代碼

input框獲取焦點失去焦點案例

<input type="text" value="老板 去嗎?" id="d1"><script>    let iEle = document.getElementById('d1')    // 獲取焦點事件    iEle.onfocus = function () {        // 將input框內部值去除        iEle.value = ''        //  點value就是獲取   等號賦值就是設定    }    // 失去焦點事件    iEle.onblur = function () {        // 給input標簽重寫賦值        iEle.value = '沒錢 不去!'    }</script>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <meta name="viewport" content="width=device-width, initial-scale=1"></head><body><input type="text" value="老板 去嗎?" id="d1"><script>    let iEle = document.getElementById('d1')    // 獲取焦點事件    iEle.onfocus = function () {        // 將input框內部值去除        iEle.value = ''        //  點value就是獲取   等號賦值就是設定    }    // 失去焦點事件    iEle.onblur = function () {        // 給input標簽重寫賦值        iEle.value = '沒錢 不去!'    }</script></body></html>

View Code

實時展示當前時間

<input type="text" id="d1" style="display: block;height: 50px;width: 200px"><button id="d2">開始</button><button id="d3">結束</button><script>    // 先定義一個全域存盤定時器的變數    let t = null    let inputEle = document.getElementById('d1')    let startBtnEle = document.getElementById('d2')    let endBtnEle = document.getElementById('d3')    // 1 訪問頁面之后 將訪問的時間展示到input框中    // 2 動態展示當前時間    // 3 頁面上加兩個按鈕 一個開始 一個結束    function showTime() {        let currentTime = new Date();        inputEle.value = currentTime.toLocaleString()    }    startBtnEle.onclick = function () {        // 限制定時器只能開一個        if(!t){            t = setInterval(showTime,1000)  // 每點擊一次就會開設一個定時器 而t只指代最后一個        }    }    endBtnEle.onclick = function () {        clearInterval(t)        // 還應該將t重置為空        t = null    }</script>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <meta name="viewport" content="width=device-width, initial-scale=1"></head><body><input type="text" id="d1" style="display: block;height: 50px;width: 200px"><button id="d2">開始</button><button id="d3">結束</button><script>    // 先定義一個全域存盤定時器的變數    let t = null    let inputEle = document.getElementById('d1')    let startBtnEle = document.getElementById('d2')    let endBtnEle = document.getElementById('d3')    // 1 訪問頁面之后 將訪問的時間展示到input框中    // 2 動態展示當前時間    // 3 頁面上加兩個按鈕 一個開始 一個結束    function showTime() {        let currentTime = new Date();        inputEle.value = currentTime.toLocaleString()    }    startBtnEle.onclick = function () {        // 限制定時器只能開一個        if(!t){            t = setInterval(showTime,1000)  // 每點擊一次就會開設一個定時器 而t只指代最后一個        }    }    endBtnEle.onclick = function () {        clearInterval(t)        // 還應該將t重置為空        t = null    }</script></body></html>

View Code

省市聯動

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <meta name="viewport" content="width=device-width, initial-scale=1"></head><body><select name="" id="d1">    <option value="" selected disabled>--請選擇--</option></select><select name="" id="d2"></select><script>    let proEle = document.getElementById('d1')    let cityEle = document.getElementById('d2')    // 先模擬省市資料    data = {        "河北": ["廊坊", "邯鄲",'唐山'],        "北京": ["朝陽區", "海淀區",'昌平區'],        "山東": ["威海市", "煙臺市",'臨沂市'],        '上海':['浦東新區','靜安區','黃浦區'],        '深圳':['南山區','寶安區','福田區']    };    // 選for回圈獲取省    for(let key in data){        // 將省資訊做成一個個option標簽 添加到第一個select框中        // 1 創建option標簽        let opEle = document.createElement('option')        // 2 設定文本        opEle.innerText = key        // 3 設定value        opEle.value = key  // <option value="https://www.cnblogs.com/bigorangecc/p/省">省</option>        // 4 將創建好的option標簽添加到第一個select中        proEle.appendChild(opEle)    }    // 文本域變化事件  change事件    proEle.onchange = function () {        // 先獲取到用戶選擇的省        let currentPro = proEle.value        // 獲取對應的市資訊        let currentCityList = data[currentPro]        // 清空市select中所有的option        cityEle.innerHTML = ''        // 自己加一個請選擇        let ss = "<option disabled selected>請選擇</option>"        // let oppEle = document.createElement('option')        // oppEle.innerText = '請選擇'        // oppEle.setAttribute('selected','selected')        cityEle.innerHTML = ss        // for回圈所有的市 渲染到第二個select中        for (let i=0;i<currentCityList.length;i++){            let currentCity = currentCityList[i]            // 1 創建option標簽            let opEle = document.createElement('option')            // 2 設定文本            opEle.innerText = currentCity            // 3 設定value            opEle.value = currentCity  // <option value="https://www.cnblogs.com/bigorangecc/p/省">省</option>            // 4 將創建好的option標簽添加到第一個select中            cityEle.appendChild(opEle)        }    }</script></body></html>

View Code

參考閱讀：

https://www.cnblogs.com/xiaoyuanqujing/articles/11670078.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/87031.html

標籤：JavaScript

上一篇：你真的需要 Webpack DllPlugin 嗎？

下一篇：js+canvas實作svg標簽另存為圖片

【2020Python修煉記】前端開發之 JavaScript 的 BOM 和 DOM 操作

【目錄】

一、BOM操作

1、window 物件

2、window 子物件

3、history 物件

4、location 物件(掌握)

5、彈出框

6、計時器相關

二、DOM操作

1、DOM相關概念

2、查找標簽

3、節點操作

4、獲取值操作

5、class、css操作

6、原生JS事件

（以下是使用mac筆記本中的瀏覽器（檢查元素的 console 界面）進行的操作）

一、BOM操作

瀏覽器物件模型 Browser Object Model

js代碼操作 瀏覽器

1、window物件

2、window子物件

3、history物件

window.history.back() 回退到上一頁window.history.forward() 前進到下一頁

# 對應的就是你使用的瀏覽器左上方的兩個的箭頭

4、location物件(掌握)

window.location.href # 獲取當前頁面的urlwindow.location.href = https://www.cnblogs.com/bigorangecc/p/url # 跳轉到指定的urlwindow.location.reload() # 屬性頁面 瀏覽器左上方的小圓圈

5、彈出框

警告框

alert('請謹慎訪問此網站')

確認框

confirm('你確定加入游戲嗎?')

false

confirm('你確定進入下一輪游戲嗎？')

true

提示框

prompt('歡迎光臨','請先登入')

"歡迎加入"

6、計時器相關

1、過一段時間之后觸發(一次)

setTimeout(func1,3000)

clearTimeout(t)

2、每隔一段時間觸發一次(回圈)

setInterval(func2,3000)

clearInterval(t)

二、DOM操作

檔案物件模型 Document Object Model

js代碼操作 標簽

1、DOM相關概念

# DOM樹的概念

所有的標簽都可以稱之為是節點

# JavaScript 可以通過DOM創建動態的 HTML：

JavaScript 能夠改變頁面中的所有 HTML 元素JavaScript 能夠改變頁面中的所有 HTML 屬性JavaScript 能夠改變頁面中的所有 CSS 樣式JavaScript 能夠對頁面中的所有事件做出反應

# DOM操作

操作的是標簽 而一個html頁面上的標簽有很多

1.先學如何查找標簽 2.再學DOM操作標簽 # DOM操作需要用關鍵字 document 起首

2、查找標簽

（1）直接查找

（2）間接查找

3、節點操作

（1）

4、獲取值操作

5、class、css操作

6、原生JS事件

(1) 什么是事件，以及系結事件的兩種方法

（2）應用栗子

開關燈案例

input框獲取焦點失去焦點案例

實時展示當前時間

省市聯動

js代碼操作瀏覽器

window.history.back() 回退到上一頁
window.history.forward() 前進到下一頁

window.location.href # 獲取當前頁面的url
window.location.href = https://www.cnblogs.com/bigorangecc/p/url # 跳轉到指定的url
window.location.reload() # 屬性頁面瀏覽器左上方的小圓圈

js代碼操作標簽

JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應

操作的是標簽而一個html頁面上的標簽有很多

1.先學如何查找標簽
2.再學DOM操作標簽

# DOM操作需要用關鍵字 document 起首