原生JS操做DOM

經過html dom能夠訪問javascript html文檔的全部元素。
當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。

經過可編程的對象模型，JavaScript 得到了足夠的能力來建立動態的 HTML。
JavaScript 可以改變頁面中的全部 HTML 元素
JavaScript 可以改變頁面中的全部 HTML 屬性
JavaScript 可以改變頁面中的全部 CSS 樣式
JavaScript 可以對頁面中的全部事件作出反應

咱們須要經過javascript操做html元素，查找這些html元素有三種方法：
1.經過id查找：
var doc=document.getElementById("idName");
2.經過標籤名查找：
var doc=document.getElementsByTagName("tagName");
3.經過類名查找：
var doc = document.getElementsByClassName("className");

html dom容許javascript改變html元素的內容。
1.改變html輸出流
在javascript中，document.write()可用於直接向html輸出流直接寫內容。
tip:毫不要使用在文檔加載以後使用 document.write()。這會覆蓋該文檔。
2.改變html內容
修改html內容的最簡單的方法是使用innerHTML屬性。如：
document.getElementById(idName).innerHTML="文本內容"
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有能力對html事件作出反應。
你可使用事件屬性，好比：
<button onclick="func()">點擊</button>
你也可使用javascript來向html元素分配事件，好比：
document.getElementById("idName").onclick=function(){...};

添加和刪除節點（HTML 元素）。（重點溫習的內容）
如需向html dom添加新元素，必須先添加元素節點，而後向該元素追加元素節點。
var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
上述操做有三個步驟：
1.建立新的 <p> 元素
2.建立文本節點
3.向已有的元素追加新元素
固然上面也能夠不建立新的元素，直接添加到已有的元素中，好比：
var eleNode = document.createTextNode('這是新段落');
document.getElementById('div1').appendChild(eleNode);
經常使用的dom對象方法：

在html dom（文檔對象模型）中，每一個部分都是節點：
文檔自己是文檔節點
全部 HTML 元素是元素節點
全部 HTML 屬性是屬性節點
HTML 元素內的文本是文本節點
註釋是註釋節點
在html dom中，element對象表示html元素，下面這些屬性和方法可用於全部HTML元素上。