BOM的基本操作與設定
阿新 • • 發佈：2020-12-29
技術標籤：html5JavaScript前端javascript
3.BOM
BOM：Browser Object Model 瀏覽器物件模型
console.log(window); //視窗 js中最大的一個物件
//document和window
//window--視窗 js中最大的一個物件
//document--文件，html文件
//所有的全域性函式和全域性變數都屬於window,一般會省略window
3.1 window提供的系統方法(瞭解)
3.1.1 系統提供的對話方塊
//警告框
alert("今天週末，考試嗎?");
//帶確認對話方塊 confirm("確認資訊") 確定--- true 取消---false 3.1.2 open與close
<!-- open():開啟一個新視窗，如果寫在行間，需要新增window-->
<button onclick='window.open("https://www.taobao.com/")'>淘寶< 3.1.3 location
//file:///E:/web%E7%AC%AC%E4%BA%8C%E9%98%B6%E6%AE%B5/day10%20BOM/08%20location.html#div?wd=%E5%85%83%E6%97%A6&user=txf
console.log(location);
console.log(window.location.href); //設定訪問當前視窗顯示的url地址
console.log(location.hash); //雜湊 #div
console.log(location.search);//搜尋內容 #div?wd=元旦&user=txf
console.log(location.protocol); //協議 http https
setTimeout(function(){
//location.href = "http://www.ujiuye.com";
location.reload();//重新整理
},3000);
- href：設定訪問當前視窗顯示的url地址，用於跳轉到其他頁面
- search：獲取搜尋內容 (.html後面的)
- hash：雜湊 #div
- protocol：協議
- location.reload();//重新整理
3.1.4 history
-
history.back() : 後退到上一個連結
-
history.forward()：前進到下一個連結
-
history.go(): 1：後退1個連結 -1：前進一個連結
<h1>第二個頁面</h1>
<a href="./09 history03.html">第三個頁面</a>
<button onclick="history.forward()">前進</button>
<button onclick="history.back()">後退</button>
<button onclick="history.go(-1)">go</button>
3.2 BOM三大系列 （掌握）
3.2.1 client系列
-
元素可視寬高
- 元素.clientWidth:元素可視寬 content+padding
- 元素.clientHeight:元素可視高 content+padding
-
螢幕的可視寬高
- document.documentElement.clientWidth;
/* client系列（元素可視寬高） 元素.clientWidth: 可視寬 content+padding 元素.clientHeight: 可視高 content+padding 螢幕的可視寬高： document.documentElement.clientWidth/Height */ var oDiv = document.getElementsByTagName("div")[0]; console.log(oDiv.clientWidth);//元素可視寬 console.log(oDiv.clientHeight);//元素可視高 // 螢幕的可視寬高： console.log(document.documentElement.clientWidth); //1366 console.log(document.documentElement.clientHeight);//657
3.2.2 offset系列
-
元素佔位寬高
- 元素.offsetWidth: 元素佔位寬 content+padding+border
- 元素.offsetHeight: 元素佔位高 content+padding+border
-
元素位置
- 元素.offsetTop
- 元素.offsetLeft
/* offset系列(元素的佔位寬高) 標籤.offsetWidth：元素的佔位寬 content+padding+border 標籤.offsetHeight：元素的佔位高 標籤.offsetTop: 獲取元素的頂部到定位父元素的位置，如果沒有定位父元素獲取到body的位置 標籤.offsetLeft: 獲取元素的左邊到定位父元素的位置，如果沒有定位父元素獲取到body的位置 一般用於獲取當前元素在頁面中的位置 */ var oDiv = document.getElementsByTagName("div")[0]; var oP = document.getElementsByTagName("p")[0]; //元素的佔位寬 content+padding+border console.log(oDiv.offsetWidth); //240 console.log(oDiv.offsetHeight); //240 //標籤.offsetTop: 獲取元素的頂部到定位父元素的位置，如果沒有定位父元素獲取到body的位置 console.log(oP.offsetTop); //0
3.2.3 scroll系列
- 滾動事件：onscroll
- 視窗縮放事件：onresize
- 頁面的滾動距離
- document.documentElement.scrollTop || document.body.scrollTop
/*
scroll系列
元素.scrollWidth/Height : 獲取元素的實際內容寬
元素.scrollTop: 元素被捲去的高
元素.scrollLeft: 元素被捲去的寬
獲取頁面的滾動距離
document.documentElement.scrollTop || document.body.scrollTop
*/
var oDiv = document.getElementsByTagName("div")[0];
//元素.scrollWidth/Height : 獲取元素的實際內容寬
console.log(oDiv.scrollWidth);
//1.onscroll 新增滾動事件
oDiv.onscroll = function(){
console.log(oDiv.scrollTop);
console.log(oDiv.scrollLeft);
}
//2.給視窗新增滾動事件
window.onscroll = function(){
//獲取
console.log(document.documentElement.scrollTop || document.body.scrollTop);
document.documentElement.scrollTop = document.body.scrollTop = 0;
}
3.3 懶載入
原理：預設顯示第一屏圖片 如果圖片在螢幕的可視高度範圍內就可以顯示
滾動到哪，載入到哪。
//獲取標籤
var oImgs = document.getElementsByTagName("img");
// oImgs[0].src = oImgs[0].getAttribute("_src");
//2.預設顯示第一屏圖片 如果圖片在螢幕的可視高度範圍內就可以顯示
var clientH = document.documentElement.clientHeight;
for (var i = 0; i < oImgs.length; i++) {
if (oImgs[i].offsetTop <= clientH) {
oImgs[i].src = oImgs[i].getAttribute("_src")
}
}
//3.滾動到哪，載入到哪 新增滾動事件
window.onscroll = function () {
//如果圖片的位置 在 螢幕可視高+滾動捲去的高 的範圍內容都可以顯示
var sT = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < oImgs.length; i++) {
if (oImgs[i].offsetTop <= clientH+sT) {
oImgs[i].src = oImgs[i].getAttribute("_src");
}
}
}
4.表單
4.1 快速獲取表單元素
//1.DOM快速獲取表單元素 表單.name名稱
console.log(oForm.user); //輸入框 使用者名稱
console.log(oForm.password); //輸入框 密 碼
console.log(oForm.sex); //[input, input, value: "女"]
console.log(oForm.sex.value);
4.2 表單事件方法
-
表單事件
-
oForm.onsubmit : 表單提交事件
return true : 預設，允許提交
return false： 阻止提交
-
oForm.onreset : 表單重置事件
return true：預設 允許重置
return false：阻止重置
//點選提交按鈕，如果使用者名稱為空，不能提交 oForm.onsubmit = function () { if (oForm.user.value == "") { alert("請輸入使用者名稱"); return false; } } //2.oForm.onreset : 表單重置事件 oForm.onreset = function () { //confirm(確認資訊) 帶確認的對話方塊 true--確定 false---取消 /* var is = confirm("是否重置"); console.log(is); */ return confirm("是否重置"); }
-
-
表單元素事件
-
oIn.onfocus : 獲取焦點
-
oIn.onblur : 失去焦點
//3.獲得焦點 表單元素.onfocus oForm.user.onfocus = function () { this.style.borderColor = "red"; } //4.失去焦點 表單元素.onblur oForm.user.onblur = function () { this.style.borderColor = "#ccc"; } -
oIn.oninput/oIn.onpropertychange : 輸入框發生改變的時候實時觸發
oninput：ie低版本不相容
onpropertychange：ie瀏覽器
//5.oIn.oninput : 輸入框發生改變的時候實時觸發 oForm.user.oninput = mim; oForm.user.onpropertychange = mim; function mim(){ //6位以上弱 9位以上中 12-24強 密碼需要在6-24位之間 if (this.value.length >= 12 && this.value.length <= 24) { oSpan.innerHTML = "強"; oSpan.style.color = "green"; } else if (this.value.length >= 9&&this.value.length < 12) { oSpan.innerHTML = "中"; oSpan.style.color = "orange"; } else if (this.value.length >= 6&&this.value.length < 9) { oSpan.innerHTML = "弱"; oSpan.style.color = "red"; }else{ oSpan.innerHTML = "密碼需要在6-24位之間"; oSpan.style.color = "#ccc"; } } -
onchange: 失去焦點時，內容發生變化時觸發
oForm.user.onchange = function(){ console.log(this.value); }
-
-
自動獲得焦點方法 oIn.focus();