一：獲取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文檔中的多個標簽，并且返回該以該標簽組成的偽數組

偽數組的特征：

1. 有長度和索引值
2. 沒有pop()、push()等數組方法

二：操作DOM元素內容

1 對象.innerHTML屬性

1. 將文本內容添加/修改到任意標簽位置
2. 會解析標簽，但多標簽的情況下，建議使用模板字符串

2 對象.innerText屬性

1. 可以修改/添加標簽中的文字內容
2. innerText不會像引號、以及模板字符串中可以解析html的標簽

三：操作DOM元素屬性

1 操作元素常用屬性

例如img的src屬性、a的href屬性

可以通過：對象.屬性 = 值的方式修改

獲取后：img.src = '....'

2 操作元素樣式屬性

1. 通過style修改元素樣式

   1. 語法格式：對象.style.屬性 = '值'
   2. 對于CSS中background-color、margin-top等有短橫線的，在JS中要修改成小駝峰的形式
   3. 生成的是行內樣式表，權重比較高

2. 通過className修改元素樣式

   1. 語法格式：元素.classsName = '類名'
   2. 注意：
      1. 如果在原有類名的基礎上添加類名，那么應保留在字符串中保留之前的類名，否則會覆蓋之前的類名
      2. 這種方法常用于修改較多樣式需要修改的情況

3. 通過classList修改元素樣式（重點）

   1. 為了解決className容易覆蓋以前類名，可以通過classList方式追加和刪除類名
   2. 語法格式
      1. ?添加類名：元素.classList.add('類名')
      2. 刪除類名：元素.classList.remove('類名')
      3. 切換類名：元素.classList.toggle('類名')
         1. 對于“切換類名”含義指，操作的元素“有括號內書寫的類名”就刪除掉該類名；元素上沒有該類名就添加上該類名；

四：操作表單元素屬性

1 常用操作表單元素屬性

• 利用value獲取表單輸入元素的值
• 利用type修改表單元素的類型
• checked（復選框是否被選中）、disabled（是否禁用某一按鈕），checked和disabled都是默認為false

2 自定義元素屬性

• 在標簽中一律以data-開頭
• 在DOM對象上一律以dataset對象方式獲取