DOM（文檔對象模型）
1>查找 HTML 元素
找到HTML元素方法：
- 通過 id 找到 HTML 元素 ?document.getElementById([idName])
- 通過標簽名找到 HTML 元素?document.getElementByNames([tagName])
- 通過類名找到 HTML 元素 getElementsByClassName([className])
2>改變HTML
- document.write() 可用于直接向 HTML 輸出流寫內(nèi)容
- 修改 HTML 內(nèi)容的最簡單的方法時使用 innerHTML 屬性闸度。
- 改變 HTML 元素的屬性時使用.attribute
3>改變樣式
需改變 HTML 元素的樣式使用.style.property
4>對事件做出反應
HTML事件：
- 當用戶點擊鼠標時 onclick()
- 當網(wǎng)頁已加載時 onload() 和 onunload()
- 當鼠標移動到元素上時onmouseover() 和 離開元素時onmouseout()
- 當按下鼠標和釋放鼠標onmousedown()华望、onmouseup()
5>添加和刪除節(jié)點
- .創(chuàng)建結(jié)點createElement()
- 創(chuàng)建結(jié)點createTextNode()
- 向元素追加結(jié)點appendChild ?新創(chuàng)建的元素需向原有元素追加
- 刪除已有元素 removeChild() ?需清楚所要刪除的元素以及其父元素
6>添加監(jiān)聽事件
- addEventListener() 用于向指定元素添加事件句柄置尔、添加的事件句柄不會覆蓋已存在的事件句柄
element.addEventListener(event, function, useCapture);
第一個參數(shù)是事件的類型 (如 "click" 或 "mousedown").
第二個參數(shù)是事件觸發(fā)后調(diào)用的函數(shù)夹孔。
第三個參數(shù)是個布爾值用于描述事件是冒泡還是捕獲。該參數(shù)是可選的胁黑。
- 可以向一個元素添加多個事件迫卢，同類型的事件句柄扁誓。
可以向任何 DOM 對象添加事件監(jiān)聽虑绵，不僅僅是 HTML 元素叉跛。如： window 對象。
可以更簡單的控制事件（冒泡與捕獲）蒸殿。
JavaScript 從 HTML 標記中分離開來，可讀性更強鸣峭， 在沒有控制HTML標記時也可以添加事件監(jiān)聽宏所。
removeEventListener() 移除事件的監(jiān)聽
?
?
更多
(參考)http://www.runoob.com/jsref/dom-obj-event.html
示例：
<!--HTML-->
<h4>DOM（文檔對象模型）基本操作</h4>
<ol id="parent">
<li id="list1" onclick = "getInfo()">點擊獲取HTML元素</li>
<li id="list2" onclick = "changeInfo()">點擊改變HTML內(nèi)容</li>
<li id="list3" style = "background-color: #00CCFF;font-size: 15px" onclick = "changeStyle()">點擊改變樣式</li>
<li id="list4" onclick = "addNode()">點擊添加節(jié)點</li>
<li id="list5" onclick = "deletNode()">點擊刪除節(jié)點</li>
</ol>
<p> 對事件做出反應</p>
<div id="block1" style="background-color: indianred;height: 100px;width: 100px;margin-top: 50px" onmouseover="mOver(this)" onmouseout="mOut(this)">我是第一塊</div>
<div id="block2" style="background-color: darkseagreen;height: 100px;width: 100px;margin-top: 50px" onmousedown="mDown(this)" onmouseup="mUp(this)">我是第二塊</div>
<!--script-->
<script>
function getInfo() {
var node = document.getElementById("list1");
alert(node.nodeName);
}
function changeInfo() {
var element = document.getElementById("list2");
element.innerHTML = "這是改變之后的內(nèi)容";
}
function changeStyle() {
var cNode = document.getElementById("list3");
cNode.style.height = "50px";
}
function addNode(){
var fNode = document.getElementById("parent");
var newNode = document.createElement("li");
var text = document.createTextNode("這是新的");
newNode.appendChild(text);
fNode.appendChild(newNode);
}
function deletNode() {
var fNode = document.getElementById("parent");
var child = document.getElementById("list5");
fNode.removeChild(child);
}
function mOver(obj){
obj.innerHTML = "鼠標移上來的時候是這樣的嘿嘿嘿";
}
function mOut(obj) {
obj.innerHTML = "我是第一塊";
}
function mDown(obj) {
obj.innerHTML = "鼠標按下我是這樣的嘿嘿嘿";
}
function mUp(obj) {
obj.innerHTML = "我是第二塊";
}
</script>
