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属性")
示例
DOM 节点
Hello world!
一般如果元素有id属性，id一般都是唯一属性，所以通过id查找是最简单的方法。
如果元素被找到，此方法会以对象返回该元素, 如果未找到元素，返回null。
getElementsByClassName()
如果元素只有一个class属性，如下面的class="text"，会查找页面上所有的class属性带有text属性的元素。
DOM 节点
Hello
Hello world!
返回的结果是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"属性。
DOM 节点
Hello
world!
Hello world!
getElementsByName()
根据name属性查找所有name="username", 返回NodeList数组对象
DOM 节点
Hello
getElementsByTagName()
通过tag标签属性查找所有的标签元素, 返回HTMLCollection 数组对象
DOM 节点
Hello
querySelector()
CSS 选择器查找 HTML 元素
DOM 节点
Hello world!
它始终返回的是单个元素对象，如果查找不到返回null
当页面上有多个元素属性一样的时候，此时会返回第一个元素
DOM 节点
Hello
Hello world!
querySelectorAll()
CSS 选择器查找符合条件所有 HTML 元素
DOM 节点
Hello
Hello world!
对象选择器查找 HTML 对象
document.forms 获取form表单对象
DOM 节点
Hello
以下 HTML 对象（和对象集合）也是可访问的：
- document.anchors
- document.body
- document.documentElement
- document.embeds
- document.forms
- document.head
- document.images
- document.links
- document.scripts
- document.title