day09-BOM和DOM

BOM / DOM（上）

  • 今天開(kāi)始我們開(kāi)始使用 js 去操作瀏覽器和頁(yè)面中的 html 元素了

BOM

  • BOM（Browser Object Model）： 瀏覽器對(duì)象模型
  • 其實(shí)就是操作瀏覽器的一些能力
  • 我們可以操作哪些內(nèi)容
    • 獲取一些瀏覽器的相關(guān)信息（窗口的大?。?/li>
    • 操作瀏覽器進(jìn)行頁(yè)面跳轉(zhuǎn)
    • 獲取當(dāng)前瀏覽器地址欄的信息
    • 操作瀏覽器的滾動(dòng)條
    • 瀏覽器的信息（瀏覽器的版本）
    • 讓瀏覽器出現(xiàn)一個(gè)彈出框（alert/confirm/prompt）
  • BOM 的核心就是 window 對(duì)象
  • window 是瀏覽器內(nèi)置的一個(gè)對(duì)象，里面包含著操作瀏覽器的方法

獲取瀏覽器窗口的尺寸

  • innerHeight 和 innerWidth

  • 這兩個(gè)方法分別是用來(lái)獲取瀏覽器窗口的寬度和高度（包含滾動(dòng)條的）

    var windowHeight = window.innerHeight
console.log(windowHeight)

var windowWidth = window.innerWidth
console.log(windowWidth)

瀏覽器的彈出層

  • alert 是在瀏覽器彈出一個(gè)提示框

    window.alert('我是一個(gè)提示框')
    • 這個(gè)彈出層只是一個(gè)提示內(nèi)容，只有一個(gè)確定按鈕

  • 點(diǎn)擊確定按鈕以后，這個(gè)提示框就消失了

  • confirm 是在瀏覽器彈出一個(gè)詢問(wèn)框

    var boo = window.confirm('我是一個(gè)詢問(wèn)框')
console.log(boo)
    • 這個(gè)彈出層有一個(gè)詢問(wèn)信息和兩個(gè)按鈕

  • 當(dāng)你點(diǎn)擊確定的時(shí)候，就會(huì)得到 true

    • 當(dāng)你點(diǎn)擊取消的時(shí)候，就會(huì)得到 false

  • prompt 是在瀏覽器彈出一個(gè)輸入框

    var str = window.prompt('請(qǐng)輸入內(nèi)容')
console.log(str)
    • 這個(gè)彈出層有一個(gè)輸入框和兩個(gè)按鈕

  • 當(dāng)你點(diǎn)擊取消的時(shí)候，得到的是 null

    • 當(dāng)你點(diǎn)擊確定的時(shí)候得到的就是你輸入的內(nèi)容

瀏覽器的地址信息

  • 在 window 中有一個(gè)對(duì)象叫做 location
  • 就是專門(mén)用來(lái)存儲(chǔ)瀏覽器的地址欄內(nèi)的信息的

location.href

  • location.href 這個(gè)屬性存儲(chǔ)的是瀏覽器地址欄內(nèi) url 地址的信息

    console.log(window.location.href)
    • 會(huì)把中文編程 url 編碼的格式

  • location.href 這個(gè)屬性也可以給他賦值

    window.location.href = './index.html'
// 這個(gè)就會(huì)跳轉(zhuǎn)頁(yè)面到后面你給的那個(gè)地址

location.reload

  • location.reload() 這個(gè)方法會(huì)重新加載一遍頁(yè)面，就相當(dāng)于刷新是一個(gè)道理

    window.location.reload()
    • 注意： 不要寫(xiě)在全局，不然瀏覽器就會(huì)一直處在刷新?tīng)顟B(tài)

瀏覽器的歷史記錄

  • window 中有一個(gè)對(duì)象叫做 history
  • 是專門(mén)用來(lái)存儲(chǔ)歷史記錄信息的

history.back

  • history.back 是用來(lái)回退歷史記錄的，就是回到前一個(gè)頁(yè)面，就相當(dāng)于瀏覽器上的 ?? 按鈕

    window.history.back()
    • 前提是你要有上一條記錄，不然就是一直在這個(gè)頁(yè)面，也不會(huì)回退

history.forword

  • history.forword 是去到下一個(gè)歷史記錄里面，也就是去到下一個(gè)頁(yè)面，就相當(dāng)于瀏覽器上的 ?? 按鈕

    window.history.forward()
    • 前提是你要之前有過(guò)回退操作，不然的話你現(xiàn)在就是最后一個(gè)頁(yè)面，沒(méi)有下一個(gè)

