JavaScript DOM 怎么获取元素

打开网页时，你点一下按钮就弹出弹窗，选个下拉菜单切换页面内容，这些交互背后都藏着网页的“指挥系统”——DOM，也就是文档对象模型。简单说，DOM就是把HTML页面拆成一个个能被JavaScript操作的“零件”，而要碰这些零件，第一步就是找到它们。就像你找钥匙开家门，得先知道钥匙在玄关抽屉还是鞋柜，找网页元素也是一样，用对方法才不会乱找。

最常用的“精准定位法”：通过ID找元素

每个网页元素的id属性就像人的身份证，是唯一的，不会有重复。比如你写了一个“立即付款”按钮，代码里标了<button id="pay-btn">立即付款</button>，要获取这个按钮就用document.getElementById("pay-btn")。举个生活化的例子，你去奶茶店点单，报“芒果冰霸杯”（唯一的ID），店员直接给你对应的杯子，不会拿成珍珠奶茶。这种方法最快，适合找页面里唯一的元素，比如顶部导航、登录弹窗这些。

批量找同类元素：通过标签名或类名找

有时候你要操作一批一样的元素，比如页面里的所有商品卡片，或者一堆带“重要提示”的文字，这时候用标签名或类名就对了。比如页面里有5个<div class="product-card">，要全找出来就用document.getElementsByClassName("product-card")，会返回一个“元素列表”，就像你把家里所有带“小熊图案”的杯子都找出来，是一批的。要是按标签找，比如所有

段落，就用document.getElementsByTagName("p")。注意哦，这种方法返回的是列表，要改其中某一个，得像取数组里的东西一样加序号，比如cards[0]就是第一个商品卡片。

更灵活的“选择器法”：用CSS选择器找元素

如果你用过CSS给元素加样式，肯定认得.class、#id、div p这种选择符，JavaScript也支持这套逻辑，而且更灵活。要找第一个带“product-card”类的元素，就用document.querySelector(".product-card")；要找所有带这个类的，就用document.querySelectorAll(".product-card")。比如你要找页面里“购物车”的按钮，不管它是<button>还是标签，只要加了id="cart-btn"，用document.querySelector("#cart-btn")一次就能找到，比记ID、类名的方法更省心，适合复杂页面的元素定位。

别踩这些小坑

很多新手会犯错：比如ID写错，把pay-btn写成Pay-Btn，JavaScript是区分大小写的，就像你报的“芒果”和“芒果冰”不是同一个东西；还有getElementsByClassName返回的是“活”列表，你删了一个元素，列表会自动更新，而querySelectorAll是“死”列表，删了元素它不会变，要是做批量删除操作，得注意这个区别。

掌握这几种方法，基本就能搞定网页里的绝大多数元素查找需求，剩下的就是多练。比如你想做一个点击按钮换图片的效果，先找到按钮和图片元素，再用DOM改图片地址，一步步来就很简单。