JavaScript DOM 原生部分(一):获取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,复杂选择器的性能略低,但在现代浏览器中差异可忽略.