瀏覽器的版本信息（了解）

  • window 中有一個(gè)對(duì)象叫做 navigator
  • 是專門(mén)用來(lái)獲取瀏覽器信息的

navigator.userAgent

  • navigator.userAgent 是獲取的瀏覽器的整體信息

    console.log(window.navigator.userAgent)
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

navigator.appName

  • navigator.appName 獲取的是瀏覽器的名稱

    console.log(window.navigator.appName)

navigator.appVersion

  • navigator.appVersion 獲取的是瀏覽器的版本號(hào)

    console.log(window.navigator.appVersion)

navigator.platform-

  • navigator.platform 獲取到的是當(dāng)前計(jì)算機(jī)的操作系統(tǒng)

    console.log(window.navigator.platform)

瀏覽器的 onload 事件

  • 這個(gè)不在是對(duì)象了，而是一個(gè)事件

  • 是在頁(yè)面所有資源加載完畢后執(zhí)行的

    window.onload = function () {
  console.log('頁(yè)面已經(jīng)加載完畢')
}

在 html 頁(yè)面中把 js 寫(xiě)在 head 里面

<html>
  <head>
    <meta charset="UTF-8" />
    <script>
        // 這個(gè)代碼執(zhí)行的時(shí)候，body 還沒(méi)有加載
      // 這個(gè)時(shí)候我們就獲取不到 body 中的那個(gè) div
      
      // 就需要使用 window.onload 事件
      window.onload = function () {
        // 這個(gè)函數(shù)會(huì)在頁(yè)面加載完畢以后在執(zhí)行
        // 那么這個(gè)時(shí)候頁(yè)面的 DOM 元素都已經(jīng)加載了，我們就可以獲取 div 了
      }
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

在 html 頁(yè)面中把 js 寫(xiě)在 body 最后面

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div></div>
    
    <script>
        // 這個(gè)代碼執(zhí)行的時(shí)候，body 已經(jīng)加載完畢了
      // 在這里就可以獲取到 div，寫(xiě)不寫(xiě) window.onload 就無(wú)所謂了
      
      window.onload = function () {
        // 這個(gè)函數(shù)會(huì)在頁(yè)面加載完畢以后在執(zhí)行
        // 那么這個(gè)時(shí)候頁(yè)面的 DOM 元素都已經(jīng)加載了，我們就可以獲取 div 了
      }
    </script>
  </body>
</html>

瀏覽器的 onscroll 事件

  • 這個(gè) onscroll 事件是當(dāng)瀏覽器的滾動(dòng)條滾動(dòng)的時(shí)候觸發(fā)

  • 或者鼠標(biāo)滾輪滾動(dòng)的時(shí)候出發(fā)

    window.onscroll = function () {
  console.log('瀏覽器滾動(dòng)了')
}
    • 注意：前提是頁(yè)面的高度要超過(guò)瀏覽器的可是窗口才可以

瀏覽器滾動(dòng)的距離

  • 瀏覽器內(nèi)的內(nèi)容即然可以滾動(dòng)，那么我們就可以獲取到瀏覽器滾動(dòng)的距離
  • 思考一個(gè)問(wèn)題？
    • 瀏覽器真的滾動(dòng)了嗎？
    • 其實(shí)我們的瀏覽器是沒(méi)有滾動(dòng)的，是一直在那里
    • 滾動(dòng)的是什么？是我們的頁(yè)面
    • 所以說(shuō)，其實(shí)瀏覽器沒(méi)有動(dòng)，只不過(guò)是頁(yè)面向上走了
  • 所以，這個(gè)已經(jīng)不能單純的算是瀏覽器的內(nèi)容了，而是我們頁(yè)面的內(nèi)容
  • 所以不是在用 window 對(duì)象了，而是使用 document 對(duì)象

