Ceryn

JS 获取元素

7分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

网站

HTML DOM querySelector() 方法

Document: querySelector() 方法 | MDN

Document: querySelectorAll() 方法 | MDN

引入

JS 想要修改页面内容、样式，或者给按钮绑定点击事件，第一步通常是先获取页面元素。

获取元素就是让 JS 找到 HTML 里的某个标签，然后再对它进行读取或修改。

正文

定义

定义

获取元素就是通过 document 提供的方法，在页面中找到指定的 HTML 元素，并把它保存到变量里。

document 可以理解为当前网页文档，JS 通过它进入页面结构。

常用方法

最常用的是 document.querySelector() 和 document.querySelectorAll()。

const title = document.querySelector(".title");
const items = document.querySelectorAll(".item");

querySelector() 用来获取第一个匹配的元素。

querySelectorAll() 用来获取所有匹配的元素。

通过选择器获取元素

querySelector() 里面写的是 CSS 选择器。

<h1 id="title">学习 JS</h1>
<p class="text">这是一段文字</p>
const title = document.querySelector("#title");
const text = document.querySelector(".text");
 
console.log(title);
console.log(text);

#title 表示通过 id 获取元素。

.text 表示通过 class 获取元素。

获取单个元素

如果只需要页面中的一个元素，用 document.querySelector()。

<button id="btn">点击</button>
const btn = document.querySelector("#btn");
 
console.log(btn);

这里获取到的是 id 为 btn 的 <button> 元素。

获取到元素之后，就可以继续修改内容、样式，或者绑定事件。

btn.textContent = "已获取按钮";

获取多个元素

如果页面中有多个相同类型的元素，用 document.querySelectorAll()。

<li class="item">HTML</li>
<li class="item">CSS</li>
<li class="item">JS</li>
const items = document.querySelectorAll(".item");
 
console.log(items);
console.log(items[0]);

items 保存的是一组元素，类似数组，可以通过下标读取。

下标从 0 开始，所以 items[0] 是第一个 .item 元素。

遍历多个元素

获取多个元素后，经常会配合 forEach() 遍历。

<button class="btn">按钮 1</button>
<button class="btn">按钮 2</button>
<button class="btn">按钮 3</button>
const btns = document.querySelectorAll(".btn");
 
btns.forEach(function (btn) {
  btn.addEventListener("click", function () {
    console.log("按钮被点击了");
  });
});

这里先获取所有 .btn 元素，再给每个按钮绑定点击事件。

常见写法

写法作用
document.querySelector("#title")获取 id 为 title 的第一个元素
document.querySelector(".text")获取 class 为 text 的第一个元素
document.querySelector("p")获取第一个 <p> 元素
document.querySelectorAll(".item")获取所有 class 为 item 的元素
document.querySelector("input[name='userName']")获取指定 name 的 <input> 元素

旧写法

除了 querySelector()，也可以看到一些更早的获取元素方法。

const title = document.getElementById("title");
const texts = document.getElementsByClassName("text");
const divs = document.getElementsByTagName("div");
写法作用
document.getElementById("title")通过 id 获取元素
document.getElementsByClassName("text")通过 class 获取多个元素
document.getElementsByTagName("div")通过标签名获取多个元素

初学时优先掌握 querySelector() 和 querySelectorAll() 就够用，因为它们可以直接使用 CSS 选择器，写法更统一。

例子

修改文字内容

获取 <p> 元素后，修改它的文本。

<p class="message">旧内容</p>
const message = document.querySelector(".message");
 
message.textContent = "新内容";

读取输入框内容

获取 <input> 后，可以通过 value 读取用户输入。

<input id="userName" type="text">
<button id="btn">提交</button>
const userName = document.querySelector("#userName");
const btn = document.querySelector("#btn");
 
btn.addEventListener("click", function () {
  console.log(userName.value);
});

这里点击按钮时，会输出输入框当前的内容。

修改元素样式

获取元素后，也可以通过 style 修改样式。

<p class="tip">提示文字</p>
const tip = document.querySelector(".tip");
 
tip.style.color = "red";
tip.style.fontSize = "20px";

这种写法适合少量样式修改。

如果样式比较多，通常更推荐切换 class。

获取不到元素

如果选择器写错，或者 JS 执行时元素还没加载出来，就可能获取不到元素。

const title = document.querySelector(".title");
 
console.log(title);

如果页面中没有 .title，结果就是 null。

这时继续操作它就会报错。

const title = document.querySelector(".title");
 
title.textContent = "新标题";

如果 title 是 null，就不能使用 title.textContent。

可以先判断元素是否存在。

const title = document.querySelector(".title");
 
if (title) {
  title.textContent = "新标题";
}

JS 执行位置

如果 JS 写在 HTML 元素前面，代码执行时元素还没有被浏览器解析出来，可能会获取不到。

<script src="main.js"></script>
 
<button id="btn">点击</button>

这种情况下，main.js 可能先执行，导致获取不到 #btn。

常见解决方式是把 <script> 放在 body 结束前。

<button id="btn">点击</button>
 
<script src="main.js"></script>

也可以给 <script> 加 defer。

<script src="main.js" defer></script>

defer 会让 JS 等 HTML 解析完成后再执行。

特点

  • 获取元素是 JS 操作页面的第一步
  • document.querySelector() 获取第一个匹配元素
  • document.querySelectorAll() 获取所有匹配元素
  • querySelector() 和 querySelectorAll() 里面写 CSS 选择器
  • 获取到单个元素后，可以修改内容、样式或绑定事件
  • 获取多个元素后，通常需要遍历处理
  • 如果元素不存在，querySelector() 会返回 null
  • JS 执行太早时，可能获取不到页面元素

理解

可以把 HTML 页面理解成一棵树，页面里的每个标签都是树上的一个节点。

获取元素就是让 JS 先找到树上的某个节点。

找到了元素，后面才能修改文字、改样式、读取输入框内容，或者监听用户点击。

我理解获取元素的重点是：先找到元素，再操作元素。

引出

理解了获取元素之后，就可以继续学习 JS DOM API，了解更多修改页面内容和结构的方法。

后续还可以结合 JS 事件，让页面根据用户操作发生变化。

关系图谱

反向链接