今天小編給大家分享一下JavaScript的BOM操作怎么實現的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
BOM的核心對象是window，它表示瀏覽器的一個實例。在瀏覽器中，window對象有雙重角色，它既是通過JavaScript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象。這意味著在網頁中定義的任何一個對象、變量和函數，都以window作為其Global對象，因此有權訪問parseInt()等方法。
由于window對象同時扮演著ECMAScript中Global對象的角色，因此所有在全局作用域中聲明的變量、函數都會變成window對象的屬性和方法。來看下面的例子。
我們在全局作用域中定義了一個變量name和一個函數sayName()，它們被自動歸在了window對象名下。于是，可以通過window.name訪問變量name，可以通過window.sayAge()訪問函數sayName()。由于sayName()存在于全局作用域中，因此this.name被映射到window.name，最終顯示的仍然是正確的結果。
window對象也有一些自己的事件，這里我們用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.addEventListener('load', function () {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('點擊我');
});
});
window.addEventListener('load', function () {
alert(22);
});
document.addEventListener('DOMContentLoaded', function () {
alert(33);
});
// load 等頁面內容全部加載完畢，包含頁面dom元素 圖片 flash css 等等
// DOMContentLoaded 是DOM 加載完畢，不包含圖片 falsh css 等就可以執行 加載速度比 load更快一些
</script>
</head>
<body>
<button>點擊</button>
</body>
</html>比如下面這個案例，當我們把網頁縮放到800的時候盒子就會消失不見。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<script>
window.addEventListener('load', function () {
var div = document.querySelector('div');
window.addEventListener('resize', function () {
console.log(window.innerWidth);
console.log('變化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
});
});
</script>
<div></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
// 1. setTimeout
// 語法規范： window.setTimeout(調用函數, 延時時間);
// 1. 這個window在調用的時候可以省略
// 2. 這個延時時間單位是毫秒 但是可以省略，如果省略默認的是0
// 3. 這個調用函數可以直接寫函數 還可以寫 函數名 還有一個寫法 '函數名()'
// 4. 頁面中可能有很多的定時器，我們經常給定時器加標識符 （名字)
// setTimeout(function() {
// console.log('時間到了');
// }, 2000);
function callback() {
console.log('執行力');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
// setTimeout('callback()', 3000); // 我們不提倡這個寫法
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<button>點擊</button>
<script>
// this 指向問題 一般情況下this的最終指向的是那個調用它的對象
// 1. 全局作用域或者普通函數中this指向全局對象window（ 注意定時器里面的this指向window）
console.log(this);
function fn() {
console.log(this);
}
window.fn();
window.setTimeout(function () {
console.log(this);
}, 1000);
// 2. 方法調用中誰調用this指向誰
var o = {
sayHi: function () {
console.log(this); // this指向的是 o 這個對象
},
};
o.sayHi();
var btn = document.querySelector('button');
// btn.onclick = function() {
// console.log(this); // this指向的是btn這個按鈕對象
// }
btn.addEventListener('click', function () {
console.log(this); // this指向的是btn這個按鈕對象
});
// 3. 構造函數中this指向構造函數的實例
function Fun() {
console.log(this); // this 指向的是fun 實例對象
}
var fun = new Fun();
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>點擊</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function() {
// console.log(location.href);
location.href = 'http://www.itcast.cn';
})
var timer = 5;
setInterval(function() {
if (timer == 0) {
location.href = 'http://www.itcast.cn';
} else {
div.innerHTML = '您將在' + timer + '秒鐘之后跳轉到首頁';
timer--;
}
}, 1000);
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<button>點擊</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
// 記錄瀏覽歷史，所以可以實現后退功能
// location.assign('http://www.itcast.cn');
// 不記錄瀏覽歷史，所以不可以實現后退功能
// location.replace('http://www.itcast.cn');
location.reload(true);
});
</script>
</body>
</html>以上就是“JavaScript的BOM操作怎么實現”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
