DOM: document object model
文檔對象模型提供了一套可以訪問和修改HTML文檔內(nèi)容的方法
訪問：獲取
修改：設(shè)置
1 JS要去操作HTML元素，必須要先用JS找到他，轉(zhuǎn)換為JS的DOM對象
操作：
a 標(biāo)簽屬性
b css屬性
c 元素內(nèi)容
2 找對象的方法
a 通過標(biāo)簽名來找對象
var DOM_OBJ=document.getElementsByTagName("標(biāo)簽名");
返回的是集合（數(shù)組），即使只有一個標(biāo)簽，返回的也是一個集合
b 通過id名來找對象：id名是唯一的
var DOM_OBJ=document.getElementById("id名");
c 可以組合使用標(biāo)簽名和id名的方式來獲取對象
d 通過name屬性名來找對象,返回的是一個集合
var DOM_OBJ=document.getElementsByName("nameValue");
e 通過css類名找對象,返回的是一個集合
var DOM_OBJ=document.getElementsByClassName("類名");

3 操作標(biāo)簽的屬性
獲取：var attVa=DOM_OBJ.屬性名;//attruibute
設(shè)置：DOM_OBJ.屬性名=attVa;
4 操作CSS屬性
獲取：var cssVa=DOM_OBJ.style.css屬性名;//只能獲取內(nèi)聯(lián)式(嵌入式)的css屬性值
設(shè)置：DOM_OBJ.style.css屬性名=cssVa;//設(shè)置的是內(nèi)聯(lián)式(嵌入式)的css屬性值
background-color===>backgroundColor
list-style===>listStyle
5 操作內(nèi)容
獲取
非表單元素：var txt=DOM_OBJ.innerHTML;
表單元素：var txt=DOM_OBJ.value;
設(shè)置
非表單元素：DOM_OBJ.innerHTML=txt;//會將原有的內(nèi)容替換掉
表單元素：DOM_OBJ.value=txt;
區(qū)分document.write()和innerHTML
前者是方法后者是屬性
前者只能用document這個對象，后者可以是任意的非表單元素DOM對象
前者不會覆蓋原有的東西，后者會覆蓋原來的內(nèi)容
***************計(jì)時(shí)器***************
是屬于BOM里面的方法
BOM:brower object model---提供了可以操作瀏覽器的方法和屬性
能夠直接訪問和修改的方法和屬性是跟window相關(guān)

計(jì)時(shí)器：
window.setInterval();
語法：
setInterval(函數(shù)名,毫秒數(shù));每隔多少毫秒去調(diào)用這個函數(shù)
setInterval("函數(shù)名()",毫秒數(shù));每隔多少毫秒去調(diào)用這個函數(shù)
setInterval(function(){
代碼塊;
},毫秒數(shù));每隔多少毫秒去調(diào)用這個函數(shù)
setInterval("console.log(1111)",毫秒數(shù));每隔多少毫秒去執(zhí)行js代碼
清除計(jì)時(shí)器：
var timer=setInterval();//定義了一個計(jì)時(shí)器
clearInterval(timer);// 清除的是哪個計(jì)時(shí)器

延時(shí)器：
window.setTimeout();
語法：
setTimeout(函數(shù)名,毫秒數(shù));過了多少毫秒后去執(zhí)行一次這個函數(shù)
setTimeout("函數(shù)名()",毫秒數(shù));過了多少毫秒后去執(zhí)行一次這個函數(shù)
setTimeout(function(){
代碼塊;
},毫秒數(shù));過了多少毫秒后去執(zhí)行一次這個函數(shù)
setTimeout("console.log(1111)",毫秒數(shù));延遲多少毫秒去執(zhí)行一次js代碼
清除延時(shí)器：
var timer=setTimeout();//定義了一個延時(shí)器
clearTimeout(timer);// 清除的是哪個延時(shí)器

***************事件***************
事件：是用來實(shí)現(xiàn)JS與HTML之間的交互的。
1 可以作用于任何對象
2 通過函數(shù)來進(jìn)行事件處理的。相關(guān)的函數(shù)是在事件發(fā)生時(shí)才執(zhí)行
3 事件分類：鼠標(biāo)事件 鍵盤事件 表單事件 window事件
---事件分類
1 鼠標(biāo)事件
click 單擊
dbclick 雙擊
mouseover 懸停
mouseout 離開
mousedown 按下
mouseup 抬起
mousemove 移動

轉(zhuǎn)載于:https://www.cnblogs.com/jiandandeboke/p/7389393.html

總結(jié)

以上是生活随笔為你收集整理的web前端java script BOM学习笔记2017.8.1的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。