JavaScript第6課-JS HTML DOM
通過HTML DOM，可訪問JavaScript HTML文件的所有元素。
HTML DOM 模型被構造為物件的樹。
HTML DOM 樹
通過可程式設計的物件模型，JavaScript 獲得了足夠的能力來建立動態的 HTML。
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠對頁面中的所有事件做出反應
c查詢HTML元素三種方法：
通過id找到HTML元素 var x = document.getElementById("intro");
通過標籤名找到HTML元素 var x = document.getElementById("main"); var y=x.getElementsTagName("p");
通過類名找到HTML元素 在IE5，6，7，8，中無效
改變HTML內容：
document.getElementById(id).innerHTML= new HTML
改變HTML屬性：
document.getElementById(id).attribute=new value
改變HTML樣式：
document.getElementById(id).style.property=new style
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script> 改變P元素的樣式
visibility分為hidden和visible
JS HTML DOM 事件
HTML 事件的例子：
- 當用戶點選滑鼠時
- 當網頁已載入時
- 當影象已載入時
- 當滑鼠移動到元素上時
- 當輸入欄位被改變時
- 當提交 HTML 表單時
- 當用戶觸發按鍵時
onload和onunload事件會在使用者進入或離開頁面是被觸發。
onload 事件可用於檢測訪問者的瀏覽器型別和瀏覽器版本，並基於這些資訊來載入網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie。
onchange事件常結合對輸入欄位的驗證來使用。upperCase（）函式將小寫轉換為大寫
onmouseover和onmouseout事件可用於使用者的滑鼠移至HTML元素上方或移出元素時觸發函式
onmousedown，onmouseup以及onclick事件
如需要向HTML DOM新增新元素，您必須首先建立該元素（元素節點），然後向一個已經存在的元素新增該元素。
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var para=document.createElement("p");//建立新的<p>元素
var node=document.createTextNode("這是新段落。");//如需向元素新增文字，必須首先建立文字節點
para.appendChild(node);//追加這個文字節點
var element=document.getElementById("div1");//找到一個已有的元素
element.appendChild(para);//向這個已有的元素追加新元素
</script>
</body>
</html>
刪除子元素的方法：parent.removeChilid(child);
找到子元素後
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
就用parentNode找到了父元素