dom第一天

擴展: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)

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 一.Web API 基本認知 1.作用和分類 作用: 就是使用 JS 去操作 html 和瀏覽器 分類:DOM (...
    Web_小pang閱讀 226評論 0 1
  • 1.DOM基本認知 DOM(Document Object Model)文檔對象模型 是用來呈現(xiàn)以及與任意 HTM...
    這個名字很有品味閱讀 554評論 0 0
  • 基本認知 作用:就是使用 JS 去操作 html 和瀏覽器分類:DOM (文檔對象模型)BOM(瀏覽器對象模型) ...
    cheunggaryu閱讀 308評論 0 0
  • 第一章 1.什么是DOM DOM: Document Object Model(文檔對象模型) 是JavaScri...
    fastwe閱讀 886評論 0 0
  • 瀏覽器每次加載頁面時,都在內存里創(chuàng)建頁面及其全部元素的一個內部表示體系,也就是DOM。在DOM里,頁面的元素具有一...
    海綿寶寶_b8a2閱讀 354評論 0 0

友情鏈接更多精彩內容