目錄
1、根據選擇器來獲取DOM元素
2.、根據選擇器來獲取DOM元素偽數組
3、根據id獲取一個元素
4、通過標簽類型名獲取所有該標簽的元素
5、通過類名獲取元素
目標：能查找/獲取DOM對象
1、根據選擇器來獲取DOM元素
語法：
document.querySelector(`css選擇器`)例子：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="button" value="迪幻"><script>const dihuan = document.querySelector(`input`)console.log(dihuan)</script>
</body></html>?效果圖：
注意：
CSS選擇器匹配的第一個元素,一個 HTMLElement對象。
如果沒有匹配到，則返回null。
2.、根據選擇器來獲取DOM元素偽數組
語法：
document.querySelectorAll(`css選擇器`)例子：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="button" value="迪幻"><input type="text" value="迪靈"><input type="password" value="Dihuan"><script>const dihuan = document.querySelectorAll(`input`)console.log(dihuan)</script>
</body></html>效果圖：
注意：
1. 獲取頁面中的標簽我們最終常用那兩種方式？
? querySelectorAll()
? querySelector()
2. 他們兩者的區別是什么？
? querySelector() 只能選擇一個元素， 可以直接操作
? querySelectorAll() 可以選擇多個元素，得到的是偽數組，需要遍歷得到每一個元素
3. 他們兩者小括號里面的參數有神馬注意事項？
? 里面寫css選擇器
? 必須是字符串，也就是必須加引號
3、根據id獲取一個元素
語法：
document.getElementById('目標標簽ID')
或
document.querySelector(`#目標標簽ID`)例子：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button id="Dihuan">迪幻</button><script>const ele = document.getElementById('Dihuan')console.log(Dihuan);</script>
</body></html>效果圖：
4、通過標簽類型名獲取所有該標簽的元素
語法：
document.getElementsByTagName('標簽名')例子：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button>迪幻</button><button>迪靈</button><button>Dihuan</button><script>const ele = document.getElementsByTagName('BUTTON')console.log(ele);</script>
</body></html>效果圖：
5、通過類名獲取元素
語法：
document.getElementsByClassName('類名')
或者
document.querySelector(`.類名`)例子：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button class="Dihuan">迪幻</button><button>迪靈</button><button>Dihuan</button><script>const ele = document.getElementsByClassName('Dihuan')console.log(ele);</script>
</body></html>效果圖：
)
