iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
1
自我挑戰組

語法改革!零基礎新手也能讀懂的JS!系列 第 13

Day13 語法改革!零基礎新手也能讀懂的JS - 什麼是瀏覽器上的JS?

  • 分享至 

  • xImage
  •  

前面有說到Node.js今天就來看看什麼是瀏覽器上的JS!

BOM與DOM

之所以我們能夠在瀏覽器上或是開發者人員工具上撰寫JS都是拖這兩個模型的福!而這兩個部分都是瀏覽器所提供,那我們就來探討一下這兩個的差別吧!

BOM(Browser Object Model)

BOM是瀏覽器所有功能的核心,而在BOM最主要的物件就是window,也就是那個全域物件,而window主要是用來和瀏覽器溝通的,而且window底下也有很多屬性可以使用,大概像是下圖

DOM(document Object Model)

透過DOM可以讓我們使用JS來操作網頁的內容。而DOM就像是將HTML拆解個一個一個,並將其組合而成一個樹狀圖的感覺,如果我們先寫一個HTML語法

<html>
  <body>
    <div>
      <h1>hello</h1>
      <p>ck</p>
    </div>  
  </body>
</html>

那DOM-TRee大概會長得像是

而最上方的document就是剛剛在window底下的那個document屬性,那麼來看看這個樹狀圖你可能會發現它就是將每一個html的標籤分成一個個的節點,透過控制這些節點,來改變網頁內容!

BOM 與 DOM 的差別

  • BOM是用來和瀏覽器溝通的窗口,並且有window全域物件,且與網頁內容無關
  • DOM 將HTML標籤拆解成節點使JS可以控制節點來改變網頁內容

今天就介紹到這邊,大家明天見!


上一篇
Day12 語法改革!零基礎新手也能讀懂的JS - 什麼是Node.js?
下一篇
Day14 語法改革!零基礎新手也能讀懂的JS - script到底該放在哪?
系列文
語法改革!零基礎新手也能讀懂的JS!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言