DOM對象

DOM: document object model
文檔對象模型提供了一套能夠訪問和修改HTML文檔內容的方法
訪問：獲取
修改：設置
1 JS要去操做HTML元素，必需要先用JS找到他，轉換爲JS的DOM對象
操做：
a 標籤屬性
b css屬性
c 元素內容
2 找對象的方法
a 經過標籤名來找對象
var DOM_OBJ=document.getElementsByTagName("標籤名");
返回的是集合（數組），即便只有一個標籤，返回的也是一個集合
b 經過id名來找對象：id名是惟一的
var DOM_OBJ=document.getElementById("id名");
c 能夠組合使用標籤名和id名的方式來獲取對象
d 經過name屬性名來找對象,返回的是一個集合
var DOM_OBJ=document.getElementsByName("nameValue");
e 經過css類名找對象,返回的是一個集合
var DOM_OBJ=document.getElementsByClassName("類名");

3 操做標籤的屬性
獲取：var attVa=DOM_OBJ.屬性名;//attruibute
設置：DOM_OBJ.屬性名=attVa;
4 操做CSS屬性
獲取：var cssVa=DOM_OBJ.style.css屬性名;//只能獲取內聯式(嵌入式)的css屬性值
設置：DOM_OBJ.style.css屬性名=cssVa;//設置的是內聯式(嵌入式)的css屬性值
background-color===>backgroundColor
list-style===>listStyle
5 操做內容
獲取
非表單元素：var txt=DOM_OBJ.innerHTML;
表單元素：var txt=DOM_OBJ.value;
設置
非表單元素：DOM_OBJ.innerHTML=txt;//會將原有的內容替換掉
表單元素：DOM_OBJ.value=txt;
區分document.write()和innerHTML
前者是方法後者是屬性
前者只能用document這個對象，後者能夠是任意的非表單元素DOM對象
前者不會覆蓋原有的東西，後者會覆蓋原來的內容