百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

JavaScript中的querySelector()方法是什么,它是如何工作的?

liuian 2024-12-30 05:16 21 浏览

在JavaScript中,有时您需要访问HTML元素。querySelector方法是一个Web API,它选择与传入的指定CSS选择器匹配的第一个元素。

但是,更详细地说,这是如何工作的呢?在本文中,我们将看一些如何使用querySelector方法以及querySelectorAll方法的示例。

(本文内容参考:java567.com)

querySelector()方法的基本语法

querySelector方法在document对象上调用,并接受一个参数,表示要选择的元素的CSS选择器。

document.querySelector(selector);

如果选择器在文档中匹配到一个元素,则该方法将返回第一个匹配的元素。如果没有匹配项,则该方法将返回null。

如何使用querySelector()方法与类型选择器

CSS中的类型选择器是指HTML元素的名称。例如,button、div、p等。

在第一个示例中,我们在HTML文档中有一个button元素。

<button>Show Alert</button>

如果我们想在JavaScript文件中访问该元素,我们可以像这样使用querySelector方法:

const buttonElement = document.querySelector("button");

这行代码选择页面上看到的第一个按钮,并将结果赋给一个名为buttonElement的const变量。

如果我们将这个buttonElement变量记录到控制台,输出将会是:

console.log(buttonElement);



我们可以使用buttonElement变量,并为按钮添加事件监听器,以便在单击按钮时显示警报。

buttonElement.addEventListener("click", () => {
  alert("Button was clicked!");
});

这是完整的代码和交互示例。

?

如何使用querySelector()方法与类选择器

CSS中的类选择器是指用于HTML元素的类名。例如.container、.button等。

假设我们想要构建一个纸牌游戏,并且希望在单击按钮时隐藏/显示游戏规则。我们可以使用querySelector方法选择按钮和规则容器。

这是初始HTML:

<h1>Let's play solitaire!</h1>
<main>
  <button class="rules-btn">Show Rules</button>
  <section class="rules-container">
    <h2>Rules to the game</h2>
    <ul>
      <li>There are 7 columns of cards</li>
      <li>First column has 1 card, second has 2, third has 3, and so on</li>
      <li>First card in each column is face up, rest are face down</li>
      <li>Move cards to build 4 stacks of cards in ascending order</li>
      <li>Start with aces and build up to kings</li>
      <li>Move cards by dragging and dropping</li>
    </ul>
  </section>
</main>

在JavaScript文件中,我们可以使用querySelector方法选择规则按钮和规则容器。

const rulesBtn = document.querySelector(".rules-btn");
const rulesContainer = document.querySelector(".rules-container");

然后,我们可以为rulesBtn变量添加事件监听器,以在单击按钮时显示/隐藏规则容器。我们使用classList属性在规则容器元素上切换类“show”。

rulesBtn.addEventListener("click", () => {
  rulesContainer.classList.toggle("show");
});

这是一个交互式示例,在这里您可以看到单击按钮时规则容器被显示和隐藏。

?

?

尽管这里的切换是有效的,但代码中有一个小bug。默认情况下,规则将被隐藏,按钮文本显示为“显示规则”。当显示规则时,按钮文本应更改为“隐藏规则”,但现在没有。

在事件监听器内部,我们可以根据规则容器的状态更新按钮的文本内容,当规则显示时显示“隐藏规则”,当规则隐藏时显示“显示规则”。

rulesBtn.textContent = rulesContainer.classList.contains("show")
  ? "Hide Rules"
  : "Show Rules";

现在按钮文本将根据规则容器的状态更改。这是完整的JavaScript代码:

const rulesBtn = document.querySelector(".rules-btn");
const rulesContainer = document.querySelector(".rules-container");

rulesBtn.addEventListener("click", () => {
  rulesContainer.classList.toggle("show");
  rulesBtn.textContent = rulesContainer.classList.contains("show")
    ? "Hide Rules"
    : "Show Rules";
});

