原生JS操作DOM

ISherry 發(fā)布于2019-08-01 16:26 / 2512人閱讀

摘要：能夠改變頁(yè)面中的所有元素能夠改變頁(yè)面中的所有屬性能夠改變頁(yè)面中的所有樣式能夠?qū)?yè)面中的所有事件做出反應(yīng)我們需要通過(guò)操作元素，查找這些元素有三種方法通過(guò)查找通過(guò)標(biāo)簽名查找通過(guò)類名查找允許改變?cè)氐膬?nèi)容。，如使有能力對(duì)事件做出反應(yīng)。

通過(guò)html dom可以訪問(wèn)javascript html文檔的所有元素。
當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型（Document Object Model）。

通過(guò)可編程的對(duì)象模型，JavaScript 獲得了足夠的能力來(lái)創(chuàng)建動(dòng)態(tài)的 HTML。
JavaScript 能夠改變頁(yè)面中的所有 HTML 元素
JavaScript 能夠改變頁(yè)面中的所有 HTML 屬性
JavaScript 能夠改變頁(yè)面中的所有 CSS 樣式
JavaScript 能夠?qū)?yè)面中的所有事件做出反應(yīng)

我們需要通過(guò)javascript操作html元素，查找這些html元素有三種方法：
1.通過(guò)id查找：
var doc=document.getElementById("idName");
2.通過(guò)標(biāo)簽名查找：
var doc=document.getElementsByTagName("tagName");
3.通過(guò)類名查找：
var doc = document.getElementsByClassName("className");

html dom允許javascript改變html元素的內(nèi)容。
1.改變html輸出流
在javascript中，document.write()可用于直接向html輸出流直接寫(xiě)內(nèi)容。
tip:絕不要使用在文檔加載之后使用 document.write()。這會(huì)覆蓋該文檔。
2.改變html內(nèi)容
修改html內(nèi)容的最簡(jiǎn)單的方法是使用innerHTML屬性。如：
document.getElementById(idName).innerHTML="文本內(nèi)容"
3.改變html屬性
document.getElementById(id).attribute="new value"，如：
document.getElementById(idName).src = "location.png"

html dom允許javascript改變html元素樣式。
document.getElementById(id).style.property=new style，如：
document.getElementById(idName).style.color="red";

html dom使javascript有能力對(duì)html事件做出反應(yīng)。
你可以使用事件屬性，比如：

你也可以使用javascript來(lái)向html元素分配事件，比如：
document.getElementById("idName").onclick=function(){...};

添加和刪除節(jié)點(diǎn)（HTML 元素）。（重點(diǎn)溫習(xí)的內(nèi)容）
如需向html dom添加新元素，必須先添加元素節(jié)點(diǎn)，然后向該元素追加元素節(jié)點(diǎn)。
var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
上述操作有三個(gè)步驟：
1.創(chuàng)建新的

元素
2.創(chuàng)建文本節(jié)點(diǎn)
3.向已有的元素追加新元素
當(dāng)然上面也可以不創(chuàng)建新的元素，直接添加到已有的元素中，比如：
var eleNode = document.createTextNode("這是新段落");
document.getElementById("div1").appendChild(eleNode);
常用的dom對(duì)象方法：

在html dom（文檔對(duì)象模型）中，每個(gè)部分都是節(jié)點(diǎn)：
文檔本身是文檔節(jié)點(diǎn)
所有 HTML 元素是元素節(jié)點(diǎn)
所有 HTML 屬性是屬性節(jié)點(diǎn)
HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)
注釋是注釋節(jié)點(diǎn)
在html dom中，element對(duì)象表示html元素，下面這些屬性和方法可用于所有HTML元素上。