JavaScript 学习-27.查找HTML DOM节点(元素)
Posted 上海-悠悠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 学习-27.查找HTML DOM节点(元素)相关的知识，希望对你有一定的参考价值。
前言
如何查找和访问 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
开发者涨薪指南
48位大咖的思考法则、工作方式、逻辑体系
以上是关于JavaScript 学习-27.查找HTML DOM节点(元素)的主要内容，如果未能解决你的问题，请参考以下文章
50 天学习 50 个项目 - HTML/CSS and JavaScript
50 天学习 50 个项目 - HTML/CSS and JavaScript
50 天学习 50 个项目 - HTML/CSS and JavaScript