window.history

主要是在紀錄當前頁面的瀏覽紀錄及控制頁面的跳轉、返回

我們一樣先來看看在開發者工具裡面的 window.history 有什麼資訊：

這個 window.length:1 的意思是當前網頁session中的history個數。

window.history 主要有以下幾種方法：

• back()
• forward()
• go()

將上面的方法應用：

例如回上一頁、到下一頁我們可以這樣做，

1. 指定 DOM
2. 綁 click 事件，執行 function

回上一頁

let back = document.querySelector('.back')
    back.addEventListener('click',wBack,false)
    function wBack(){
        window.history.back();
    }

到下一頁

let next = document.querySelector('.next')
    back.addEventListener('click',wNext,false)
    function wBack(){
      window.history.forward();
    }

我們也可以用

history.length

去撈出，當前歷史紀錄的長度。

window.navigator

包含大量有關Web瀏覽器的資訊，在檢測瀏覽器及作業系統上非常有用

我們一樣到開發者工具下去看看 window.navigator

例如：

我們可以用 userAgent 來拿到瀏覽器的完整資訊

也可以用 language 來拿到網頁語系

以上就是 BOM 的部分，那我們今天繼續往下看 DOM 的簡介

DOM Document Object Model

如圖所示，DOM 是將 HTML 內的所有的標籤定義為物件，這些物件最後會成為一個樹狀圖。

DOM 是什麼？

Javascript 可以使用 BOM 來操控瀏覽器內建的功能，但操作網頁內容時，就須透過 DOM。

如上圖所示，每一個 HTML 標籤就是一個節點。
DOM 提供的 API 就是讓 JavaScript 可以改變、存取 HTML 樣式、架構及內容的方法。
還有，對節點的綁定事件。

HTML DOM 規範中定義了這些類型 API：

1. 可將 HTML 的元素 (element) 當作是 JavaScript 物件 (object) 來操作
2. 定義 HTML 元素有哪些屬性可被操作
3. 能存取所有 HTML 元素的方法
4. 元素事件，可針對元素來做事件的綁定

DOM API 應用

查找元素

document.getElementById(id)	
# 根據 id 來取得元素
document.getElementsByTagName(name)	
# 根據標籤 tag 來取得元素
document.getElementsByClassName(name)	
# 根據 class 名稱來取得元素
document.querySelector(selectors)
# 根據 CSS 選擇器 (CSS selectors) 來取得符合條件且第一個找到的 HTML 元素。
document.querySelectorAll(selectors)
# 根據 CSS 選擇器 (CSS selectors) 來取得所有符合條件的 HTML 元素集合 (NodeList)。

改變元素方法

element.innerHTML =  new html content	
# 改變 HTML 內文
element.attribute = new value	
# 改變屬性
element.style.property = new style	
＃ 改變 style
element.setAttribute(attribute, value)	
# 改變屬性

DOM 節點間位置的相互關係

Node.childNodes
# 取得該元素下的所有子節點
Node.firstChild
# 取得 Node 節點下第一個子節點或返回 null 表示沒有任何子節點。
Node.lastChild
# 取得 Node 節點下最後一個子節點或返回 null 表示沒有任何子節點。
Node.parentNode
# 取得其父元素，回傳值可能會是一個元素節點 (Element node)、根節點 (Document node) 或 DocumentFragment 節點。
Node.previousSibling
# 同層級間的兄弟節，可取得同層間“前一個”節點，如果 node 是第一個節點，則回傳 null。
Node.nextSibling
# 可取得同層間“下一個”節點，如果 node 是最後一個節點，則回傳 null。

之後的挑戰，也會利用這間特性，來做一些練習。

以上，明天網頁事件見。