【目錄】一、BOM操作 1、window 對象 2、window 子對象 3、history 對象 4、location 對象(掌握) 5、彈出框 6、計時器相關二、DOM操作 1、DOM相關概念 2、查找標簽 3、節點操作 4、獲取值操作 5、class、css操作（以下是使用mac筆記本中 ...

【目錄】

一、BOM操作

1、window 對象

2、window 子對象

3、history 對象

4、location 對象(掌握)

5、彈出框

6、計時器相關

二、DOM操作

1、DOM相關概念

2、查找標簽

3、節點操作

4、獲取值操作

5、class、css操作

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

一、BOM操作

瀏覽器對象模型 Browser Object Model

js代碼操作瀏覽器

1、window對象

# window對象
window對象指代的就是瀏覽器視窗

window.innerHeight  瀏覽器視窗的高度
900
window.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 = 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>

"""
當你用變數名指代標簽對象的時候 一般情況下都推薦你書寫成
xxxEle
divEle
aEle
pEle
"""

（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.parentElement
null

let 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"
imgEle

imgEle.username = 'jason'  # 自定義的屬性沒辦法點的方式直接設置
"jason"
imgEle
<img src="111.png">


imgEle.setAttribute('username','jason')   # 既可以設置自定義的屬性也可以設置預設的書寫
undefined
imgEle
<img src="111.png" username="jason">
imgEle.setAttribute('title','一張圖片')
imgEle
<img src="111.png" username="jason" title="一張圖片">

let divEle = document.getElementById('d1')
undefined
divEle.appendChild(imgEle)  # 標簽內部添加元素(尾部追加)
<img src="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.mzitu.com/"></a>

aEle.innerText = '點我有你好看!'  # 給標簽設置文本內容
"點我有你好看!"
aEle
<a href="https://www.mzitu.com/">點我有你好看!</a>
let divEle = document.getElementById('d1')
undefined
let pEle = document.getElementById('d2')
undefined
divEle.insertBefore(aEle,pEle)  # 添加標簽內容指定位置添加
<a href="https://www.mzitu.com/">點我有你好看!</a>

(3)

"""
額外補充
    appendChild()
        removeChild()
        replaceChild()
    
    
    setAttribute()  設置屬性
        getAttribute()  獲取屬性
        removeAttribute()  移除屬性
"""

# innerText與innerHTML
divEle.innerText  # 獲取標簽內部所有的文本
"div 點我有你好看!
div>p
div>span"

divEle.innerHTML  # 內部文本和標簽都拿到
"div
        <a href="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.files
FileList {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')
undefined
divEle.classList  # 獲取標簽所有的類屬性
DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]


divEle.classList.remove('bg_red')  # 移除某個類屬性
undefined

divEle.classList.add('bg_red')  # 添加類屬性
undefined
divEle.classList.contains('c1')  # 驗證是否包含某個類屬性
true
divEle.classList.contains('c2')
false

divEle.classList.toggle('bg_red')  # 有則刪除無則添加
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
divEle.classList.toggle('bg_red')
true



# DOM操作操作標簽樣式 統一先用style起首
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
"red"
pEle.style.fontSize = '28px'
"28px"
pEle.style.backgroundColor = 'yellow'
"yellow"
pEle.style.border = '3px solid red'
"3px solid red"

參考閱讀：

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

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

【目錄】

一、BOM操作

1、window 對象

2、window 子對象

3、history 對象

4、location 對象(掌握)

5、彈出框

6、計時器相關

二、DOM操作

1、DOM相關概念

2、查找標簽

3、節點操作

4、獲取值操作

5、class、css操作

一、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 = 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操作

js代碼操作瀏覽器

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

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

js代碼操作標簽

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

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

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

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