JS中BOM與DOM操作
阿新 • • 發佈：2022-12-07
目錄
BOM操作
window物件
是與瀏覽器視窗做互動的語言
BOM = Browser Object Model 是指瀏覽器物件模型，它可以使Javascript 有能力和瀏覽器進行對話 window.open() //開啟一個新的視窗 window.open('https://www.baidu.com/','','width=300px,left=200px') //開啟的網址 以及新視窗的高度 寬度 都可以設定 window.close() //關閉當前視窗 navigator.userAgent //標識自己是一個瀏覽器 history.forward() //瀏覽器前進一頁 history.back() //瀏覽器退回上一頁 window.location.reload() //重新載入當前頁 window.location.href //獲取當前網頁網址 location.href="URL" // 跳轉到指定頁面
瀏覽器彈窗
1.警告框 alert('文字訊息') //自帶確認按鈕 需要點選確認彈窗消失 警告框經常用於確保使用者可以得到某些資訊,當警告框出現後，使用者需要點選確定按鈕才能繼續進行操作。 2.確認框 confirm('文字訊息') //當確認框出現後，使用者需要點選確定或者取消按鈕才能繼續進行操作。如果使用者點選確認，那麼返回值為 true。如果使用者點選取消，那麼返回值為 false。 let l1 = confirm('你願意嗎？') console.log(l1)//true 3.提示框 prompt('1+1=？') //出現提醒訊息，並用戶可以輸入訊息 可以用變數接受訊息 // 點選取消等 null
計時相關
通過js程式碼我們可以設定在一段時間間隔之後來執行程式碼，而不是
呼叫函式後立刻執行，我們稱之為定時任務
設定定時任務 let time1 = setTimeout('js程式碼',毫秒) //設定定時任務 setTimeout()方法會粗儲存在變數 time1中 js程式碼 = 任何js程式碼或者函式 毫秒 = 從執行開始後的多少毫秒倒計時開始執行1秒=1000毫秒 取消定時任務 clearTimeout(time1) //立即取消這個任務 設定迴圈任務 let time2 = setInterval('func',3000) //每個3000毫秒執行一次 取消迴圈任務 clearInterval(time2) //立即取消這個任務 小練習 function showtime(){ alert('你還好嗎？') } setTimeout(showtime,3000) //3000毫秒後啟動 showtime函式 只啟動一次 setInterval(showtime,3000) //無限啟動 每 3000毫秒一次 如果需要關閉迴圈任務 let time2 = setInterval(showtime,3000) clearInterval(time2) 需要變數接受然後關閉
DOM操作
DOM（Document Object Model）是一套對文件的內容進行抽象和概念化的方法。
DOM操作就是通過js程式碼來操作標籤.
DOM-查詢標籤
/*
1.JS中變數名的命名風格推薦是駝峰體
2.js程式碼中如果需要反覆用一個標籤，可以使用變數來接受 規律是 XXXEle
*/
1.document.getElementById('ID')
通過id來查詢標籤 結果就是標籤本身
2.document.getElementByClassName('classname')[0]
通過類名來查詢標籤 返回一個數組，裡面的每一個標籤可以通過索引取值到具體標籤
3.document.getElementByTagName('span')[0]
通過標籤名來查詢標籤 返回一個數組 可以通過索引取值到具體標籤
4.divEle = document.getElementById('d1')
獲取標籤本身
divEle.firstElementChild
通過標籤獲取標籤內第一個子標籤元素
5.divEle.nextElementSibling
通過標籤獲得同級別的下一個標籤
6.divEle.previousElementSibling
通過標籤獲得同級別的上一個標籤
7.divEle.parentElement
通過標籤獲得它的父級標籤
操作標籤
語法：document.createElement('標籤名')
let divEle = document.createElement('div')
let aEle = document.createElement('a')
給建立的標籤新增屬性
let aEle = document.createElement('a')
aEle.href = 'http://www.baidu.com'
可以直接通過.的方法只能夠新增標籤的預設屬性 id class 等
aELe.setAttribute('屬性名','屬性值')
推薦使用這種方式新增 可以操作預設的和自定義的都可以
aEle.innerText = '新的文字內容'
可以對標籤設定文字，會自動替換之前的所有文字
aEle.innerText
獲取標籤內的文字內容
divEle.appendChild(aEle)
將程式碼建立的標籤插入到一個標籤內，這樣才生效有顯示作用
divEle.removeChild(aEle)
通過父元素呼叫該方法刪除標籤
.innerHTML
獲取標籤內部所有的HTML標籤加文字
.innerHTML = "<p>2</p>"
也可以重新設定標籤
divEle.getAttribute("age")
獲取標籤的某個屬性值
獲取值操作
1.針對input 讓使用者輸入的和使用者選擇的標籤
先查詢到獲取使用者資料的標籤
let inputEle = document.getElementById('ID')
標籤物件.value
//直接獲取標籤的值
inputEle.value
//就可以拿到了使用者輸入的資料
2.針對使用者單選的操作
首先查詢到使用者選擇的標籤
let selectEle = document.getElementById('ID')
selectEle.value
//可以拿到使用者選擇的值
3.針對使用者上傳檔案操作 獲取使用者上傳的檔案
let fileEle = document.getElementById('ID')
fileEle.files
//可以拿到使用者上傳的檔案列表
fileEle.files[0]
//可以拿到真正的檔案物件
標籤CSS/Class樣式操作
Class樣式操作 首先利用查詢標籤 先拿到要操作的標籤本身
divEle = document.getElementById('ID')
divEle.className
獲取該標籤內所有的 class類名
divEle.remove('class名稱')
刪除指定類
divEle.add('class名稱')
新增一個樣式類
divEle.contains('class名稱')
判斷該樣式名是否存在 存在返回true，否則返回false
divEle.toggle('class名稱')
存在就刪除，否則新增
css操作
divEle = document.getElementById('ID')
都需要先生成標籤物件本身
通過js程式碼去改變css樣式
語法結構：
標籤物件.style.要改變的屬性 = '屬性值'
divEle.style.backgroundColor="red"
//通過標籤物件修改 背景顏色樣式
divEle.style.width ='100px'
//通過標籤物件修改 背景顏色樣式
divEle.style.left ='100px'
//通過標籤物件修改 背景顏色樣式
事件
有能力使 HTML 事件觸發瀏覽器中的動作（action）
當用戶點選某個 HTML 元素時啟動一段 JavaScript
onclick 當用戶點選某個物件時呼叫的事件控制代碼。
//單擊事件
ondblclick 當用戶雙擊某個物件時呼叫的事件控制代碼。
//雙擊事件
onfocus 元素獲得焦點。
//輸入框選中事件
onblur 元素失去焦點。
//輸入框離開事件
onchange 域的內容被改變。
//選擇框的內容被改變時
onkeydown 某個鍵盤按鍵被按下。
onkeypress 某個鍵盤按鍵被按下並鬆開。
onkeyup 某個鍵盤按鍵被鬆開。
onload 一張頁面或一幅影象完成載入。
onmousedown 滑鼠按鈕被按下。
onmousemove 滑鼠被移動。
onmouseout 滑鼠從某元素移開。
onmouseover 滑鼠移到某元素之上。
//滑鼠移入傳送的事件
onselect 在文字框中的文字被選中時發生。
onsubmit 確認按鈕被點選，使用的物件是form。
如何繫結事件
方式一：
直接在標籤內部定義事件
<p onclick='function()'>快來點我</p>
<!--對該標籤綁定了一個點選事件 點選此標籤後 觸發 function函式-->
方式二：
使用標籤物件進行繫結事件
let inputNameEle = document.getElemenById('id')
/*通過id查詢到標籤*/
inputNameEle.onfocus = function(){
this.value = ''
}
//this自己本身的意思
//對這個物件 新增 獲得焦點事件 獲得焦點後觸發 將自身的值改為 空
事件實操
判斷賬號密碼輸入
<p>name:
<input type="text" id="name">
<span style="color: red">11</span>
</p>
<p>password:
<input type="text" id="password">
<span style="color: red">11</span>
</p>
<button id="subtn">登入</button>
<script>
let buttonEle = document.getElementById('subtn')
//找到這個登入這個按鈕
buttonEle.onclick = function () {
//按鈕繫結一個 單擊事件 單擊時執行
let nameEle = document.getElementById('name')
let passwordEle = document.getElementById('password')
if (nameEle.value == '123') {
//判斷name物件的值是否是123
nameEle.nextElementSibling.innerText = '賬號不能123'; //如果是 則把name物件的下一個標記內新增內容
if (passwordEle.value == '123') {
passwordEle.nextElementSibling.innerText = '密碼不能123';}
}
}