JS之BOM與DOM
阿新 • • 發佈：2022-12-06
目錄
BOM操作
所有瀏覽器都支援 window 物件。它表示瀏覽器視窗。 *如果文件包含框架（frame 或 iframe 標籤），瀏覽器會為 HTML 文件建立一個 window 物件，併為每個框架建立一個額外的 window 物件。 *沒有應用於 window 物件的公開標準，不過所有瀏覽器都支援該物件。 所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。 全域性變數是 window 物件的屬性。全域性函式是 window 物件的方法。 接下來要講的HTML DOM 的 document 也是 window 物件的屬性之一。 一些常用的Window方法： window.innerHeight - 瀏覽器視窗的內部高度 window.innerWidth - 瀏覽器視窗的內部寬度 window.open() - 開啟新視窗 window.close() - 關閉當前視窗 history.forward()-前進一頁 history.back()-後退一頁 window.location.reload()-重新整理當前頁面 confirm() 確認框,有返回值true或者false prompt() 括號內可以寫兩個，第一個是提示，第二個是預設值 提示框，返回的是使用者填寫的內容 altert() 警告框，括號內填寫警告的內容
計時器相關操作（重要）
操作1:定時延遲執行 <body> <script> function showMsg(){ alert('快來獲取美女圖片吧') } let t=setTimeout(showMsg,3000) /*第一個填寫呼叫的函式，第二個填寫的延遲的毫秒時間*/ clearTimeout(t) //取消任務 </script> </body> 操作2:迴圈定時執行 <body> <script> function showMsg(){ alert('快來獲取美女圖片吧') } let t=setInterval(showMsg,3000) //每隔3000毫秒執行一下 clearInterval(t) //取消任務 </script> </body>
DOM操作
DOM （Document Object Model）是指文件物件模型，通過它可以訪問HTML文件的所有元素
既然DOM操作是通過js程式碼來操作標籤 所以我們需要先學習如何查詢標籤之後才能給標籤繫結一些JS程式碼(DOM操作)
查詢標籤
""" 1.js中變數名的命名風格推薦是駝峰體 2.js程式碼查詢到的標籤如果需要反覆使用可以用變數接收 變數名規律xxxEle """ document.getElemengtById('d1') 結果就是標籤物件本身 document.getElementsByClassName('c1') 結果是數組裡麵包含有多個標籤物件 document.getElementsByTagName('span') 結果是數組裡面含有多個標籤物件 parentElement 父節點標籤元素 children 所有子標籤 firstElementChild 第一個字標籤元素 lastElementChild 最後一個子標籤元素 nextElementSibling 下一個兄弟標籤元素 previousElementSibling 上一個兄弟標籤元素
操作節點
js程式碼建立一個標籤
let aEle = document.createElement('a')
js程式碼操作標籤屬性
aEle.href = '網址' 只能新增預設引數
js程式碼操作標籤文字
aEle.innerText = '文字內容'
js程式碼查詢div標籤並將a追加到div內部
let divEle = document.getElementById('d1')//查詢div標籤
divEle.appendChild(aEle)//div標籤尾部新增子標籤
js程式碼操作關鍵詞
.innerText 獲取標籤內部所有的文字內容
.innerText='文字' 替換/設定標籤內部的文字(不識別標籤語法)
.innerHTML 獲取標籤內部所有的標籤包含文字
.innerHTML='文字' 替換/設定標籤內部的文字(識別標籤語法)
獲取值操作
1.針對使用者輸入的和使用者選擇的標籤
標籤物件.value
2.針對使用者上傳的檔案資料
標籤物件.files
標籤物件.files[0]
let fileEle = document.getElementsByClassName('c1')
fileEle[0].files //獲取上傳資料內容
class與css操作
1.js操作標籤css樣式
標籤物件.style.屬性名(下劃線沒有 程式設計駝峰體)
2.js操作標籤class屬性
標籤物件.classList.add()
標籤物件.classList.contains()
標籤物件.classList.remove()
標籤物件.classList.toggle()
事件
事件可以鍵的的理解為通過js程式碼給html標籤繫結一下自定義的功能
常見事件
onclick 當用戶點選某個物件時呼叫的事件
onfocus 元素獲得焦點
onblur 元素失去焦點
onchange 域的內容被改變
繫結事件的多種方式:
<!--繫結事件的方式1-->
<button onclick='showMsg()'>快按我</button>
function showMsg(){
let msg = prompt('你確定要這樣嗎？');
console.log(msg)
"方式1就寫死了，解耦性不高"
<!--繫結事件的方式2-->
<input type='button' value='快快快' id='d1'>
<script>
let inputEle = document.getElementById('d1')
inputEle.onclick = function(){
alter('誰在那裡點我1!!!')
}
}
</script>
"方式2相對於解耦性會高一點"
事件函式中的this關鍵字
this指代的就是當前被操作的標籤物件本身
如果事件函式內有多層巢狀那麼最好在一開始用變數儲存一下防止後續變化
onload方法
XXX.onload 等待XXX載入完畢之後再執行後面的程式碼
事件實戰案例
<form action="">
<input type="text" value="遊戲機" id="d1"> <!--輸入值預設是遊戲機-->
<script>
let inputEle = document.getElementById('d1')
inputEle.onfocus = function (){ /*獲得焦點將預設值去掉*/
this.value = ''
}
inputEle.onblur = function (){
this.value = '下次再來' /*市區焦點將預設值該為下次再來*/
}
</script>
</form>
---------------------------------------------------------------------
<body>
<p>username:
<input type="text" id="d1">
<span style="color: #f584b7"></span><!--行內標籤，沒有新增文字，在做判斷的時候用js給標籤新增文字-->
</p>
<p>password:
<input type="password" id="d2">
<span style="color: red"></span>
</p>
<button id="suBtn">提交</button>
<script>
let suBle = document.getElementById('suBtn')
suBle.onclick = function () { //繫結單機某個物件時候的事件
let userNameEle = document.getElementById('d1') //獲得使用者名稱的標籤
let passWordEle = document.getElementById('d2') //獲取密碼的標籤
if (userNameEle.value === 'jason') { //判斷如果使用者名稱是jason
userNameEle.nextElementSibling.innerText = '使用者名稱不能是jason' //給span新增文字內容，input的下一個標籤
}else{userNameEle.nextElementSibling.innerText = '使用者名稱符合'}//如果不是，給span新增文字
if (passWordEle.value === '123') {
passWordEle.nextElementSibling.innerText = '密碼不能是123'
}else{passWordEle.nextElementSibling.innerText = '密碼符合'}
}
suBle.onblur = function (){ // 繫結某個物件失去焦點時候的事件
let userNameEle = document.getElementById('d1')
let passWordEle = document.getElementById('d2')
userNameEle.nextElementSibling.innerText = ''
passWordEle.nextElementSibling.innerText = ''
}
</script>
</body>
=====================================================================
<body>
<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 proEle = document.createElement('option')
//3.新增文字及屬性
proEle.innerText = pro
proEle.setAttribute('value',pro)
//4.將建立好的opti標籤新增到省下拉框中
proSeEle.appendChild(proEle)
}
//5.給省標籤繫結文字域變化事件onchange
proSeEle.onchange = function (){
citySeEle.innerHTML=''//每次操作市之前清空市的資料
//6.獲取使用者選擇的省資訊，根據省獲取市
let targetProDate = this.value
let cityDataList = data[targetProDate]
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>
</body>