这是一个交互式示例,其中包含更新后的JavaScript代码。

?

?

如何使用querySelectorAll()方法

querySelectorAll方法与querySelector方法类似,但不是返回第一个匹配的元素,而是返回所有匹配元素的NodeList。NodeList是一个类似数组的对象,包含所有与指定选择器匹配的元素。

在这个例子中,我们有一个无序的运动列表,我们想为每个列表项生成随机背景颜色。

这是初始HTML:

<button class="btn">Generate Random Background Colors</button>
<ul class="sports-list">
  <li>Football</li>
  <li>Basketball</li>
  <li>Tennis</li>
  <li>Golf</li>
  <li>Swimming</li>
</ul>

要选择无序列表中的所有列表项,我们可以像这样使用querySelectorAll方法:

const sportsList = document.querySelectorAll(".sports-list li");

如果我们将sportsList变量记录到控制台,输出将会是:

console.log(sportsList);



然后,我们需要使用querySelector方法选择按钮。

const randomColorBtn = document.querySelector(".btn");

然后,我们可以创建一个随机颜色列表。

const lightColorsArr = [
  "#FFDAB9",
  "#FFE4B5",
  "#FFFFE0",
  // 省略部分代码
];

每当用户单击按钮时,我们希望洗牌颜色列表,并从数组中选择5种随机浅色。我们可以使用Fisher-Yates洗牌算法来洗牌数组,这是JavaScript中常见的一种方法。

function shuffleArray(arr) {
  let currentIndex = arr.length;
  let randomIndex;

  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;



    [arr[currentIndex], arr[randomIndex]] = [
      arr[randomIndex],
      arr[currentIndex],
    ];
  }

  return arr;
}

然后我们可以为按钮添加事件监听器并洗牌数组。

randomColorBtn.addEventListener("click", () => {
  const shuffledColors = shuffleArray(lightColorsArr);
});

对于每个列表项,我们可以将背景颜色设置为洗牌数组中的随机颜色。

sportsList.forEach((list, index) => {
  list.style.backgroundColor = shuffledColors[index];
});

这是完整的代码:

const sportsList = document.querySelectorAll(".sports-list li");
const randomColorBtn = document.querySelector(".btn");

console.log(sportsList);

const lightColorsArr = [
  "#FFDAB9",
  "#FFE4B5",
  "#FFFFE0",
  // 省略部分代码
];

function shuffleArray(arr) {
  let currentIndex = arr.length;
  let randomIndex;

  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    [arr[currentIndex], arr[randomIndex]] = [
      arr[randomIndex],
      arr[currentIndex],
    ];
  }

  return arr;
}

randomColorBtn.addEventListener("click", () => {
  const shuffledColors = shuffleArray(lightColorsArr);

  sportsList.forEach((list, index) => {
    list.style.backgroundColor = shuffledColors[index];
  });
});

这是一个交互式示例,包含完整的JavaScript代码。单击按钮,您会看到列表项更改为随机背景颜色。

?

?

结论

querySelector和querySelectorAll方法是有用的Web API,允许您访问DOM中的元素。您可以使用这些方法通过类型、类、ID、属性、伪类和伪元素选择器来选择元素。

我建议您尝试使用这些方法,并在您自己的项目中看看您能做些什么。

我希望您找到本文有用和信息丰富。祝编码愉快!

(本文内容参考:java567.com)

相关推荐

2023年最新微信小程序抓包教程(微信小程序 抓包)

声明:本公众号大部分文章来自作者日常学习笔记,部分文章经作者授权及其他公众号白名单转载。未经授权严禁转载。如需转载,请联系开百。请不要利用文章中的相关技术从事非法测试。由此产生的任何不良后果与文...

测试人员必看的软件测试面试文档(软件测试面试怎么说)

前言又到了毕业季,我们将会迎来许多需要面试的小伙伴,在这里呢笔者给从事软件测试的小伙伴准备了一份顶级的面试文档。1、什么是bug?bug由哪些字段(要素)组成?1)将在电脑系统或程序中,隐藏着的...

