零基础快速入门前端DOM 元素获取方法详解：从代码到实践(可用于备赛蓝桥杯Web应用开发)

在前端开发中获取 DOM 元素是操作页面内容的基础。下面这段代码展示了多种常用的 DOM 元素获取方式我们将逐一解析其用法、特点并汇总成方便查阅的表格。代码示例与方法解析先看完整代码已简化核心部分!DOCTYPE html html body div classdiv1111/div div classdiv1222/div div classdiv1333/div div classdiv1444/div div classdiv2/div div classdiv3/div span classspan1/span div iddiv5我是设置了id选择器的div5/div script // 1. querySelector通过CSS选择器获取第一个匹配元素 var div2 document.querySelector(.div2); console.log(div2); // 输出div classdiv2/div // 2. getElementById通过id获取元素唯一 var div5 document.getElementById(div5); console.log(div5); // 输出div iddiv5我是设置了id选择器的div5/div // 3. getElementsByClassName通过类名获取元素集合 var div1 document.getElementsByClassName(div1); console.log(div1); // 输出HTMLCollection(4) [div.div1, div.div1, div.div1, div.div1] console.log(div1[2]); // 输出div classdiv1333/div索引从0开始 // 4. getElementsByTagName通过标签名获取元素集合 var divs document.getElementsByTagName(div); console.log(divs); // 输出HTMLCollection(6) [div.div1, div.div1, div.div1, div.div1, div.div2, div.div3] console.log(divs[5]); // 输出div classdiv3/div第6个div索引5 // 5. querySelector再次演示获取第一个.div1 var div111 document.querySelector(.div1); console.log(div111); // 输出div classdiv1111/div // 6. 获取html和body元素 console.log(document.documentElement); // 输出html.../html console.log(document.body); // 输出body.../body /script /body /html1.getElementById()通过 ID 获取元素语法document.getElementById(id)参数id字符串元素的 id 属性值返回值匹配的单个 Element 对象若未找到返回null。特点id 在页面中应唯一因此是最快的获取方式之一。2.getElementsByClassName()通过类名获取元素集合语法document.getElementsByClassName(className)参数className字符串元素的 class 属性值返回值HTMLCollection 类数组对象动态更新包含所有匹配元素。特点需通过索引访问具体元素如div1[2]集合会随 DOM 变化自动更新。3.getElementsByTagName()通过标签名获取元素集合语法document.getElementsByTagName(tagName)参数tagName字符串HTML 标签名如div、span返回值HTMLCollection 类数组对象动态更新包含所有该标签的元素。特点可获取页面中所有指定标签同样需索引访问。4.querySelector()通过 CSS 选择器获取第一个匹配元素语法document.querySelector(selector)参数selector字符串CSS 选择器如.class、#id、div返回值第一个匹配的 Element 对象若未找到返回null。特点灵活强大支持所有 CSS 选择器但仅返回第一个匹配项。5.document.documentElement与document.body直接获取根元素document.documentElement直接获取页面的html根元素。document.body直接获取页面的body元素。方法汇总表格方法 / 属性语法参数类型返回值类型特点 / 注意事项getElementById()document.getElementById(id)字符串idElement 或 nullid 需唯一返回单个元素性能最优。getElementsByClassName()document.getElementsByClassName(className)字符串classHTMLCollection动态返回类数组集合需索引访问集合随 DOM 动态更新。getElementsByTagName()document.getElementsByTagName(tagName)字符串标签HTMLCollection动态返回所有指定标签的集合需索引访问集合随 DOM 动态更新。querySelector()document.querySelector(selector)字符串CSS 选择器Element 或 null支持所有 CSS 选择器仅返回第一个匹配元素灵活但性能略低于 ById。document.documentElement直接访问无Element直接获取页面根元素。document.body直接访问无Element直接获取页面元素。总结若需唯一元素且有 id优先用getElementById()。若需多个元素类名 / 标签用getElementsByClassName()或getElementsByTagName()。若需复杂选择器如后代、伪类用querySelector()仅第一个。直接获取html或body用document.documentElement或document.body。