|
|
相关文章推荐
|
讲道义的脸盆 · 解析或序列化 XML - ...· 3 周前 · |
|
|
迷茫的海龟 · openlayers ...· 2 年前 · |
|
|
刚毅的芹菜 · Nodejs ...· 2 年前 · |
|
|
冷静的茶壶 · c++ 类名转字符串-掘金· 2 年前 · |
|
|
爱运动的小狗 · 使用Gradle插件上传组件到Maven之源 ...· 2 年前 · |
|
|
爽快的大蒜 · 学习率的设置（不同层，学习率衰减方式）_AI ...· 2 年前 · |
专栏首页
从零开始学自动化测试
JavaScript 学习-27.查找HTML DOM节点(元素)
JavaScript 学习-27.查找HTML DOM节点(元素)
发布于2022-05-26 10:40:41
阅读
410
0
前言
如何查找和访问 HTML 页面中的节点元素？也就是我们经常说的定位元素的一些方法。
查询 HTML 节点(元素)一些方法
查找 html 页面上的元素，可以用以下方法
|
方法 |
节点类型 |
|---|---|
|
getElementById() |
通过 id 查找 HTML 元素 |
|
getElementsByClassName() |
通过标 class 属性查找 HTML 元素 |
|
getElementsByName() |
通过标 name 属性查找 HTML 元素 |
|
getElementsByTagName() |
通过标 tag 标签查找 HTML 元素 |
|
querySelector() |
CSS 选择器查找 HTML 元素 |
|
querySelectorAll() |
CSS 选择器查找符合条件所有 HTML 元素 |
|
document.forms() |
对象选择器查找 HTML 对象 |
以上方法中只有
getElementById()
和
querySelector()
查找到的是单个元素，其它都是查找到的元素集合（相当于一个数组）
getElementById()
通过 id 查找 HTML 元素 ，使用语法
document.getElementById("id属性")示例
<body>
<h1>DOM 节点</h1>
<p id="demo" class="text">Hello world!</p>
<script>
element = document.getElementById('demo')
console.log(element) // <p id="demo" class="text">Hello world!</p>
</script>
</body>一般如果元素有id属性，id一般都是唯一属性，所以通过id查找是最简单的方法。 如果元素被找到，此方法会以对象返回该元素, 如果未找到元素，返回null。
getElementsByClassName()
如果元素只有一个class属性，如下面的
class="text"
，会查找页面上所有的class属性带有text属性的元素。
<body>
<h1>DOM 节点</h1>
<p class="text">Hello</p>
<p id="demo" class="text text-info">Hello world!</p>
<script>
ele1 = document.getElementsByClassName('text')
console.log(ele1.length) // 2
console.log(ele1) // HTMLCollection(2) [p.text, p#demo.text.text-info, demo: p#demo.text.text-info]
</script>
</body>
返回的结果是
HTMLCollection
对象，可以看成是一个数组，会返回一个或多个元素，如果找不到会返回空的[]。
如果class属性有多个值
class="text text-info"
,那么可以拿其中的一个属性去查找
ele2 = document.getElementsByClassName('text-info')
console.log(ele2.length) // 1
console.log(ele2) // HTMLCollection [p#demo.text.text-info, demo: p#demo.text.text-info]
HTMLCollection
对象有length属性，可以统计查找到元素的个数
我们也可以通过class属性查找同时满足多个条件的元素,
getElementsByClassName('text text-info')
会查找class属性同时有”text”和”text-info”属性。
<body>
<h1>DOM 节点</h1>
<p class="text">Hello</p>
<p class="text text-info">world!</p>
<p id="demo" class="text text-info text-center">Hello world!</p>
<script>
ele1 = document.getElementsByClassName('text text-info')
console.log(ele1.length) // 2
console.log(ele1) //
</script>
</body>getElementsByName()
根据name属性查找所有
name="username"
, 返回NodeList数组对象
<body>
<h1>DOM 节点</h1>
<p class="text">Hello</p>
<input name="username">
<script>
ele1 = document.getElementsByName('username')
console.log(ele1.length) // 1
console.log(ele1) // NodeList [input]
</script>
</body>getElementsByTagName()
通过tag标签属性查找所有的
<p>
标签元素, 返回HTMLCollection 数组对象
<body>
<h1>DOM 节点</h1>
<p class="text">Hello</p>
<script>
ele1 = document.getElementsByTagName('p')
console.log(ele1.length) // 1
console.log(ele1) // HTMLCollection [p.text]
</script>
</body>querySelector()
CSS 选择器查找 HTML 元素
<body>
<h1>DOM 节点</h1>
<p id="demo" class="text text-info text-center">Hello world!</p>
<script>
ele1 = document.querySelector('#demo'); // id属性
console.log(ele1)
ele2 = document.querySelector('.text-info'); // class属性
console.log(ele2)
ele3 = document.querySelector('p'); // tag 标签
console.log(ele3)
</script>
</body>它始终返回的是单个元素对象，如果查找不到返回null
当页面上有多个元素属性一样的时候，此时会返回第一个元素
<body>
<h1>DOM 节点</h1>
<p class="text-info">Hello</p>
<p id="demo" class="text text-info text-center">Hello world!</p>
<script>
ele = document.querySelector('.text-info'); // class属性
console.log(ele) // <p class="text-info">Hello</p>
</script>
</body>querySelectorAll()
CSS 选择器查找符合条件所有 HTML 元素
<body>
<h1>DOM 节点</h1>
<p class="text-info">Hello</p>
<p id="demo" class="text text-info text-center">Hello world!</p>
<script>
ele1 = document.querySelectorAll('#demo')
console.log(ele1) // NodeList [p#demo.text.text-info.text-center]
ele2 = document.querySelectorAll('.text-info')
console.log(ele2) // NodeList(2) [p.text-info, p#demo.text.text-info.text-center]
</script>
</body>对象选择器查找 HTML 对象
document.forms 获取form表单对象
<body>
<h1>DOM 节点</h1>
<p class="text-info">Hello</p>
<form id="form-user">
<label for="user">用户名</label>
<input id="user" name="username" value="yoyo">
</form>
<script>
form = document.forms['form-user']
console.log(form)
for (let i = 0; i < form.length; i++) {
console.log(form.elements[i].value) // yoyo
</script>
</body>以下 HTML 对象（和对象集合）也是可访问的：
- document.anchors
- document.body
- document.documentElement
- document.embeds
- document.forms
- document.head
- document.images
- document.links
- document.scripts
- document.title
文章分享自微信公众号：
从零开始学自动化测试
登录
后参与评论
0
条评论
相关文章
推荐文章
|
|
冷静的茶壶 · c++ 类名转字符串-掘金 2 年前 |