JavaScript入門幾個概念 ======================== 剛剛入門JavaScript的時候，搞懂DOM、BOM以及它們的對象document和window很有必要。 DOM是為了操作文檔出現的API，document是它的一個對象。 BOM是為了操作瀏覽器出現的API，w ...
JavaScript入門幾個概念
剛剛入門JavaScript的時候，搞懂DOM、BOM以及它們的對象document和window很有必要。
- DOM是為了操作文檔出現的API，document是它的一個對象。
- BOM是為了操作瀏覽器出現的API，window是它的一個對象。
DOM
When a web page is loaded, the browser creates a Document Object Model of the page.
DOM（Docment Object Model文檔對象模型）
DOM就是針對 HTML 和 XML 提供的一個API。什麼意思？就是說為了能以編程的方法操作這個 HTML 的內容（比如添加某些元素、修改元素的內容、刪除某些元素），我們把這個 HTML 看做一個對象樹（DOM樹），它本身和裡面的所有東西比如<div></div>這些標簽都看做一個對象，每個對象都叫做一個節點（node），節點可以理解為 DOM 中所有 Object 的父類。
DOM節點常用屬性
- innerHTML屬性: 獲取元素的內容，包括元素裡面的HTML標簽
- nodeName屬性： 節點的名稱（nodeName是只讀的，nodeName始終包含HTML元素的大寫字母標簽名）
- 元素節點的nodeName與標簽名相同
- 屬性節點的nodeName與屬性名相同
- 文本節點的nodeName始終是#text
- 文檔節點的nodeName始終是#document
- nodeValue屬性：節點的值
- 元素節點的nodeValue是undefined或null
- 文本節點的nodeValue是文本本身
- 屬性節點的nodeValue是屬性值
- nodeType屬性: 節點的類型
- 元素節點
- 文本節點
- 屬性節點
- 註釋節點
- 文檔
詳細例子參見W3school
Dom 操作
由上圖可知Docment為根節點，對於使用iframe嵌入網頁來說，Document可以有很多個。通過Docment訪問其任何子節點，以此進行增刪改查元素的內容、樣式、響應事件等等實現更改網頁的交互方式。以下為一些常見操作：
- 找到節點
- document.getElementById("id")
- document.getElementByTagName("name")
- document.getElementByClassName("name")
- 訪問類的時候，返回的是一個數組，當把它傳給變數var y的時候，在使用這個節點時，使用y[0]。
- 改變節點
- object.innerHTML = new html content
- object.atrribute = new value
- object.setAtrribute(attribute, value)
- Object.style.property = new style
- 增刪節點
- document.creatElement(element)
- document.removeChild(element)
- document.appendChild(element)
- document.replaceChild(element)
- document.write(text)
- 綁定事件
- document.getById("id").onclick = function () {code block}
更多方法操作見w3school
JavaScript不能真正改變DOM，僅僅是改變呈現內容，當頁面刷型的時候統統會還原，但是我們可以把這些改變提交給伺服器，通過後端語言（如PHP）來改變底層數據。
對於用戶的一般互動如彈窗等不需要伺服器參與，只需JavaScript操作DOM響應反饋即可。
BOM
BOM（Browser Object Model ）,通過這個介面允許JavaScript控制瀏覽器的行為
下圖中A、B、C、D均為BOM操作的對象
其中window是瀏覽器一個對象
- 打開新視窗
- window.open( [URL], [視窗名稱], [參數字元串] )
- 關閉視窗
- window.close( )
- <視窗對象>.close( )
實例應用
完成的功能為：用戶可以在輸入框中輸入任何內容，點擊“確認填寫”按鈕後，用戶輸入的內容會顯示在“您輸入的值是”文字的右邊
擴展閱讀
- JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯繫？jQuery中的text()、html()和val() ？
- 關於 DOM 事件使用的摘記
