本文系统解析 JavaScript 中获取 DOM 元素的多种方法。涵盖通过 document.documentElement、head、body 获取常规标签，以及利用 getElementById、getElementsByClassName、getElementsByTagName、getElementsByName 按属性定位。重点介绍 querySelector 与 querySelectorAll 的选择器语法，并说明低版本 IE 的兼容性问题及伪数组的使用特点。
文档对象模型（DOM）
文档对象模型（Document Object Model）
即操作HTML标签的功能
即操作文档流的属性和方法集合
可操作的内容包括
获取元素
移除元素
创建元素
向页面添加元素
绑定事件
获取属性
添加CSS样式
...
DOM核心对象为document
document是浏览器内置对象，含操作元素的方法
JS获取的页面标签称为DOM对象
DOM树
文档以树状结构呈现
整个文档为文档节点
每个标签为元素节点
元素中的文本为文本节点
每个属性为属性节点
注释属于注释节点
获取DOM元素
通过JS代码获取页面标签
获取后可操作标签
获取非常规标签
获取页面HTML标签
语法：document.documentElement
var doc = document.documentElement
console.log(doc);获取页面head标签
语法：document.head
var doc = document.head
console.log(doc);获取页面body标签
语法：document.body
var doc = document.body
console.log(doc);获取常规标签
getElementById
getElementById通过id名称获取标签
因页面id唯一，获取单个元素
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box')
console.log(box) // <div></div>
</script>
</body>获取id为box的div标签
getElementsByClassName
getElementsByClassName通过class名称获取标签
因多个元素class可能相同，获取一组元素
即使只有一个，也返回包含一个DOM元素的一组元素
<body>
<div calss="box"></div>
<script>
var box = document.getElementsByClassName('box')
console.log(box) // [<div></div>]
console.log(box[0]) // <div></div>
</script>
</body>返回伪数组，非数组但类似数组
按索引排列，需用索引获取特定div
getElementsByTagName
getElementsByTagName通过标签名称获取标签
因多个元素标签名可能相同，获取一组元素
即使只有一个，也返回包含一个DOM元素的一组元素
<body>
<div></div>
<script>
var box = document.getElementsByTagName('div')
console.log(box) // [<div></div>]
console.log(box[0]) // <div></div>
</script>
</body>与getElementsByClassName类似，返回伪数组
需用索引获取准确DOM元素
getElementByName
根据name属性获取元素
语法：document.getElementsByName('name属性')
返回值：包含获取元素对象的伪数组
注意：
若有对应name元素，返回所有元素的伪数组
若无对应name元素，返回空伪数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="username" id="">
<script>
var eles = document.getElementsByName('username')
console.log(eles)
</script>
</body>
</html>querySelector
querySelector按选择器方式获取元素
即按CSS选择器方式获取
该方法仅获取第一个满足条件的元素
console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素
console.log(docuemnt.querySelector('.box')) // 获取页面中第一个有 box 类名的元素
console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元素querySelectorAll
querySelectorAll按选择器方式获取元素，返回所有满足条件的元素，以伪数组形式返回
console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素
console.log(docuemnt.querySelectorAll('.box')) // 获取页面中所有有 box 类名的元素返回一组数据，需用索引获取准确DOM元素
querySelector和querySelectorAll在IE低版本不支持，有兼容性问题
以上为JavaScript全解析——DOM操作-获取元素的方式的详细内容，更多关于JavaScript DOM获取元素的方式的资料请关注本站其它相关文章！