目录
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>效果图：
