前端開發 5 BOM操作與DOM操作
阿新 • • 發佈：2022-12-06
今日內容詳細
目錄BOM操作
BOM(Browser Object Model)是指瀏覽器物件模型，它使JavaScript 有能力與瀏覽器進行“對話” ECMAScript是JavaScript的核心，但在web使用JavaScript，那麼BOM(瀏覽器物件模型)才是真正的核心。 BOM的核心物件是window，它表示瀏覽器的一個例項 在瀏覽器中，window物件既是JavaScript訪問瀏覽器視窗的一個介面，又是ECMAScript規定的Global物件。也就是說，在網頁中定義的任何一個變數、物件和函式以window作為其Global物件。 一些基本常見的Windows方法: window.innnerHeight - 瀏覽器視窗的內部高度 window.innerWidh - 瀏覽器視窗的內部寬度 window.open() - 開啟新視窗 window.close() - 關閉當前視窗 window.open('https://www.sogo.com/','','width=800px,left=200px')
window的子物件
navigator物件
瀏覽器物件 通過這個物件可以判定使用者所使用的瀏覽器 包含了瀏覽器相關資訊
navigator.appName // Web瀏覽器全稱
navigator.appVersion // Web瀏覽器廠商和版本的詳細字串
navigator.userAgent // 客戶端絕大部分資訊
navigator.platform // 瀏覽器執行所在的作業系統
screeen物件
螢幕物件 不常用
一些屬性:
screen.availWidth - 可用的螢幕寬度
screen.availHeight - 可用的螢幕高度
history物件
window.history 物件包含瀏覽器的歷史 瀏覽歷史物件，包含了使用者對當前頁面的瀏覽歷史，但我們無法檢視具體的地址，可以簡單的用來前進或後退一個頁面 history.forwoard() // 前進一頁 history.back() // 後退一頁
location物件
window.location物件用於獲得當前頁面的地址(URL),並把瀏覽器重定向到新的頁面。
常用屬性和方法:
location.href // 獲取當前頁面所在的網址(URL)
location.href='URL' // 跳轉到指定頁面
location.reload() // 重新載入頁面
彈出框
可以在JavaScript中建立三種訊息框:警告框、確認框、提示框
警告框
警告框用於確保使用者可以得到某些資訊
當警告框出現後 使用者需要點選確認按鈕才能繼續進行操作
alert("你看到了嗎?");
確認框
確認框用於使使用者可以驗證或者接受某些資訊 當確認框出現後 使用者需要點選確定或者取消按鈕才能繼續進行操作 如果使用者點選確認 那麼返回值為true 如果使用者點選取消 那麼返回值為false confirm("你確定了嗎?");
提示框
提示框經常用於提示使用者在進入頁面前輸入某個值
當提示框出現後，使用者需要輸入某個值，然後點選確認或取消按鈕才能繼續操縱。
如果使用者點選確認，那麼返回值為輸入的值。如果使用者點選取消，那麼返回值為 null。
prompt("請在下方輸入","你的答案")
計時相關
通過使用JavaScript 我們可以在一定時間間隔之後來執行程式碼 而不是在函式被呼叫後立即執行 我們稱之為計時事件
let t = setTimeout(showMsg, 3000) // 3000毫秒之後執行函式
clearTimeout(t) // 取消任務
let s = setInterval(func, 3000) // 每隔3000毫秒執行一次函式
clearInterval(s) // 取消任務
DOM操作
DOM(Document Object Model) 是一套對文件的內容進行抽象和概念化的方法, 通過它可以訪問HTML文件的所有元素
當網頁被載入時，瀏覽器會建立頁面的文件物件模型
HTML DOM 模型被構造為物件的樹。
DOM標準規定HTML文件中的每個成分都是一個節點(node)：
·文件節點(document物件)：代表整個文件
·元素節點(element 物件)：代表一個元素（標籤）
·文字節點(text物件)：代表元素（標籤）中的文字
·屬性節點(attribute物件)：代表一個屬性，元素（標籤）才有屬性
·註釋是註釋節點(comment物件)
JavaScript 可以通過DOM建立動態的 HTML：
·JavaScript 能夠改變頁面中的所有 HTML 元素
·JavaScript 能夠改變頁面中的所有 HTML 屬性
·JavaScript 能夠改變頁面中的所有 CSS 樣式
·JavaScript 能夠對頁面中的所有事件做出反應
查詢標籤
"""
1.js中變數名的命名風格推薦是駝峰體
2.js程式碼查詢到的標籤如果需要反覆使用可以用變數接受規律 xxxEle
"""
document.getElementById('d1') 根據ID獲取一個標籤
結果就是標籤物件本身
document.getElementsByClassName('c1') 根據class屬性獲取
結果是數組裡面含有多個標籤物件
document.getElementsByTagName('span') 根據標籤名獲取標籤合集
結果是數組裡面含有多個標籤物件
parentElement 父節點標籤元素
children 所有子標籤
firstElementChild 第一個子標籤元素
lastElementChild 最後一個子標籤元素
nextElementSibling 下一個兄弟標籤元素
previousElementSibling 上一個兄弟標籤元素
操作節點
// js程式碼建立一個標籤
let aEle = document.createElement('a')
// js程式碼操作標籤屬性
aEle.href = 'http://www.lsmpx.com/' 只能新增預設的屬性
setAttribute() 相容預設屬性和自定義屬性
getAttribute("age")
// js程式碼操作標籤文字
aEle.innerText = '這個很攢勁!'
// js程式碼查詢div標籤並將a追加到div內部
let divEle = document.getElementsByTagName('div')[0]
divEle.appendChild(aEle)
// 新增節點
追加一個子節點(作為最後的子節點)
somenode.appendChild(newnode);
增加的節點放在某個節點的前邊
somenode.insertBefore(newnode,某個節點);
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);
.innerText 獲取標籤內部所有的文字內容
.innerText = '文字' 替換/設定標籤內部的文字(不識別標籤語法)
.innerHTML 獲取標籤內部所有的標籤包含文字
.innerHTML = '文字' 替換/設定標籤內部的文字(識別標籤語法)
// 刪除節點
通過父元素呼叫該方法刪除要刪除的元素
somenode.removeAttribute("age")
// 替換節點
somenode.replaceChild(newnode,要替換的節點)
獲取值操作
1.針對使用者輸入的和使用者選擇標籤
標籤物件.value
2.針對使用者上傳的檔案資料
標籤物件.files fileList [檔案物件、檔案物件、檔案物件...]
標籤物件.files[0] 檔案物件
class的操作
js操作標籤class屬性
className 獲取所有樣式類名(字串)
標籤物件.classList.remove(cls) 刪除指定類
標籤物件.classList.add(cls) 新增類
標籤物件.classList.contains(cls) 存在返回true，否則返回
標籤物件.falseclassList.toggle(cls) 存在就刪除，否則新增
css操作
js操作標籤css樣式
1.對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
事件
事件可以簡單的理解為通過js程式碼給html標籤繫結一些自定義的功能
常見事件
onclick 當用戶點選某個物件時呼叫的
事件控制代碼
onfocus 元素獲得焦點
onblur 元素失去焦點
onchange 域的內容被改變
......
繫結事件的多種方式
<!--繫結事件的方式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指代的就是當前被操作的標籤物件本身
如果事件函式內有多層巢狀那麼最好在一開始用變數儲存一下防止後續變化
onload方法
XXX.onload 等待XXX載入完畢之後再執行後面的程式碼
事件實戰案例
<input type="text" value="遊戲機" id="d1">
<script>
let inputEle = document.getElementById('d1')
inputEle.onfocus = function () {
this.value = ''
}
inputEle.onblur = function () {
this.value = '下次再來喲!'
}
</script>
<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>
省:
<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類庫
"""
IE瀏覽器:前端針對IE有時候需要單獨再編寫一份程式碼
"""
jQuery是一個輕量級的、相容多瀏覽器的JavaScript庫。
jQuery使使用者能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax互動，能夠極大地簡化JavaScript程式設計。
口號:Write less, do more 寫的更少做的更多
1.載入速度快
2.選擇器更多更好用
3.一行程式碼走天下
4.支援ajax請求(重點)
5.相容多瀏覽器
6.豐富的第三方的外掛 例如:樹形選單、日期控制元件、圖片切換外掛、彈出視窗等等
準備工作
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
內容分佈網路
jQuery匯入之後需要使用關鍵字才可以使用
預設的關鍵字就是jQuery但是不好輸入 >>>: $
jQuery封裝了JS程式碼 讓編寫更簡單 到那有時候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物件就是通過jQuery包裝DOM物件後產生的物件。jQuery物件是 jQuery獨有的。
雖然 jQuery物件是包裝 DOM物件後產生的，但是 jQuery物件無法使用 DOM物件的任何方法，同理 DOM物件也沒不能使用 jQuery裡的方法。
1.不同的物件能夠呼叫的方法是不同的:
在編寫程式碼的時候一定要看清楚手上是什麼物件
2.兩者可以互相轉換:
一個約定，我們在宣告一個jQuery物件變數的時候在變數名前面加上$：
var $variable = jQuery對像
var variable = DOM物件
$variable[0]//jQuery物件轉成DOM物件
拿上面那個例子舉例，jQuery物件和DOM物件的使用：
$("#i1").html();//jQuery物件可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM物件使用DOM的方法