scrollTop

  • 獲取的是頁(yè)面向上滾動(dòng)的距離

  • 一共有兩個(gè)獲取方式

    • document.body.scrollTop
    • document.documentElement.scrollTop
    window.onscroll = function () {
  console.log(document.body.scrollTop)
  console.log(document.documentElement.scrollTop)
}
    • 兩個(gè)都是獲取頁(yè)面向上滾動(dòng)的距離
    • 區(qū)別：
      • IE 瀏覽器
        • 沒(méi)有 DOCTYPE 聲明的時(shí)候，用這兩個(gè)都行
        • 有 DOCTYPE 聲明的時(shí)候，只能用 document.documentElement.scrollTop
      • Chrome 和 FireFox
        • 沒(méi)有 DOCTYPE 聲明的時(shí)候，用 document.body.scrollTop
        • 有 DOCTYPE 聲明的時(shí)候，用 document.documentElement.scrollTop
      • Safari
        • 兩個(gè)都不用，使用一個(gè)單獨(dú)的方法 window.pageYOffset

scrollLeft

  • 獲取頁(yè)面向左滾動(dòng)的距離

  • 也是兩個(gè)方法

    • document.body.scrollLeft

    • document.documentElementLeft

      window.onscroll = function () {
  console.log(document.body.scrollLeft)
  console.log(document.documentElement.scrollLeft)
}

    • 兩個(gè)之間的區(qū)別和之前的 scrollTop 一樣

定時(shí)器

  • 在 js 里面，有兩種定時(shí)器，倒計(jì)時(shí)定時(shí)器 和 間隔定時(shí)器

倒計(jì)時(shí)定時(shí)器

  • 倒計(jì)時(shí)多少時(shí)間以后執(zhí)行函數(shù)

  • 語(yǔ)法： setTimeout(要執(zhí)行的函數(shù)，多長(zhǎng)時(shí)間以后執(zhí)行)

  • 會(huì)在你設(shè)定的時(shí)間以后，執(zhí)行函數(shù)

    var timerId = setTimeout(function () {
  console.log('我執(zhí)行了')
}, 1000)
console.log(timerId) // 1
    • 時(shí)間是按照毫秒進(jìn)行計(jì)算的，1000 毫秒就是 1秒鐘
    • 所以會(huì)在頁(yè)面打開(kāi) 1 秒鐘以后執(zhí)行函數(shù)
    • 只執(zhí)行一次，就不在執(zhí)行了
    • 返回值是，當(dāng)前這個(gè)定時(shí)器是頁(yè)面中的第幾個(gè)定時(shí)器

間隔定時(shí)器

  • 每間隔多少時(shí)間就執(zhí)行一次函數(shù)

  • 語(yǔ)法： setInterval(要執(zhí)行的函數(shù)，間隔多少時(shí)間)

    var timerId = setInterval(function () {
  console.log('我執(zhí)行了')
}, 1000)
    • 時(shí)間和剛才一樣，是按照毫秒進(jìn)行計(jì)算的
    • 每間隔 1 秒鐘執(zhí)行一次函數(shù)
    • 只要不關(guān)閉，會(huì)一直執(zhí)行
    • 返回值是，當(dāng)前這個(gè)定時(shí)器是頁(yè)面中的第幾個(gè)定時(shí)器

定時(shí)器的返回值

  • 設(shè)置定時(shí)器的時(shí)候，他的返回值是部分 setTimeout 和 setInterval 的

  • 只要有一個(gè)定時(shí)器，那么就是一個(gè)數(shù)字

    var timerId = setTimeout(function () {
  console.log('倒計(jì)時(shí)定時(shí)器')
}, 1000)

var timerId2 = setInterval(function () {
  console.log('間隔定時(shí)器')
}, 1000)

console.log(timerId) // 1
console.log(timerId2) // 2

關(guān)閉定時(shí)器

  • 我們剛才提到過(guò)一個(gè) timerId，是表示這個(gè)定時(shí)器是頁(yè)面上的第幾個(gè)定時(shí)器

  • 這個(gè) timerId 就是用來(lái)關(guān)閉定時(shí)器的數(shù)字

  • 我們有兩個(gè)方法來(lái)關(guān)閉定時(shí)器 clearTimeout 和 clearInterval

    var timerId = setTimeout(function () {
  console.log('倒計(jì)時(shí)定時(shí)器')
}, 1000)
clearTimeout(timerId)
    • 關(guān)閉以后，定時(shí)器就不會(huì)在執(zhí)行了
    var timerId2 = setInterval(function () {
  console.log('間隔定時(shí)器')
}, 1000)
coearInterval(timerId2)
    • 關(guān)閉以后定時(shí)器就不會(huì)在執(zhí)行了

  • 原則上是

    • clearTimeout 關(guān)閉 setTimeout
    • clearInterval 關(guān)閉 setInterval

  • 但是其實(shí)是可以通用的，他們可以混著使用

    var timerId = setTimeout(function () {
  console.log('倒計(jì)時(shí)定時(shí)器')
}, 1000)
// 關(guān)閉倒計(jì)時(shí)定時(shí)器
clearInterval(timerId)

