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

 

 

　　本篇講述JavaScript操作DOM內(nèi)容

 

　　文檔對象模型

 

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

 

　　當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對象模型（Document Object Model）。

 

 

　　獲取文檔對象

 

　　document.getElementById()

 

　　document.getElementsByTagName()

 

　　document.getElementsByName()

 

　　document.getElementsByClassName()

 

　　操作DOM對象內(nèi)容

 

　　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對象樣式

 

　　獲取樣式的值（有單位）

 

　　標(biāo)簽對象.style.樣式名稱

 

　　獲取樣式的數(shù)值（無單位，數(shù)字）

 

　　注意內(nèi)部樣式表和外部樣式表中的樣式獲取需要使用到

 

　　getComputedStyle(對象).width

 

　　52

 

　　操作DOM節(jié)點(diǎn)

 

　　節(jié)點(diǎn)創(chuàng)建刪除

 

　　createElement（）：創(chuàng)建元素節(jié)點(diǎn)

 

　　appendChild（）：末尾追加方式插入節(jié)點(diǎn)

 

　　insertBefore（新元素,參考元素）：在指定節(jié)點(diǎn)前插入新節(jié)點(diǎn)

 

　　remove() ：刪除指定節(jié)點(diǎn)

 

　　removeChild（）:刪除子節(jié)點(diǎn)

 

　　相關(guān)節(jié)點(diǎn)獲取

 

　　parentElement父元素

 

　　children 所有的子元素

 

　　firstElementChild第一個(gè)子元素

 

　　lastElementChild最后一個(gè)子元素

 

　　previousElementSibling前一個(gè)

 

　　nextElementSibling后一個(gè)

 

　　操作DOM對象事件

 

　　Js事件分為鼠標(biāo)和鍵盤事件、窗口個(gè)事件

 

　　常見的鼠標(biāo)事件：onclick、ondblclick等

 

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

 

　　useout

 

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

 

　　所有的事件處理函數(shù)都會(huì)都有兩個(gè)部分組成，on + 事件名稱，例如click事件的事件處理函數(shù)就是：onclick