web后端工程師雖然大部分工作都是在跟服務器和數據庫打交道，但有時也需要寫一些前端代碼。伴隨著前后端分離式開發技術越演愈烈，可能對于前端知識的要求逐漸降低，但是為了能夠和前端小伙伴更好的交流，打造和諧的團隊，掌握一些基本的前端知識還是很有必要的。本系列教程主要包括三個部分html+css+javascript，內容針對后端初學開發者，各種前段大大請繞道，不喜勿噴。

 

 

　　本篇講述JavaScript操作DOM內容

 

　　文檔對象模型

 

　　通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。

 

　　當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

 

 

　　獲取文檔對象

 

　　document.getElementById()

 

　　document.getElementsByTagName()

 

　　document.getElementsByName()

 

　　document.getElementsByClassName()

 

　　操作DOM對象內容

 

　　innerText

 

　　innerHTML

 

　　操作DOM對象的屬性

 

　　DOM對象.屬性名稱

 

　　DOM對象[屬性名稱]

 

　　getAttribute(屬性名稱)、setAttribute(屬性名稱,屬性值)

 

　　removeAttribute(屬性名稱)

 

　　document.getElementById(“box”).value = 10

 

　　document.getElementById(“box”)[“name”] =“ZZY”

 

　　document.getElementById(“box”).setAttribute(“value”,“ZZY”)

 

　　document.getElementsByTagName("p")

 

　　操作DOM對象樣式

 

　　獲取樣式的值（有單位）

 

　　標簽對象.style.樣式名稱

 

　　獲取樣式的數值（無單位，數字）

 

　　注意內部樣式表和外部樣式表中的樣式獲取需要使用到

 

　　getComputedStyle(對象).width

 

　　52

 

　　操作DOM節點

 

　　節點創建刪除

 

　　createElement（）：創建元素節點

 

　　appendChild（）：末尾追加方式插入節點

 

　　insertBefore（新元素,參考元素）：在指定節點前插入新節點

 

　　remove() ：刪除指定節點

 

　　removeChild（）:刪除子節點

 

　　相關節點獲取

 

　　parentElement父元素

 

　　children 所有的子元素

 

　　firstElementChild第一個子元素

 

　　lastElementChild最后一個子元素

 

　　previousElementSibling前一個

 

　　nextElementSibling后一個

 

　　操作DOM對象事件

 

　　Js事件分為鼠標和鍵盤事件、窗口個事件

 

　　常見的鼠標事件：onclick、ondblclick等

 

　　常見的鍵盤事件：onmousedown、onmouseup、onmousepress、onmousemove、onmouseenter、onmouseleave、onmouseover、onmo

 

　　useout

 

　　常見窗口事件：onload、onscroll、onresize、

 

　　所有的事件處理函數都會都有兩個部分組成，on + 事件名稱，例如click事件的事件處理函數就是：onclick