var timerId2 = setInterval(function () {
  console.log('間隔定時(shí)器')
}, 1000)
// 關(guān)閉間隔定時(shí)器
clearTimeout(timerId2)

DOM（上）

  • DOM（Document Object Model）： 文檔對(duì)象模型
  • 其實(shí)就是操作 html 中的標(biāo)簽的一些能力
  • 我們可以操作哪些內(nèi)容
    • 獲取一個(gè)元素
    • 移除一個(gè)元素
    • 創(chuàng)建一個(gè)元素
    • 向頁(yè)面里面添加一個(gè)元素
    • 給元素綁定一些事件
    • 獲取元素的屬性
    • 給元素添加一些 css 樣式
    • ...
  • DOM 的核心對(duì)象就是 docuemnt 對(duì)象
  • document 對(duì)象是瀏覽器內(nèi)置的一個(gè)對(duì)象，里面存儲(chǔ)著專門(mén)用來(lái)操作元素的各種方法
  • DOM： 頁(yè)面中的標(biāo)簽，我們通過(guò) js 獲取到以后，就把這個(gè)對(duì)象叫做 DOM 對(duì)象

獲取一個(gè)元素

  • 通過(guò) js 代碼來(lái)獲取頁(yè)面中的標(biāo)簽
  • 獲取到以后我們就可以操作這些標(biāo)簽了

getElementById

  • getElementById 是通過(guò)標(biāo)簽的 id 名稱來(lái)獲取標(biāo)簽的

  • 因?yàn)樵谝粋€(gè)頁(yè)面中 id 是唯一的，所以獲取到的就是一個(gè)元素

    <body>
  <div id="box"></div>
  <script>
      var box = document.getElementById('box')
      console.log(box) // <div></div>
  </script>
</body>
    • 獲取到的就是頁(yè)面中的那個(gè) id 為 box 的 div 標(biāo)簽

getElementsByClassName

  • getElementsByClassName 是用過(guò)標(biāo)簽的 class 名稱來(lái)獲取標(biāo)簽的

  • 因?yàn)轫?yè)面中可能有多個(gè)元素的 class 名稱一樣，所以獲取到的是一組元素

  • 哪怕你獲取的 class 只有一個(gè)，那也是獲取一組元素，只不過(guò)這一組中只有一個(gè) DOM 元素而已

    <body>
  <div calss="box"></div>
  <script>
      var box = document.getElementsByClassName('box')
      console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
  </script>
</body>
    • 獲取到的是一組元素，是一個(gè)長(zhǎng)得和數(shù)組一樣的數(shù)據(jù)結(jié)構(gòu)，但是不是數(shù)組，是偽數(shù)組
    • 這個(gè)一組數(shù)據(jù)也是按照索引排列的，所以我們想要準(zhǔn)確的拿到這個(gè) div，需要用索引來(lái)獲取

getElementsByTagName

  • getElementsByTagName 是用過(guò)標(biāo)簽的 標(biāo)簽 名稱來(lái)獲取標(biāo)簽的

  • 因?yàn)轫?yè)面中可能有多個(gè)元素的 標(biāo)簽 名稱一樣，所以獲取到的是一組元素

  • 哪怕真的只有一個(gè)這個(gè)標(biāo)簽名，那么也是獲取一組元素，只不過(guò)這一組中只有一個(gè) DOM 元素而已

    <body>
  <div></div>
  <script>
      var box = document.getElementsByTagName('div')
      console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
  </script>
</body>
    • 和 getElementsByClassName 一樣，獲取到的是一個(gè)長(zhǎng)得很像數(shù)組的元素
    • 必須要用索引才能得到準(zhǔn)確的 DOM 元素

querySelector

  • querySelector 是按照選擇器的方式來(lái)獲取元素

  • 也就是說(shuō)，按照我們寫(xiě) css 的時(shí)候的選擇器來(lái)獲取

  • 這個(gè)方法只能獲取到一個(gè)元素，并且是頁(yè)面中第一個(gè)滿足條件的元素

    console.log(document.querySelector('div')) // 獲取頁(yè)面中的第一個(gè) div 元素 
