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.getElementsByTagName("name")
  • document.getElementsByClassName("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 事件使用的摘記
• JavaScript、jQuery、AJAX、JSON 這四個之間的關系？

參考資料

• DOM 是什么？
• DOM, DOCUMENT, BOM, WINDOW 有什么區別?

轉載于:https://www.cnblogs.com/jecyu/p/7399072.html

總結

以上是生活随笔為你收集整理的JavaScript入门几个概念的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。