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

 

 

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

 

　　文檔對(duì)象模型

 

　　通過(guò) HTML DOM，可訪(fǎng)問(wèn) JavaScript HTML 文檔的所有元素。

 

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

 

 

　　獲取文檔對(duì)象

 

　　document.getElementById()

 

　　document.getElementsByTagName()

 

　　document.getElementsByName()

 

　　document.getElementsByClassName()

 

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

 

　　innerText

 

　　innerHTML

 

　　操作DOM對(duì)象的屬性

 

　　DOM對(duì)象.屬性名稱(chēng)

 

　　DOM對(duì)象[屬性名稱(chēng)]

 

　　getAttribute(屬性名稱(chēng))、setAttribute(屬性名稱(chēng),屬性值)

 

　　removeAttribute(屬性名稱(chēng))

 

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

 

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

 

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

 

　　document.getElementsByTagName("p")

 

　　操作DOM對(duì)象樣式

 

　　獲取樣式的值（有單位）

 

　　標(biāo)簽對(duì)象.style.樣式名稱(chēng)

 

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

 

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

 

　　getComputedStyle(對(duì)象).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對(duì)象事件

 

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

 

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

 

　　常見(jiàn)的鍵盤(pán)事件：onmousedown、onmouseup、onmousepress、onmousemove、onmouseenter、onmouseleave、onmouseover、onmo

 

　　useout

 

　　常見(jiàn)窗口事件：onload、onscroll、onresize、

 

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