目錄
- BOM（Browser Object Model）瀏覽器物件模型
- window物件
- 常用的Window方法
- window的子物件
- navigator物件
- history物件
- location物件
- 彈出框
- 警告框
- 確認框
- 提示框
- 計時相關
- window物件
- DOM （Document Object Model）檔案物件模型
- DOM標準規定HTML檔案中的每個成分都是一個節點(node)
- 查找標簽
- id查找 類查找 標簽查找（直接查找）
- 代碼練習
- 1.id查詢
- 2.類查詢（多個標簽物件回傳陣列）
- 3.標簽查詢（多個標簽物件回傳 陣列）
- 變數名 存盤方法
- 間接查找（熟悉）
- 1.生成變數名（存盤變數名）
- 2.拿父節點（找父標簽）
- 3.找所有的子標簽
- 4.找第一個孩子
- 節點操作
- 1.需求
- 2.創建標簽
- 3.屬性操作
- 4.文本操作
BOM（Browser Object Model）瀏覽器物件模型
目前為止，我們已經學習了javaScript的一些簡單的語法，但是這些簡單的語法，并沒有和瀏覽器有任何互動，也就是我們還不能制作一些我們經常看到的網頁的一些互動，我們需要繼續學習BOM和DOM相關知識，
Javascript 由三部分構成，ECMAScript，DOM和BOM，
BOM（Browser Object Model）是指瀏覽器物件模型，它使 JavaScript 有能力與瀏覽器進行“對話”，
DOM （Document Object Model）是指檔案物件模型，通過它，可以訪問HTML檔案的所有元素
window物件
所有瀏覽器都支持 window 物件，它表示瀏覽器視窗，
常用的Window方法
window.innerHeight - 瀏覽器視窗的內部高度
window.innerWidth - 瀏覽器視窗的內部寬度
window.open() - 打開新視窗
window.close() - 關閉當前視窗
window的子物件
navigator物件
瀏覽器物件，通過這個物件可以判定用戶所使用的瀏覽器，包含了瀏覽器相關資訊，
1.瀏覽器全稱
window.navigator.appName
輸出結果:
"Netscape"
2.瀏覽器廠商和版本的詳細字串
window.navigator.appVersion
輸出結果:
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'
3.用來標識\效驗當前是否是一個瀏覽器 是否存在(userAgent)引數
window.navigator.userAgent
輸出結果:
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'
4.查看當前平臺
window.navigator.platform
擴展(user-agent)網站仿爬措施
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
如何破解該措施？
在你的代碼中加上上面的user-agent配置即可
history物件
瀏覽歷史物件，包含了用戶對當前頁面的瀏覽歷史，但我們無法查看具體的地址，可以簡單的用來前進或后退一個頁面，
history.forward() // 前進一頁
history.back() // 后退一頁
location物件
window.location 物件用于獲得當前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面，
location.href 獲取URL
location.href="https://www.cnblogs.com/zxr1002/p/URL" // 跳轉到指定頁面
location.reload() 重新加載頁面
location.href = 'https://www.sogo.com/'
彈出框
可以在 JavaScript 中創建三種訊息框：警告框、確認框、提示框，
警告框
警告框經常用于確保用戶可以得到某些資訊，
當警告框出現后，用戶需要點擊確定按鈕才能繼續進行操作，
alert("警告框");
確認框
確認框用于使用戶可以驗證或者接受某些資訊，
當確認框出現后，用戶需要點擊確定或者取消按鈕才能繼續進行操作，
如果用戶點擊確認，那么回傳值為 true，如果用戶點擊取消，那么回傳值為 false，
confirm("你確定嗎？")
提示框
提示框經常用于提示用戶在進入頁面前輸入某個值，
當提示框出現后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續操縱，
如果用戶點擊確認，那么回傳值為輸入的值，如果用戶點擊取消，那么回傳值為 null，
prompt("請在下方輸入","你的答案")
計時相關
通過使用 JavaScript，我們可以在一定時間間隔之后來執行代碼，而不是在函式被呼叫后立即執行，我們稱之為計時事件，
- 過一段時間之后觸發
- 每隔一段時間觸發一次
案例：過一段時間之后觸發（一次）3秒觸發一次，可以取消定時任務，就不會進行執行
<script>
function func1() {
alert(123)
}
// 毫秒為單位 3秒之后自動執行func1函式
let t = setTimeout(func1,3000);
// 取消定時任務 如果你想要清除定時任務 需要提前用變數指代定時任務
clearTimeout(t)
</script>
限制每隔3秒觸發執行一次，九秒后觸發 停止執行，
<script>
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）檔案物件模型
DOM 是一套對檔案的內容進行抽象和概念化的方法，
當網頁被加載時，瀏覽器會創建頁面的檔案物件模型(Document Object Model)，
HTML DOM 模型被構造為物件的數，
DOM標準規定HTML檔案中的每個成分都是一個節點(node)
檔案節點(document物件)：代表整個檔案
元素節點(element 物件)：代表一個元素（標簽）
文本節點(text物件)：代表元素（標簽）中的文本
屬性節點(attribute物件)：代表一個屬性，元素（標簽）才有屬性
注釋是注釋節點(comment物件)
所有的標簽都可以稱之為是節點
查找標簽
當我們的js檔案中涉及到了查找標簽的時候，確保能找到該標簽，我們要把js檔案放入body里面最下面，因為代碼是向下走，走到最下面的時候，說明所有涉及到的標簽都已經存在了，就可以使用了，不會存在找不到的情況
id查找 類查找 標簽查找（直接查找）
document.getElementById()
根據id值查找標簽 結果直接是標簽物件本身
document.getElementsByClassName()
根據class值查找標簽 結果是陣列型別
document.getElementsByTagName()
根據標簽名查找標簽 結果是陣列型別
代碼練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d2">div
<div>div>div</div>
<p >div>p
<span>div>p>span</span>
</p>
<p>div>p</p>
</div>
<div>div+div</div>
</body>
</html>
1.id查詢
注意三個方法的回傳值是不一樣的
document.getElementById('d1') # id查詢(唯一)
輸出結果:
<div id=?"d1">?…?</div>? // id不存在的話回傳null
2.類查詢（多個標簽物件回傳陣列）
document.getElementsByClassName('c1') # 回傳陣列
輸出結果:
HTMLCollection(2) [div.c1, p.c1]
注意:
Element與Elements區別
Element：代表查詢單個元素
Elements: 代表查詢多個元素
3.標簽查詢（多個標簽物件回傳 陣列）
document.getElementsByTagName('div') # 陣列
輸出結果:
HTMLCollection(3) [div#d1, div, div, d1: div#d1]
索引取值方法(獲取標簽陣列內容)
document.getElementsByTagName('div')[1]
變數名 存盤方法
let divEle = document.getElementsByTagName('div')[1]
# 列印變數
divEle
輸出結果:
<div >div</div>
注意:(存盤變數名
當你用變數名指代標簽物件的時候 一般情況下都推薦你書寫成(見名知意)
以下示例:
xxxEle
divEle
aEle
pEle
ps:動態創建 臨時有效 非永久
間接查找（熟悉）
parentElement 父節點標簽元素
children 所有子標簽
firstElementChild 第一個子標簽元素
lastElementChild 最后一個子標簽元素
nextElementSibling 下一個兄弟標簽元素
previousElementSibling 上一個兄弟標簽元素
1.生成變數名（存盤變數名）
let divEle = document.getElementById('d1')
2.拿父節點（找父標簽）
let divEle = document.getElementById('d1')
divEle.parentElement
3.找所有的子標簽
divEle.children
回傳結果：
HTMLCollection(3) [p, span, p]
4.找第一個孩子
divEle.firstElementChild
節點操作
1.需求
1.通過DOM操作動態的創建a標簽
2.并且給標簽加屬性
3.最后將a標簽追加到div標簽尾部文本中
2.創建標簽
臨時操作(重繪丟失)
1.創建標簽
let XXXEle = document.createElement('標簽名')
2.添加默認屬性值
XXXEle.id = 'id值'
3.添加內部文本
XXXEle.innerText = '內部文本'
4.尾部添加
divEle.append(XXXEle)
3.屬性操作
XXXEle.屬性 只能是默認屬性
XXXEle.setAttribute() 默認屬性、自定義屬性(可以只記住這個)
例子：
1.既可以設定自定義的屬性也可以設定默認的書寫
imgEle.setAttribute('username','jason')
undefined
2.列印標簽
imgEle
<img src=https://www.cnblogs.com/zxr1002/p/?"111.png" username=?"jason">?
4.文本操作
divEle.innerText # 獲取標簽內部所有的文本
輸出結果:
"div 百度
div>p
div>span"
divEle.innerHTML # 內部文本和標簽都拿到
輸出結果:
"div
<a href="https://www.baidu.com/">百度</a><p id="d2">div>p</p>
<span>div>span</span>"
對比innerText與innerHTML區別
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>"
總結它們倆個的區別
innerText: 只能獲取標簽內部的文本 設定文本的時候不識別HTML標簽
innerHTML: 文本和標簽都獲取 設定文本的時候識別HTML標簽
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502742.html
標籤：JavaScript