:获取DOM)
文章目录
- 一.根据 ID 获取( getElementById )
- 二.根据类名获取( getElementsByClassName )
- 三.根据标签名获取( getElementsByTagName )
- 四.根据选择器获取( querySelector / querySelectorAll )
- 1.querySelector
- 2.querySelectorAll
- 五.获取表单元素( getElementsByName )
- 六.获取特殊元素( 文档 / body / 头部 )
- 注意事项
- 总结
原生方法无需依赖任何库,是最基础且高效的方式,主要通过
document对象提供的 API 实现.一.根据 ID 获取( getElementById )
- 作用: 通过元素的
id属性获取唯一的 DOM 元素(因为id在文档中应唯一). - 语法:
document.getElementById(id值) - 返回值: 匹配的 DOM 元素对象,若不存在则返回
null.
// HTML: <div id="box">Hello</div>constbox=document.getElementById('box');console.log(box);// <div id="box">Hello</div>二.根据类名获取( getElementsByClassName )
- 作用: 通过元素的
class属性获取所有匹配的元素集合(HTMLCollection,类数组对象). - 语法:
document.getElementsByClassName(类名) - 返回值: 包含所有匹配元素的 HTMLCollection,若不存在则返回空集合.
// HTML: <div class="item">1</div><div class="item">2</div>constitems=document.getElementsByClassName('item');console.log(items);// HTMLCollection(2) [div.item, div.item]console.log(items[0]);// 取第一个元素: <div class="item">1</div>三.根据标签名获取( getElementsByTagName )
- 作用: 通过元素的标签名(如
div、p、ul)获取所有匹配的元素集合(HTMLCollection). - 语法:
document.getElementsByTagName(标签名) - 返回值: 包含所有匹配元素的 HTMLCollection,若不存在则返回空集合.
// HTML: <p>文本1</p><p>文本2</p>constparas=document.getElementsByTagName('p');console.log(paras.length);// 2四.根据选择器获取( querySelector / querySelectorAll )
这是最灵活的方式,支持 CSS 选择器语法,是现代开发中最常用的方法.
1.querySelector
- 作用: 获取第一个匹配 CSS 选择器的 DOM 元素.
- 语法:
document.querySelector(选择器) - 返回值: 第一个匹配的元素对象,若不存在则返回
null.
// HTML: <div class="item">1</div><div class="item">2</div>constfirstItem=document.querySelector('.item');// 类选择器constbox=document.querySelector('#box');// ID 选择器constp=document.querySelector('ul li: first-child');// 复杂 CSS 选择器2.querySelectorAll
- 作用: 获取所有匹配 CSS 选择器的元素集合(NodeList,类数组对象).
- 语法:
document.querySelectorAll(选择器) - 返回值: 包含所有匹配元素的 NodeList,若不存在则返回空集合.
// HTML: <div class="item">1</div><div class="item">2</div>constallItems=document.querySelectorAll('.item');console.log(allItems);// NodeList(2) [div.item, div.item]// 可通过 forEach 遍历(NodeList 支持 forEach,HTMLCollection 不支持)allItems.forEach((item)=>console.log(item));五.获取表单元素( getElementsByName )
- 作用: 通过元素的
name属性获取元素(主要用于表单元素,如input、select). - 语法:
document.getElementsByName(name值) - 返回值: NodeList 集合.
// HTML: <input type="text" name="username">constusername=document.getElementsByName('username')[0];// 取第一个匹配元素六.获取特殊元素( 文档 / body / 头部 )
// 获取 html 根元素consthtml=document.documentElement;// 获取 body 元素constbody=document.body;// 获取 head 元素consthead=document.head;注意事项
获取时机: 必须等待 DOM 加载完成后再获取元素,否则可能返回
null.- 解决方式:
- 将脚本放在
<body>底部; - 使用
DOMContentLoaded事件:document.addEventListener('DOMContentLoaded',function(){// 在这里获取元素});
- 将脚本放在
- 解决方式:
集合类型:
getElementsByClassName/getElementsByTagName返回HTMLCollection(动态集合,DOM 变化会实时更新);querySelectorAll/getElementsByName返回NodeList(静态集合,DOM 变化不会更新);- 两者都是类数组对象,可通过
Array.from()或扩展运算符转为真正的数组:constitems=document.querySelectorAll('.item');constitemsArr=Array.from(items);// 转为数组
性能:
getElementById是最快的获取方式(因为 ID 唯一),其次是querySelector,复杂选择器的性能略低,但在现代浏览器中差异可忽略.
总结
- 原生 JavaScript 中,
querySelector/querySelectorAll因支持 CSS 选择器而最常用,灵活性最高; - 简单场景(如按 ID 获取)用
getElementById更高效; - 框架中优先使用其提供的选择器语法,简化代码.
