一:獲取DOM元素
1 根據CSS選擇器獲取
語法格式如下:
(1)選中一個DOM元素
document.querySeletor('CSS選擇器')
<ul><li>1</li><li>2</li><li>3</li>
</ul>
document.querySelector('li')//只能獲取第一個li
該選擇器只能選中第一個DOM元素,因此選擇時,要慎重選擇對應的DOM元素;
選中的元素可以通過對象調用屬性和方法的方式,修改元素的屬性和方法
(2)可以選中多個DOM元素
document.querySelectorAll('CSS選擇器')
?一次可選中HTML文檔中的多個標簽,并且返回該以該標簽組成的偽數組
偽數組的特征:
- 有長度和索引值
- 沒有pop()、push()等數組方法
二:操作DOM元素內容
1 對象.innerHTML屬性
- 將文本內容添加/修改到任意標簽位置
- 會解析標簽,但多標簽的情況下,建議使用模板字符串
2 對象.innerText屬性
- 可以修改/添加標簽中的文字內容
- innerText不會像引號、以及模板字符串中可以解析html的標簽
三:操作DOM元素屬性
1 操作元素常用屬性
例如img的src屬性、a的href屬性
可以通過:對象.屬性 = 值的方式修改
獲取后:img.src = '....'
2 操作元素樣式屬性
-
通過style修改元素樣式
- 語法格式:對象.style.屬性 = '值'
- 對于CSS中background-color、margin-top等有短橫線的,在JS中要修改成小駝峰的形式
- 生成的是行內樣式表,權重比較高
-
通過className修改元素樣式
- 語法格式:元素.classsName = '類名'
- 注意:
- 如果在原有類名的基礎上添加類名,那么應保留在字符串中保留之前的類名,否則會覆蓋之前的類名
- 這種方法常用于修改較多樣式需要修改的情況
-
通過classList修改元素樣式(重點)
- 為了解決className容易覆蓋以前類名,可以通過classList方式追加和刪除類名
- 語法格式
- ?添加類名:元素.classList.add('類名')
- 刪除類名:元素.classList.remove('類名')
- 切換類名:元素.classList.toggle('類名')
- 對于“切換類名”含義指,操作的元素“有括號內書寫的類名”就刪除掉該類名;元素上沒有該類名就添加上該類名;
四:操作表單元素屬性
1 常用操作表單元素屬性
- 利用value獲取表單輸入元素的值
- 利用type修改表單元素的類型
- checked(復選框是否被選中)、disabled(是否禁用某一按鈕),checked和disabled都是默認為false
2 自定義元素屬性
- 在標簽中一律以data-開頭
- 在DOM對象上一律以dataset對象方式獲取