在页面元素的修改方面我们可以通过document.write()的方法修改
但是每次修改都要在里面找到相应的位置在进行里面的元素进行修改, 太麻烦
而且每次都要修改HTML代码, 改来改去非常的乱
解决方案来了, 那就是用js代码找到页面元素, 想怎么改就怎么改
一、 根据css选择器获取元素
1. 获取匹配的第一个元素
document.querySelector('css选择器')
-
参数: 包含一个或多个有效的CSS选择器 字符串。
-
如果选择器是一个标签, 则参数中的内容为 '标签名', 例如获取标签为div的元
document.querySelector('div') -
如果选择器是一个class, 则参数中的内容为 '.类名', 例如获取类名为box的元素
document.querySelector('.box') -
如果选择器是一个id, 则参数中的内容为 '#id名', 例如获取id名为btn的元素
document.querySelector('#btn')
-
-
返回值: CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。
2. 获取匹配的多个元素
document.querySelectorAll('css选择器')
-
参数: 包含一个或多个有效的CSS选择器 字符串。
- 参考上面的document.querySelector('css选择器')的参数解释, 一样的。
-
返回值: CSS选择器匹配的 NodeList 对象集合。
- 有长度有索引号的伪数组
- 但是没有 pop() push() 等数组方法
- 想要使用需要遍历, 可以用for和forEach遍历, 不能用map和filter遍历, 因为获取到的元素是以伪数组的方式赋值的
二、 其他获取匹配元素的方法
1. 根据id名获取页面元素 (id是唯一的, 只能匹配第一个)
document.getElementById()
2. 根据标签名获取元素 (可以获取多个)
document.getElementsByTagName()
3. 根据类名获取元素 (可以获取多个)
document.getElementsByClassName()
- 想要遍历document.getElementsByTagName()和document.getElementsByClassName()的得到的元素只能用for循环, 连forEach也不能用了
- 写css选择器时, 可以写复杂的选择器, 不过有些字符需要转义
- 记得id加"#" , class加 "."
