JavaScript 中定位 DOM 元素的 15 种方法详解（含高频使用场景案例）

JavaScript 中定位 DOM 元素的 15 种方法详解（含高频使用场景案例）

一、经典 DOM 选择方法

1. document.getElementById()

<div id="header">网站头部</div>

const header = document.getElementById('header');
console.log(header.textContent); // "网站头部"

特点：

• 返回单个元素对象
• 需要严格匹配id属性（区分大小写）

2. document.getElementsByClassName()

<ul>
  <li class="item active">首页</li>
  <li class="item">产品</li>
  <li class="item">关于</li>
</ul>

const items = document.getElementsByClassName('item');
console.log(items.length); // 3（实时集合）
items[1].style.color = 'red'; // 第二个元素变红

动态集合特性：

// 动态添加元素后集合自动更新
const newItem = document.createElement('li');
newItem.className = 'item';
document.querySelector('ul').appendChild(newItem);
console.log(items.length); // 4

3. document.getElementsByTagName()

const images = document.getElementsByTagName('img');
console.log(images[0].src); // 获取第一个图片地址

二、现代 CSS 选择器方法

4. document.querySelector()

<div class="user-card" data-role="admin">管理员</div>

// 组合选择器示例
const adminCard = document.querySelector('.user-card[data-role="admin"]');
adminCard.style.backgroundColor = '#ffeb3b';

5. document.querySelectorAll()

<div class="product">
  <p class="price">$19.99</p>
</div>
<div class="product">
  <p class="price">$29.99</p>
</div>

// 层级选择器
const prices = document.querySelectorAll('.product > .price');
prices.forEach(price => {
  price.style.fontWeight = 'bold';
});

复杂选择器案例

// 选择第三个带有data属性的div
const specialDiv = document.querySelector('div:nth-child(3)[data-widget]');

// 选择文本包含"重要"的元素
const importantElements = document.querySelectorAll(':contains("重要")');

三、特殊元素集合

6. document.forms

<form id="loginForm">
  <input type="text" name="username">
</form>

const loginForm = document.forms.loginForm;
console.log(loginForm.username.value); // 访问表单字段

7. document.images

// 获取所有PNG图片
const pngImages = [...document.images].filter(img => 
  img.src.endsWith('.png')
);

8. document.links

// 修改所有外部链接
document.links.forEach(link => {
  if (link.hostname !== window.location.hostname) {
    link.target = '_blank';
  }
});

四、层级关系遍历

9. parentNode / parentElement

<div class="container">
  <ul>
    <li class="target">目标元素</li>
  </ul>
</div>

const target = document.querySelector('.target');
console.log(target.parentElement.tagName); // UL
console.log(target.parentElement.parentElement.className); // container

10. childNodes / children

const container = document.querySelector('.container');
console.log(container.children[0].tagName); // UL

11. previousElementSibling / nextElementSibling

<ul>
  <li>苹果</li>
  <li class="target">香蕉</li>
  <li>橘子</li>
</ul>

const target = document.querySelector('.target');
console.log(target.previousElementSibling.textContent); // 苹果
console.log(target.nextElementSibling.textContent); // 橘子

五、属性选择方法

12. 通过属性选择

<input type="text" data-validate="required">

const requiredFields = document.querySelectorAll('[data-validate="required"]');
requiredFields.forEach(field => {
  field.style.border = '2px solid red';
});

13. 模糊属性匹配

// 选择所有包含data-开头的属性
const customDataElements = document.querySelectorAll('[data-]');

// 选择src以jpg结尾的图片
const jpgImages = document.querySelectorAll('img[src$=".jpg"]');

六、性能优化建议

14. 选择器优化策略

// 差：全文档扫描
document.querySelectorAll('.btn .icon');

// 优：限定范围
const sidebar = document.getElementById('sidebar');
sidebar.querySelectorAll('.icon');

15. 缓存DOM引用

// 差：多次查询
document.querySelector('.price').style.color = 'red';
document.querySelector('.price').style.fontSize = '16px';

// 优：缓存引用
const priceElement = document.querySelector('.price');
priceElement.style.color = 'red';
priceElement.style.fontSize = '16px';

七、方法对比总结

方法	返回类型	是否实时	使用场景
getElementById	单个元素	否	精确ID查找
getElementsByClassName	HTMLCollection	是	动态类名集合
querySelector	单个元素	否	复杂CSS选择器查询
querySelectorAll	NodeList	否	复杂多元素查询
getElementsByTagName	HTMLCollection	是	按标签名批量操作

实际开发建议：

• 优先使用querySelector/querySelectorAll应对复杂场景
• 在需要频繁操作动态集合时使用getElementsBy*方法
• 对表单操作优先使用document.forms等专用集合
• 始终注意缓存重复使用的DOM引用

扩展思考：

// 自定义选择器扩展
Element.prototype.customSelect = function(selector) {
  return this.matches(selector) ? [this] : [];
};

// 使用示例
document.body.customSelect('.test').forEach(el => {
  el.style.display = 'none';
});