快捷導(dǎo)航

一起來(lái)學(xué)習(xí)JavaScript的BOM操作

更新時(shí)間：2022年03月16日 15:36:30 作者：su_zui

這篇文章主要為大家詳細(xì)介紹了JavaScript BOM操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

window對(duì)象

BOM的核心對(duì)象是window，它表示瀏覽器的一個(gè)實(shí)例。在瀏覽器中，window對(duì)象有雙重角色，它既是通過(guò)JavaScript訪問(wèn)瀏覽器窗口的一個(gè)接口，又是ECMAScript規(guī)定的Global對(duì)象。這意味著在網(wǎng)頁(yè)中定義的任何一個(gè)對(duì)象、變量和函數(shù)，都以window作為其Global對(duì)象，因此有權(quán)訪問(wèn)parseInt()等方法。

全局作用域

由于window對(duì)象同時(shí)扮演著ECMAScript中Global對(duì)象的角色，因此所有在全局作用域中聲明的變量、函數(shù)都會(huì)變成window對(duì)象的屬性和方法。來(lái)看下面的例子。

我們?cè)谌肿饔糜蛑卸x了一個(gè)變量name和一個(gè)函數(shù)sayName()，它們被自動(dòng)歸在了window對(duì)象名下。于是，可以通過(guò)window.name訪問(wèn)變量name，可以通過(guò)window.sayAge()訪問(wèn)函數(shù)sayName()。由于sayName()存在于全局作用域中，因此this.name被映射到window.name，最終顯示的仍然是正確的結(jié)果。

常見事件

window對(duì)象也有一些自己的事件，這里我們用

<!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('點(diǎn)擊我');
        });
      });
      window.addEventListener('load', function () {
        alert(22);
      });
      document.addEventListener('DOMContentLoaded', function () {
        alert(33);
      });
      // load 等頁(yè)面內(nèi)容全部加載完畢，包含頁(yè)面dom元素 圖片 flash  css 等等
      // DOMContentLoaded 是DOM 加載完畢，不包含圖片 falsh css 等就可以執(zhí)行 加載速度比 load更快一些
    </script>
  </head>
  <body>
    <button>點(diǎn)擊</button>
  </body>
</html>

調(diào)節(jié)窗口大小

比如下面這個(gè)案例，當(dāng)我們把網(wǎng)頁(yè)縮放到800的時(shí)候盒子就會(huì)消失不見。

<!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>

定時(shí)器setTimeout

<!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
      // 語(yǔ)法規(guī)范：  window.setTimeout(調(diào)用函數(shù), 延時(shí)時(shí)間);
      // 1. 這個(gè)window在調(diào)用的時(shí)候可以省略
      // 2. 這個(gè)延時(shí)時(shí)間單位是毫秒 但是可以省略，如果省略默認(rèn)的是0
      // 3. 這個(gè)調(diào)用函數(shù)可以直接寫函數(shù) 還可以寫 函數(shù)名 還有一個(gè)寫法 '函數(shù)名()'
      // 4. 頁(yè)面中可能有很多的定時(shí)器，我們經(jīng)常給定時(shí)器加標(biāo)識(shí)符 （名字)
      // setTimeout(function() {
      //     console.log('時(shí)間到了');
      // }, 2000);
      function callback() {
        console.log('執(zhí)行力');
      }
      var timer1 = setTimeout(callback, 3000);
      var timer2 = setTimeout(callback, 5000);
      // setTimeout('callback()', 3000); // 我們不提倡這個(gè)寫法
    </script>
  </body>
</html>

this指向問(wèn)題

<!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>點(diǎn)擊</button>
    <script>
      // this 指向問(wèn)題 一般情況下this的最終指向的是那個(gè)調(diào)用它的對(duì)象
      // 1. 全局作用域或者普通函數(shù)中this指向全局對(duì)象window（ 注意定時(shí)器里面的this指向window）
      console.log(this);
      function fn() {
        console.log(this);
      }
      window.fn();
      window.setTimeout(function () {
        console.log(this);
      }, 1000);
      // 2. 方法調(diào)用中誰(shuí)調(diào)用this指向誰(shuí)
      var o = {
        sayHi: function () {
          console.log(this); // this指向的是 o 這個(gè)對(duì)象
        },
      };
      o.sayHi();
      var btn = document.querySelector('button');
      // btn.onclick = function() {
      //     console.log(this); // this指向的是btn這個(gè)按鈕對(duì)象
      // }
      btn.addEventListener('click', function () {
        console.log(this); // this指向的是btn這個(gè)按鈕對(duì)象
      });
      // 3. 構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)的實(shí)例
      function Fun() {
        console.log(this); // this 指向的是fun 實(shí)例對(duì)象
      }
      var fun = new Fun();
    </script>
  </body>
</html>

location對(duì)象

轉(zhuǎn)跳頁(yè)面

<!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>點(diǎn)擊</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            // console.log(location.href);
            location.;
        })
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.;
            } else {
                div.innerHTML = '您將在' + timer + '秒鐘之后跳轉(zhuǎn)到首頁(yè)';
                timer--;
            }
        }, 1000);
    </script>
</body>
</html>

location常見方法

<!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>點(diǎn)擊</button>
    <script>
      var btn = document.querySelector('button');
      btn.addEventListener('click', function () {
        // 記錄瀏覽歷史，所以可以實(shí)現(xiàn)后退功能
        // location.assign('http://www.itcast.cn');
        // 不記錄瀏覽歷史，所以不可以實(shí)現(xiàn)后退功能
        // location.replace('http://www.itcast.cn');
        location.reload(true);
      });
    </script>
  </body>
</html>

總結(jié)

瀏覽器對(duì)象模型（BOM）以window對(duì)象為依托，表示瀏覽器窗口以及頁(yè)面可見區(qū)域。同時(shí)，window對(duì)象還是ECMAScript中的Global對(duì)象，因而所有全局變量和函數(shù)都是它的屬性，且所有原生的構(gòu)造函數(shù)及其他函數(shù)也都存在于它的命名空間下。

在使用框架時(shí)，每個(gè)框架都有自己的window對(duì)象以及所有原生構(gòu)造函數(shù)及其他函數(shù)的副本。每個(gè)框架都保存在frames集合中，可以通過(guò)位置或通過(guò)名稱來(lái)訪問(wèn)。
有一些窗口指針，可以用來(lái)引用其他框架，包括父框架。
top對(duì)象始終指向最外圍的框架，也就是整個(gè)瀏覽器窗口。
parent對(duì)象表示包含當(dāng)前框架的框架，而self對(duì)象則回指window。
使用location對(duì)象可以通過(guò)編程方式來(lái)訪問(wèn)瀏覽器的導(dǎo)航系統(tǒng)。設(shè)置相應(yīng)的屬性，可以逐段或整體性地修改瀏覽器的URL。
調(diào)用replace()方法可以導(dǎo)航到一個(gè)新URL，同時(shí)該URL會(huì)替換瀏覽器歷史記錄中當(dāng)前顯示的頁(yè)面。架都有自己的window對(duì)象以及所有原生構(gòu)造函數(shù)及其他函數(shù)的副本。每個(gè)框架都保存在frames集合中，可以通過(guò)位置或通過(guò)名稱來(lái)訪問(wèn)。
有一些窗口指針，可以用來(lái)引用其他框架，包括父框架。

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

您可能感興趣的文章: