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對象 前者不會覆蓋原有的東西，后者會覆蓋原來的內容

?

轉載于:https://www.cnblogs.com/liaohongwei/p/7631475.html

總結

以上是生活随笔為你收集整理的JS----文档对象模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。