Css 提高 - 获取DOM元素

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>