每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
document 表示当前整体文档对象
1. <body>
2. <a class="red-link col-md-3" id="baiduID" href="https://www.baidu.com">百度<span>123<span>456</span></span></a>
3. <a class="red-link col-md-2" id="baiduID" href="https://www.baidu.com">百度123</a>
4. <input type="radio" name="sex" id="sex0" value="0">
5. <input type="radio" name="sex" id="sex1" value="1">
6. <input type="radio" name="sex" id="sex2" value="2">
7. </body>
getElementById 获取指定id的标签或元素 要么是1个 要么是null
如果制定id不存在 会得到null 即空对象
1. var baidu = document.getElementById('baiduID')
tagName 返回元素的标签名
1. console.log(baidu.tagName) //a
textContent 设置或返回节点及其后代的文本内容
1. console.log(baidu.textContent) //百度123456
2. // 获取id
3. console.log(baidu.id) //baiduID
1. var sex = document.getElementsByName('sex')
2. console.log(sex.tagName)
3. // 输出为undefined 未定义因为NodeList没有tagName
4.
5. console.log(sex.length)
6. // length 可返回数组的长度
7.
8. console.log(sex.item(1).tagName)
9. // item(1索引值)可返回节点列表中处于指定的索引号的节点
10.
11. for(var i = 0;i < sex.length;i++){
12. console.log(sex[i].value)
13. // sex是一个NodeList 所以通过[0]索引值获取列表中的第一个项
14. // 实际上索引从0开始计算 所以[x]表示x+1项
15. }
1. var sex = document.getElementsByName('sex')[1]
2. //获取第二个name属性的值是sex的元素
3. // 如果不存 则是undefined
4. console.log(sex)
HTMLCollection 集合
1. var inputs = document.getElementsByTagName('input')
2. // 通过标签名(不区分大小写)来获取一组标签
3. console.log(inputs)
4. console.log(inputs.length)
document.getElementsByClassName()
1. var links = document.getElementsByClassName('col-md-3')
2. console.log(links[0].textContent)
3. // 通过class属性的值获取一组标签元素
4. // 使用任意一个样式类即可 不用全部写出来
5.
6. console.log(links[0].innerHTML)
7. // innerHTML 得到标签内部的HTML 连同标签一起显示出来
8.
9. console.log(links[0].innerText)
10. // 得到标签内部[所有]文本 即这个在子标签内也一样能得到
11.
12. // querySelector()
13. // 使用css筛选器获取标签元素
14. var a = document.querySelector('#baiduID')
15. // 得到的是一个符合条件的标签元素
16. // 相当于querySelectorAll('#baiduID')[0]
17. console.log(a)
18.
19. // querySelectorAll()
20. var b = document.querySelectorAll('#baiduID')
21. console.log(b[0])
总结：
getElementById
getElementsByName
getElementsByClassName
getElementsByTagName
querySelector
querySelectorAll