JavaScript获取DOM元素有五类方法：1.按ID用getElementById()返回单个元素或null；2.按类名/标签用getElementsByClassName()/getElementsByTagName()返回实时HTMLCollection；3.用querySelector()/querySelectorAll()支持CSS选择器，前者返单个后者返静态NodeList；4.用children/childNodes等属性访问子节点；5.用first/lastElementChild快速获取首尾子元素。
JavaScript 获取 DOM 元素，核心是用对方法、选对目标。不用死记硬背，掌握几类常用方式，再结合实际场景灵活组合，就能覆盖绝大多数需求。
按 ID 快速定位唯一元素
ID 在 HTML 中必须唯一，所以 getElementById() 是最直接、性能最好的方式。它返回单个元素对象，不存在“找不到”就报错的情况——没匹配到时返回 null，安全可用。
-
写法：
const box = document.getElementById('mainBox'); -
注意点：ID 值不带
#符号；大小写敏感；确保页面中确实存在该 ID - 适用场景：操作导航栏、模态框、表单主容器等有明确标识的独立区域
按类名或标签批量获取
当需要操作多个同类元素时，getElementsByClassName() 和 getElementsByTagName() 是传统但实用的选择。它们返回的是 HTMLCollection——一种“实时集合”，DOM 结构变化（比如新增同名 class 的元素）会自动反映在该集合里。
-
类名获取：
const items = document.getElementsByClassName('item');→ 返回所有含item类的元素 -
标签获取：
const ps = document.getElementsByTagName('p');→ 返回所有<p>标签 -
小提醒：这两个方法名里都有
Elements（复数），别漏掉s；返回值不是数组，想用forEach得先转成数组：Array.from(items).forEach(...)
用 CSS 选择器灵活筛选
querySelector() 和 querySelectorAll() 是现代开发中最常用的组合。它们支持完整的 CSS 选择器语法，写法接近写样式，直观又强大。
立即学习“Java免费学习笔记（深入）”；
-
取第一个：
const firstBtn = document.querySelector('button.primary'); -
取全部：
const allLinks = document.querySelectorAll('nav a[href]'); -
区别关键：
querySelector返回单个元素或null；querySelectorAll返回静态的NodeList，不会随 DOM 变化而更新，更可控 -
小技巧：可以嵌套使用，比如先取父容器，再在其内部查子元素：
nav.querySelector('ul').querySelectorAll('li')
获取子元素与特殊节点
有时不需要全局查找，而是从某个已有元素出发找它的后代或直接子级。这时用属性访问比重新查选择器更高效。
-
element.children：只返回子元素节点（<div>、<span>等），忽略文本、注释等 -
element.childNodes：返回所有子节点，包括空白文本节点，日常少用，调试时可辅助查看结构 -
element.firstElementChild/lastElementChild：快速拿到首尾子元素，比children[0]更语义化