复活,视频号一键下载,有手就会,长期更新(2023-12-21)

视频号下载的话题,也算是流量密码了。但也是比较麻烦的问题,频频失效不说,使用方法也难以入手。今天,奶酪就来讲讲视频号下载的新方案,更关键的是,它们有手就会有用,最后一个方法万能。实测2023-12-...

新款HTTP代理抓包工具Proxyman(界面美观、功能强大)

不论是普通的前后端开发人员,还是做爬虫、逆向的爬虫工程师和安全逆向工程,必不可少会使用的一种工具就是HTTP抓包工具。说到抓包工具,脱口而出的肯定是浏览器F12开发者调试界面、Charles(青花瓷)...

使用Charles工具对手机进行HTTPS抓包

本次用到的工具:Charles、雷电模拟器。比较常用的抓包工具有fiddler和Charles,今天讲Charles如何对手机端的HTTS包进行抓包。fiddler抓包工具不做讲解,网上有很多fidd...

苹果手机下载 TikTok 旧版本安装包教程

目前苹果手机能在国内免拔卡使用的TikTok版本只有21.1.0版本,而AppStore是高于21.1.0版本,本次教程就是解决如何下载TikTok旧版本安装包。前期准备准备美区...

【0基础学爬虫】爬虫基础之抓包工具的使用

大数据时代,各行各业对数据采集的需求日益增多,网络爬虫的运用也更为广泛,越来越多的人开始学习网络爬虫这项技术,K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章,为实现从易到难全方位覆盖,特设【0基础学爬...

防止应用调试分析IP被扫描加固实战教程

防止应用调试分析IP被扫描加固实战教程一、概述在当今数字化时代,应用程序的安全性已成为开发者关注的焦点。特别是在应用调试过程中,保护应用的网络安全显得尤为重要。为了防止应用调试过程中IP被扫描和潜在的...

一文了解 Telerik Test Studio 测试神器

1.简介TelerikTestStudio(以下称TestStudio)是一个易于使用的自动化测试工具,可用于Web、WPF应用的界面功能测试,也可以用于API测试,以及负载和性能测试。Te...

HLS实战之Wireshark抓包分析(wireshark抓包总结)

0.引言Wireshark(前称Ethereal)是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口,直接...

信息安全之HTTPS协议详解(加密方式、证书原理、中间人攻击 )

HTTPS协议详解(加密方式、证书原理、中间人攻击)HTTPS协议的加密方式有哪些?HTTPS证书的原理是什么?如何防止中间人攻击?一:HTTPS基本介绍:1.HTTPS是什么:HTTPS也是一个...

Fiddler 怎么抓取手机APP:抖音、小程序、小红书数据接口

使用Fiddler抓取移动应用程序(APP)的数据接口需要进行以下步骤:首先,确保手机与计算机连接在同一网络下。在计算机上安装Fiddler工具,并打开它。将手机的代理设置为Fiddler代理。具体方...

python爬虫教程:教你通过 Fiddler 进行手机抓包

今天要说说怎么在我们的手机抓包有时候我们想对请求的数据或者响应的数据进行篡改怎么做呢?我们经常在用的手机手机里面的数据怎么对它抓包呢?那么...接下来就是学习python的正确姿势我们要用到一款强...

Fiddler入门教程全家桶,建议收藏

学习Fiddler工具之前,我们先了解一下Fiddler工具的特点,Fiddler能做什么?如何使用Fidder捕获数据包、修改请求、模拟客户端向服务端发送请求、实施越权的安全性测试等相关知识。本章节...

fiddler如何抓取https请求实现手机抓包(100%成功解决)

一、HTTP协议和HTTPS协议。(1)HTTPS协议=HTTP协议+SSL协议,默认端口:443(2)HTTP协议(HyperTextTransferProtocol):超文本传输协议。默认...