网站备案服务内容沈阳网络公司排名
目录
前言
目标
提问
学习路径
根据CSS选择器来获取DOM元素
其他获取DOM元素的方法
根据CSS选择器来获取DOM元素
选择匹配的第一个元素
语法
示例
参数
返回值
选择匹配的多个元素语法
参数
字符串返回值
示例
补充
其它获取DOM元素方法
根据id获取一个元素
根据 标签获取一类元素 获取页面 所有div
根据 类名获取元素 获取页面 所有类名为 w的
总结
前言
雄关漫道真如铁，而今迈步从头越
目标
能获取/查找DOM对象
提问
我们想要操作某个标签首先做什么？
肯定首先选中这个标签，跟 CSS选择器类似，选中标签才能操作
查找元素DOM元素就是利用 js 选择页面中标签元素
学习路径
根据CSS选择器来获取DOM元素
其他获取DOM元素的方法
根据CSS选择器来获取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><style>.box { width: 100px; height: 100px;}</style><body><div class="box"></div><script> //获取匹配的第一个元素 const box = document.querySelector('div'); console.dir(box); console.log(box);</script></body></html>参数
包含一个或多个有效的CSS选择器 字符串
返回值
CSS选择器匹配的第一个元素，一个HTMLElement对象
选择匹配的多个元素语法
:document.querySelectorAll('css选择器')参数
包含一个或多个有效的CSS选择器
字符串返回值
CSS选择器匹配的NodeList 对象集合document.queryselectorAll('ul li')
示例
<!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><style>.box { width: 100px; height: 100px;}</style><body><div class="box"></div><ul> <li>1</li> <li>2</li> <li>3</li></ul></ul><script> const box = document.querySelectorAll('ul li'); console.dir(box); console.log(box);</script></body></html>补充
document.querySelectorAll('css选择器')得到的是一个伪数组有长度有索引号的数组但是没有 pop() push() 等数组方法想要得到里面的每一个对象，则需要遍历(for)的方式获得。
注意事项哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，里面只有一个元素而已
其它获取DOM元素方法
根据id获取一个元素
document.getElementById('nav')
根据 标签获取一类元素 获取页面 所有div
document.getElementsByTagName('div')
根据 类名获取元素 获取页面 所有类名为 w的
document.getElementsByClassName('w')
总结
我很久以前很喜欢的一个人告诉我她恋爱了，我却只能恭喜恭喜