console.log(docuemnt.querySelector('.box')) // 獲取頁(yè)面中第一個(gè)有 box 類名的元素
console.log(document.querySelector('#box')) // 獲取頁(yè)面中第一個(gè) id 名為 box 的元素

querySelectorAll

  • querySelectorAll 是按照選擇器的方式來(lái)獲取元素

  • 這個(gè)方法能獲取到所有滿足條件的元素，以一個(gè)偽數(shù)組的形式返回

    console.log(document.querySelectorAll('div')) // 獲取頁(yè)面中的所有的 div 元素 
console.log(docuemnt.querySelectorAll('.box')) // 獲取頁(yè)面中所有有 box 類名的元素
    • 獲取到的是一組數(shù)據(jù)，也是需要用索引來(lái)獲取到準(zhǔn)確的每一個(gè) DOM 元素

操作屬性

  • 通過(guò)我們各種獲取元素的方式獲取到頁(yè)面中的標(biāo)簽以后
  • 我們可以直接操作 DOM 元素的屬性，就能直接把效果展示在頁(yè)面上

innerHTML

  • 獲取元素內(nèi)部的 HTML 結(jié)構(gòu)

    <body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

  <script>
    var div = document.querySelector('div')
    console.log(div.innerHTML)
      /*
          
      <p>
        <span>hello</span>
      </p>
      
      */
  </script>
</body>

  • 設(shè)置元素的內(nèi)容

    <body>
  <div></div>

  <script>
    var div = document.querySelector('div')
      div.innerHTML = '<p>hello</p>'
  </script>
</body>
    • 設(shè)置完以后，頁(yè)面中的 div 元素里面就會(huì)嵌套一個(gè) p 元素

innerText

  • 獲取元素內(nèi)部的文本（只能獲取到文本內(nèi)容，獲取不到 html 標(biāo)簽）

    <body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

  <script>
    var div = document.querySelector('div')
    console.log(div.innerText) // hello
  </script>
</body>

  • 可以設(shè)置元素內(nèi)部的文本

    <body>
  <div></div>

  <script>
    var div = document.querySelector('div')
      div.innerText = '<p>hello</p>'
  </script>
</body>
    • 設(shè)置完畢以后，會(huì)把 <p>hello</p> 當(dāng)作一個(gè)文本出現(xiàn)在 div 元素里面，而不會(huì)把 p 解析成標(biāo)簽

getAttribute

  • 獲取元素的某個(gè)屬性（包括自定義屬性）

    <body>
  <div a="100" class="box"></div>

  <script>
    var div = document.querySelector('div')
      console.log(div.getAttribute('a')) // 100
    console.log(div.getAttribute('class')) // box
  </script>
</body>

setAttribute

  • 給元素設(shè)置一個(gè)屬性（包括自定義屬性）

    <body>
  <div></div>

  <script>
    var div = document.querySelector('div')
      div.setAttribute('a', 100)
    div.setAttribute('class', 'box')
    console.log(div) // <div a="100" class="box"></div>
  </script>
</body>

removeAttribute

  • 直接移除元素的某個(gè)屬性

    <body>
  <div a="100" class="box"></div>

  <script>
    var div = document.querySelector('div')
      div.removeAttribute('class')
    console.log(div) // <div a="100"></div>
  </script>
</body>

style

  • 專門(mén)用來(lái)給元素添加 css 樣式的

  • 添加的都是行內(nèi)樣式

    <body>
  <div></div>

  <script>
    var div = document.querySelector('div')
      div.style.width = "100px"
    div.style.height = "100px"
    div.style.backgroundColor = "pink"
    console.log(div) 
    // <div style="width: 100px; height: 100px; background-color: pink;"></div>
  </script>
</body>
    • 頁(yè)面中的 div 就會(huì)變成一個(gè)寬高都是100，背景顏色是粉色

className

  • 專門(mén)用來(lái)操作元素的 類名的

    <body>
  <div class="box"></div>

  <script>
    var div = document.querySelector('div')
      console.log(div.className) // box
  </script>
</body>

  • 也可以設(shè)置元素的類名，不過(guò)是全覆蓋式的操作

    <body>
  <div class="box"></div>

  <script>
    var div = document.querySelector('div')
      div.className = 'test'
    console.log(div) // <div class="test"></div>
  </script>
</body>
    • 在設(shè)置的時(shí)候，不管之前有沒(méi)有類名，都會(huì)全部被設(shè)置的值覆蓋
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容