页面元素的获取以及控制

回复

dom，即document object model（文本对象模型）。整个页面元素统称dom。在 HTML DOM 中, 元素对象代表着一个 HTML 元素。元素对象的子节点可以是, 可以是元素节点，文本节点，注释节点。

在前端开发中离不开我们的一些常用浏览器，调试的话也离不开浏览器中的控制台，在开发的过程中遇到问题时，我们第一时间是打开控制台来进行问题排查解决，在获取元素前我们先了解一下开发者工具中的一些常用操作，控制台中主要包括：元素审查，PC与移动端试图切换，元素查看，输出值，查看源文件，检测网络请求等等内容，，我们主要说明元素的使用：

1. 按下F12后可以看见浏览器调用了控制台界面出来

页面元素的获取以及控制

2. 点击左上角的小箭头，然后就可以选中页面中的元素对象

页面元素的获取以及控制

3. 选中对应的对象后就可以查看dom元素的对应的一些信息，例如id，class，css等等

页面元素的获取以及控制

更多浏览器工具介绍可以网页搜索进行更多信息前往查看

js获取节点方法：

通过id名获取元素
1. document.getElementById('test')) // 如果想要获取的id不存在返回值是一个 null
复制代码
通过类名（ClassName）获取元素，得到一个集合
1. document.getElementsByClassName('test')
2. document.getElementsByClassName('test')[i])//通过索引获取想要的元素
复制代码
通过标签（TagName）获取元素，获取到的是一组
1. document.getElementsByTagName('li')
2. document.getElementsByTagName('li')[i]; //通过索引获取想要的元素
复制代码
通过querySelector（css选择器）获取元素，只能获取一个元素（第一个）
1. document.querySelector('#test')
2. document.querySelector('.box')
复制代码
通过querySelectorAll（css选择器）获取元素
1. document.querySelectorAll('.box')
2. document.querySelectorAll('.box')[2]//通过索引获取想要的元素
复制代码

更多js内容前往菜鸟教程学习

jq获取元素节点方法

通过id获取
1. $('#id') // 通过id获取
复制代码
通过class获取
1. $('.className') // 通过class名称获取
复制代码
通过标签名获取
1. $('div') // 获取所有的 <div> 元素
复制代码

更多jq内容可以前往菜鸟教程学习

[FAQ] 页面元素的获取以及控制

页面元素的获取以及控制

相关帖子