擴展:null 、 undefined 、 ‘’、 NaN、false、0為假
1、document.querySelector('CSS選擇器‘’):
(1)只能獲取返回第一個元素
獲取不到的結果是null
(2)css選擇器是一個字符串,所以要用引號包含起來
(3)可以修改里面的元素樣式
把document當做對象
query:獲取 \查詢 selector:選擇器
2、想要獲取到指定標簽的全部元素,可以用queryselectorAll
(1)返回的是一個元素集合
始終返回的是偽數(shù)組-像數(shù)組:
a、有索引號、有長度
b、但是無法使用數(shù)組的方法,例如push()
(2)不可以對里面的內容直接修改
(3)可以結合for循環(huán)遍歷,給每一項設置
例如:
let lis = document.querySelectorAll('.box li')
for (let i = 0; i < lis.length; i++) {
lis[i].innerHTML = '我是修改的li';
}
3、對象.innerText屬性
使用:等號賦值即可 = ‘ ’ (變量不用帶引號)
不能識別解析標簽
4、對象.innerHTML屬性
使用:等號賦值即可 = ‘ ’ (建議使用單引號''和反引號``)
可以可以!!識別解析標簽
例如:div.innerHTML = '<span>是我們的
回憶~</span>'
!??!注意:innerText 和innerHTML設置內容時,會覆蓋原有的內容
解決方法:用加號拼接(把原有的內容也帶上)
divobj.innerHTML += '哈哈哈哈';
5、操作元素的屬性
(1)更改元素屬性值
(2)元素.屬性 = ‘屬性值’
例如:imgObj.src = 'images/1.jpg'
6、使用className屬性進行操作(增、改)類名
(1)元素.className = '類名'
(2)js中class是關鍵字,所以js中得用className表示類名
(3)有覆蓋問題
7、DOM元素.classList 操作類名修改樣式
不存在覆蓋問題
以下的是方法:
(1)classList.add() 添加類名 沒有覆蓋問題 追加類名
(2)classList.remove() 移除類名
(3)classList.toggle() 切換類名
(如果有類名,會移除該類名;
沒有該類名,就添加該類名)
(4)classList.contains()判斷是否有指定的類名,有就返回true,沒有就返回false
8、記得區(qū)分屬性和方法,不要混淆
className 是屬性:= ''
classList.add('...')是方法,不要寫等號,寫括號
注意:屬性用 =
方法用()
9、對象.style.樣式屬性名 = 值
(1)本質是:設置行內樣式
(2)注意:
1、樣式屬性名要遵循駝峰式寫法
2、高寬之類的不要落下單位px
例如:divobj.style.backgroundColor = 'pink';
注意一個細節(jié):
backgroundImage寫其路徑屬性時,引號要帶url()哦
10、body、head、title標簽可以直接獲取
document.body
11、獲取html標簽:
document.documentElement
12、Boolean類型的屬性(disable、checked、selected)
(1)當設置的值不是布爾類型(true、false),底層進行隱私轉換的
以下代碼是禁用效果
(2)例如:input1.disabled = 'false'//'false'是字符串,會被隱式轉換為true
(3)
inpt1.disabled = true//被禁用
inpt1.disabled = false//不被禁用
13、開啟定時器
setInterval(函數(shù)名/函數(shù),間隔時間)
setInterval(fn, 1000)//函數(shù)不要加()調用,定時器會自動調用
(1)函數(shù):function 函數(shù)名(){}
(2)間隔時間:單位是毫秒ms 1000ms=1s
a、函數(shù)調用其他函數(shù)時,不用加括號
例如:
1、setInterval(fn,1000)每隔1秒就會回來執(zhí)行函數(shù)
2、setInterval(fn(),1000)這個是錯的,寫了會立即執(zhí)行調用,沒有了定時效果
14、關閉定時器
clearInterval(定時器id)
定時器id在開啟定時器的時候返回給了setInterval,可以用一個變量存儲這個返回id
例如:
let timerid1 = setInterval(fn, 1000)
clearInterval(timerid1)