前端之BOM、DOM操作
阿新 • • 發佈：2022-12-07
BOM操作
JavaScript分為 ECMAScript，DOM，BOM。
BOM（Browser Object Model）是指瀏覽器物件模型，它使 JavaScript 有能力與瀏覽器進行“對話”。
DOM （Document Object Model）是指文件物件模型，通過它，可以訪問HTML文件的所有元素。
window物件
window.innerHeight - 瀏覽器視窗的內部高度
window.innerWidth - 瀏覽器視窗的內部寬度
window.open() - 開啟新視窗
window.close() - 關閉當前視窗
eg: window.innerHeight 153 window.innerWidth 982 開啟新的網址視窗 window.open('https://www.baidu.com/','','height=400px,width=400px,top=400px,left=400px') 解析內容:新建視窗開啟頁面 第二個引數寫空即可 第三個引數寫新建的視窗的大小和位置
navigator物件（瞭解即可）
瀏覽器物件，通過這個物件可以判定使用者所使用的瀏覽器，包含了瀏覽器相關資訊。
navigator.appName // Web瀏覽器全稱 navigator.appVersion // Web瀏覽器廠商和版本的詳細字串 navigator.userAgent // 客戶端絕大部分資訊 navigator.platform // 瀏覽器執行所在的作業系統 網址防爬： 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配置即可
screen物件（瞭解即可）
螢幕物件，不常用。
一些屬性：
- screen.availWidth - 可用的螢幕寬度
- screen.availHeight - 可用的螢幕高度
history物件（瞭解即可）
window.history 物件包含瀏覽器的歷史。
瀏覽歷史物件，包含了使用者對當前頁面的瀏覽歷史，但我們無法檢視具體的地址，可以簡單的用來前進或後退一個頁面。
history.forward() // 前進一頁
history.back() // 後退一頁
location物件
window.location 物件用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。
常用屬性和方法：
location.href 獲取URL網址
location.href="URL" // 跳轉到指定頁面
location.reload() 重新載入頁面
彈出框
可以在 JavaScript 中建立三種訊息框：警告框、確認框、提示框。
警告框
警告框經常用於確保使用者可以得到某些資訊。當警告框出現後，使用者需要點選確定按鈕才能繼續進行操作。
語法：
alert()
alert('你還看')
確認框（瞭解即可）
確認框用於使使用者可以驗證或者接受某些資訊。當確認框出現後，使用者需要點選確定或者取消按鈕才能繼續進行操作。如果使用者點選確認，那麼返回值為 true。如果使用者點選取消，那麼返回值為 false。
語法：
confirm()
confirm("你確定嗎？")
提示框（瞭解即可）
提示框經常用於提示使用者在進入頁面前輸入某個值。當提示框出現後，使用者需要輸入某個值，然後點選確認或取消按鈕才能繼續操縱。如果使用者點選確認，那麼返回值為輸入的值。如果使用者點選取消，那麼返回值為 null。
語法:
prompt("請在下方輸入","你的答案")
警示框、確認框和提示框演示
計時相關（重要）
通過使用 JavaScript，我們可以在一定時間間隔之後來執行程式碼，而不是在函式被呼叫後立即執行。我們稱之為計時事件
1.過一段時間之後觸發(一次)
setTimeout()
setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變數中。假如你希望取消這個 setTimeout()，你可以使用這個變數名來指定它。setTimeout() 的第一個引數是含有 JavaScript 語句的字串。這個語句可能諸如 "alert('5 seconds!')"，或者對函式的呼叫，諸如 alertMsg()"。第二個引數指示從當前起多少毫秒後執行第一個引數（1000 毫秒等於一秒）。
計時關鍵字
setTimeout()
var t = setTimeout("JS語句"，毫秒)
取消計時事件
clearTimeout()
eg:
<script>
// 在指定時間之後執行一次相應函式
var timer = setTimeout(function(){alert(123);}, 3000) // 毫秒為單位 3秒之後自動執行func1函式
// 取消定時任務 如果你想要清除定時任務 需要提前用變數指代定時任務
clearTimeout(timer);
</script>
2..每隔三秒時間觸發一次(迴圈)
setInterval()
setInterval() 方法可按照指定的週期（以毫秒計）來呼叫函式或計算表示式。setInterval() 方法會不停地呼叫函式，直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。
s = setInterval(func, 3000) // 每隔3000毫秒執行一次
clearInterval(s) // 取消任務
eg:
<script>
function func2() {
alert(123)
}
function show(){
let t = setInterval(func2,3000); // 每隔3秒執行一次
function inner(){
clearInterval(t) // 清除定時器
}
setTimeout(inner,9000) // 9秒中之後觸發/執行
}
show()
</script>
DOM操作
DOM（Document Object Model）是一套對文件的內容進行抽象和概念化的方法。 當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。HTML DOM 模型被構造為物件的樹。
HTML DOM樹
DOM標準規定HTML文件中的每個成分都是一個節點(node)：
文件節點(document物件)：代表整個文件
元素節點(element 物件)：代表一個元素（標籤）
文字節點(text物件)：代表元素（標籤）中的文字
屬性節點(attribute物件)：代表一個屬性，元素（標籤）才有屬性
註釋是註釋節點(comment物件)
JavaScript 可以通過DOM建立動態的 HTML：
JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應
查詢標籤
DOM （Document Object Model）是指文件物件模型，通過它可以訪問HTML文件的所有元素，既然DOM操作是通過js程式碼來操作標籤 所以我們需要先學習如何查詢標籤之後才能給標籤繫結一些JS程式碼(DOM操作)
"""
1.js中變數名的命名風格推薦是駝峰體
2.js程式碼查詢到的標籤如果需要反覆使用可以用變數接收 規律 xxxEle
"""
1.直接查詢
document.getElementById('d1') //根據ID獲取一個標籤
document.getElementsByClassName('c1') //根據class屬性獲取，結果是數組裡面含有多個標籤物件
document.getElementsByTagName('span') //根據標籤名獲取標籤合集，結果是數組裡面含有多個標籤物件
document.getElementsByTagName('span')[索引值] //索引取值
2.間接查詢
parentElement 父節點標籤元素
children 所有子標籤
firstElementChild 第一個子標籤元素
lastElementChild 最後一個子標籤元素
nextElementSibling 下一個兄弟標籤元素
previousElementSibling 上一個兄弟標籤元素
js程式碼：
<div>div
<div>div>div</div>
<p>div>p
<span>div>p>span</span>
</p>
<p id="d1">div>p</p>
<div class="c2">div>div</div>
</div>
操作節點
1.js程式碼建立一個標籤
let aEle = document.createElement('a')
2.新增節點
somenode.appendChild(newnode)；//新增在後面的節點
somenode.insertBefore(newnode,某個節點); // 新增在某個節點後面
3.刪除節點
somenode.removeChild(要刪除的節點)；
4.替換節點
somenode.replaceChild(newnode, 某個節點);
5.屬性節點
//獲取文字節點的值
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
//設定文字節點的值
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"
//attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18") //相容預設屬性和自定義屬性
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自帶的屬性還可以直接.屬性名來獲取和設定
imgEle.src
imgEle.src="..."
js程式碼實操
需求1：
1.通過DOM操作動態的建立img標籤
2.並且給標籤加屬性
3.最後將img標籤追加到div標籤尾部文字中
注意:錯誤的方式(自定義屬性沒辦法點的方法設定
需求2：
1.建立a標籤 設定屬性 設定文字
2.新增到標籤內部
3.指定將a標籤塞在p標籤上面
1.建立a標籤
let aEle = document.createElement('a')
2.設定標籤預設屬性
aEle.href = 'https:/ww.mzitu.com/' 只能新增預設的屬性
3.給標籤設定文字內容
// js程式碼操作標籤文字
aEle.innerText = '這個很棒!'
4.// js程式碼查詢div標籤ID並將a追加到div內部
let divEle = document.getElementsByTagName('div')[0] // 最好是id
divEle.appendChild(aEle)
innerText與innerHTML的區別
.innerText 獲取標籤內部所有的文字內容
.innerText = '文字' 替換/設定標籤內部的文字(不識別標籤語法)
.innerHTML 獲取標籤內部所有的標籤包含文字
.innerHTML = '文字' 替換/設定標籤內部的文字(識別標籤語法)
獲取值操作
1.針對使用者輸入的和使用者選擇的標籤
標籤物件.value
2.針對使用者上傳的檔案資料（需要索引取值）
標籤物件.files fileList [檔案物件、檔案物件、檔案物件]
標籤物件.files[0] 檔案物件
注意:點value無法獲取到檔案資料(錯誤取值),獲取的是檔案路徑，要加上索引值
eg:
fileEle.value
'C:\\fakepath\\新建 DOC 文件.doc'
程式碼實操：
<form action="">
<p>username:
<input type="text" id="username">
</p>
<p>province:
<select name="" id="pro">
<option value="牛奶">111</option>
<option value="果茶">222</option>
<option value="學習">333</option>
</select>
<p>file:
<input type="file" id="file">
</p>
</p>
</form>
class與css操作
1.js操作標籤css樣式
標籤物件.style.屬性名(下劃線沒有 變成駝峰體)
標籤物件.style.color = 'red' //字型顏色
標籤物件.style.fontSize = '28px' //字型大小
標籤物件.style.backgroundColor = 'yellow' //背景顏色
標籤物件.style.border = '3px solid red' //邊框
標籤物件.style.margin
.....
2.js操作標籤class屬性
標籤物件.classList // 獲取標籤所有的類屬性
標籤物件.classList.add('bg_yellow') //新增類
標籤物件.classList.contains() //驗證是否包含某個類屬性true/false
標籤物件.classList.remove() //移除某個類屬性
標籤物件.classList.toggle() // 有則刪除無則新增 有則返回true
程式碼實操：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
height: 400px;
width: 400px;
border-radius: 50%;}
.bg_red {
background-color: red;}
.bg_green {
background-color: greenyellow;}
</style>
</head>
<body>
<P id="d1"> 今天內容挺多的</P>
<div id="d2" class="bg_red bg_green"> </div>
</body>
瀏覽器終端操作
事件
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點選某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動作。
簡單理解就是通過js程式碼給html標籤繫結一些自定義的功能
常見事件
onclick 當用戶點選某個物件時呼叫的事件控制代碼
onfocus 元素獲得焦點 // 練習：輸入框
onblur 元素失去焦點 //應用場景：用於表單驗證,使用者離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證
onchange 域的內容被改變 //應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）
......
補充知識：
ondblclick 當用戶雙擊某個物件時呼叫的事件控制代碼。
onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下並鬆開。
onkeyup 某個鍵盤按鍵被鬆開。
onload 一張頁面或一幅影象完成載入。
onmousedown 滑鼠按鈕被按下。
onmousemove 滑鼠被移動。
onmouseout 滑鼠從某元素移開。
onmouseover 滑鼠移到某元素之上。
onselect 在文字框中的文字被選中時發生。
onsubmit 確認按鈕被點選，使用的物件是form。
this是實參，表示觸發事件的當前元素，函式定義過程中的ths為形參。
繫結事件的多種方式
<!--繫結事件的方式1-->
<button onclick="showMsg()">快按我</button>
<!--繫結事件的方式2-->
<input type="button" value="快快快" id="d1">
<script>
function showMsg() {
let msg = prompt('你確定要這樣嗎?');
console.log(msg)
}
let inputEle = document.getElementById('d1');
inputEle.onclick = function () {
alert('誰在那裡點我!!!')
}
</script>
事件函式中的this關鍵字
this指代的就是當前被操作的標籤物件本身
如果事件函式內有多層巢狀那麼最好在一開始用變數儲存一下防止後續變化
window.onload
當我們給頁面上的元素繫結事件的時候，必須等到文件載入完畢。因為我們無法給一個不存在的元素繫結事件，window.onload事件在檔案載入過程結束的時候觸發。此時，文件中的所有物件都位於DOM中，並且所有影象，指令碼，連結和子框架都已完成載入。
onload方法
XXX.onload 等待XXX載入完畢之後再執行後面的程式碼
事件實戰案例
eg1:
<input type="text" value="遊戲機" id="d1">
<script>
let inputEle = document.getElementById('d1')
inputEle.onfocus = function () {
this.value = ''
}
inputEle.onblur = function () {
this.value = '下次再來喲!'
}
</script>
eg2:校驗使用者登入
<p>username:
<input type="text" id="d1">
<span style="color: red"></span>
</p>
<p>password:
<input type="text" id="d2">
<span style="color: red"></span>
</p>
<button id="suBtn">提交</button>
<script>
// 1.查詢提交按鈕的標籤
subEle = document.getElementById('suBtn')
// 2.給按鈕標籤繫結點選事件
subEle.onclick = function (){
// 3.查詢獲取使用者輸入的標籤並獲取資料
let userNameEle = document.getElementById('d1')
let passWordEle = document.getElementById('d2')
if(userNameEle.value === 'jason'){
userNameEle.nextElementSibling.innerText = '使用者名稱不能是Jason'
}
if(passWordEle.value === '123'){
passWordEle.nextElementSibling.innerText = '密碼不能是123'
}
}
</script>
eg: 省份選擇
<select name="" id="d1">
</select>
市:
<select name="" id="d2">
</select>
<script>
let data = {
"河北": ["廊坊市", "邯鄲市"],
"北京": ["朝陽區", "海淀區"],
"山東": ["威海市", "煙臺市"],
"安徽": ["蕪湖市", "合肥市"],
"上海": ["浦東新區", "靜安區"]
}
// 提前查詢好省和市的select標籤
let proSeEle = document.getElementById('d1');
let citySeEle = document.getElementById('d2');
// 1.獲取所有的省資訊
for (let pro in data) {
// 2.建立option標籤
let proOpEle = document.createElement('option');
// 3.新增文字及屬性
proOpEle.innerText = pro;
proOpEle.setAttribute('value', pro);
// 4.將建立好的option標籤新增到省下拉框中
proSeEle.appendChild(proOpEle)
}
// 5.給省標籤繫結文字域變化事件 onchange
proSeEle.onchange = function () {
citySeEle.innerHTML = ''; // 每次操作市之前清空市資料
// 6.獲取使用者選擇的省資訊 根據省獲取市資訊
let targetProData = this.value;
let cityDataList = data[targetProData];
// 7.迴圈獲取每一個市資訊 建立option標籤 新增到市下拉框中
for (let i = 0; i < cityDataList.length; i++) {
let cityOpEle = document.createElement('option');
cityOpEle.innerText = cityDataList[i];
cityOpEle.setAttribute('value', cityDataList[i]);
citySeEle.appendChild(cityOpEle)
}
}
</script>
jQuery類庫
jQuery介紹
jQuery類庫類似python中的模組。
IE瀏覽器：前端針對iE有時候需要單獨寫一份程式碼
- jQuery是一個輕量級的、相容多瀏覽器的JavaScript庫。
- jQuery使使用者能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax互動，能夠極大地簡化JavaScript程式設計。它的宗旨就是：“Write less, do more.“
jQuery優勢
- 一款輕量級的JS框架。jQuery核心js檔案才幾十kb，不會影響頁面載入速度。（載入速度快）
- 豐富的DOM選擇器,jQuery的選擇器用起來很方便，比如要找到某個DOM物件的相鄰元素，JS可能要寫好幾行程式碼，而jQuery一行程式碼就搞定了，再比如要將一個表格的隔行變色，jQuery也是一行程式碼搞定。（選擇器更多）
- 鏈式表示式。jQuery的鏈式操作可以把多個操作寫在一行程式碼裡，更加簡潔。（一行程式碼走天下）
- 事件、樣式、動畫支援。jQuery還簡化了js操作css的程式碼，並且程式碼的可讀性也比js要強。
- Ajax操作支援。jQuery簡化了AJAX操作，後端只需返回一個JSON格式的字串就能完成與前端的通訊。（重點）
- 跨瀏覽器相容。jQuery基本相容了現在主流的瀏覽器，不用再為瀏覽器的相容問題而傷透腦筋。
- 外掛擴充套件開發。jQuery有著豐富的第三方的外掛，例如：樹形選單、日期控制元件、圖片切換外掛、彈出視窗等等基本前端頁面上的元件都有對應外掛，並且用jQuery外掛做出來的效果很炫，並且可以根據自己需要去改寫和封裝外掛，簡單實用。
jQuery內容
選擇器
篩選器
樣式操作
文字操作
屬性操作
文件處理
事件
動畫效果
外掛
each、data、Ajax
下載連結：jQuery官網
中文文件：jQuery AP中文文件
jQuery版本
1.x 相容IE678 最終版本：1.12.4 (2016年5月20日)
2.x 不相容IE678 最終版本：2.2.4 (2016年5月20日)
3.x 不相容IE678 目前該版本是官方主要更新維護的版本
jQuery物件
jQuery物件就是通過jQuery包裝DOM物件後產生的物件。jQuery物件是 jQuery獨有的。
知識補充
準備工作
1.下載核心檔案到本地引入(沒有網路也可以使用)
<script src="jQuery3.6.js"></script>
2.CDN網路資源載入(必須有網路才可以使用)
https://www.bootcdn.cn/
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js //沒有壓縮
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js //壓縮
什麼是CDN
CDN是內容分發網路
jQuery匯入之後需要使用關鍵字才可以使用
預設的關鍵字就是jQuery但是不好輸可以用 $ 替換
jQuery封裝了JS程式碼 讓編寫更簡單 但是有時候JS程式碼更快（原因要下載入jQuery再載入js程式碼）
js程式碼與jQuery程式碼對比
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
'red'
pEle.nextElementSibling.style.color = 'green'
$('p').first().css('color','yellow').next().css('color','blue')
下面是將jQuery新增到預設環境配置裡
標籤物件與jQuery物件
1.不同的物件能夠呼叫的方法是不同的
在編寫程式碼的時候一定要看清楚手上是什麼物件
2.兩者可以互相轉換
標籤物件轉jQuery物件
$(標籤物件)
jQuery物件轉標籤物件
jQuery物件[0]