Selectors API提供了一些方法，通过匹配一组选择器，可以快速轻松地从DOM中检索Element节点。
这似乎是一个可以快速回答的问题，但我找不到。也许我正在搜索错误的术语？请不要使用库，虽然我不需要跨浏览器后备，但我的目标是......
javascript - querySelectorAll 与 addEventListener - 如何从变量中获取交互的元素和变量的数量
我有 HTML： 我有 HTML： <form name="form" .. <input type="text" name="title1" id="title1" class="f_title" value="smth LV"> <input type="text" name="title2" id="title2" class="f_title" value="smth EN"> <input type="text" name="title3" id="title3" class="f_title" value="smth DE"> <input type="text" name="url1" id="url1" class="f_url" value="smth-lv"> <input type="text" name="url2" id="url2" class="f_url" value="smth-en"> <input type="text" name="url3" id="url3" class="f_url" value="smth-de"> 如果用户更改输入“标题”，我会用该值进行一些替换，并且我想将其设置为正确的输入“url”。 以“很好”的方式，我无法获取交互字段的“数量”，也无法将其设置为相应的“url”...我想我知道如果使用 for() 和 eval() 该怎么做。 如果我使用 [正确] JS 的东西，比如 querySelectorAll 和 addEventListener: let i = 1; document.querySelectorAll('.f_title').forEach(el => { el.addEventListener('change', () => { if (typeof form.url[i] !== 'undefined') { ... form.url[i] = form.title[i].value; // for example - if changes input "title2" - how to alert(2) and how to reference to form.url2 in this loop? } }); i++; }); 您可以使用 forEach 回调获取的第二个参数：标题项的索引（在示例中为 0、1 或 2）。如果您还查询 url 输入的集合，那么您可以使用该索引来访问相应的 url 输入。 例如，我以小写形式复制输入值，并将所有空格替换为连字符： const urlInputs = document.querySelectorAll('.f_url'); document.querySelectorAll('.f_title').forEach((el, i) => { el.addEventListener('input', () => { if (urlInputs[i]) { urlInputs[i].value = el.value.replaceAll(" ", "-").toLowerCase(); } }); }); <form name="form"> <input type="text" name="title1" id="title1" class="f_title" value="smth LV"> <input type="text" name="title2" id="title2" class="f_title" value="smth EN"> <input type="text" name="title3" id="title3" class="f_title" value="smth DE"> <input type="text" name="url1" id="url1" class="f_url" value="smth-lv"> <input type="text" name="url2" id="url2" class="f_url" value="smth-en"> <input type="text" name="url3" id="url3" class="f_url" value="smth-de"> </form>
querySelectorAll 使用 insertAdjacentHTML 加载内容后返回空 NodeList
情况： 我正在将内容从数据库加载到我的 HTML 站点，并使用 insertAdjacentHTML 将其插入。 内容也显示正确，所有数据都在这里。 我想把车展开...
我有一个具有以下格式类的输入字段： some_starting_constant_string somevariablestring some_ending_constant_string 所以我想要一个使用开头和 e 组合的 querySelector...
如何有效/正确地处理多个嵌套的基于列表的菜单/导航的任何列表项的点击事件？
抱歉，如果我的问题确实是针对新手级别的...... 我有一个 3 级列表来构建菜单，但我不想使用 href。 我想改用特定的属性并调用 javascript 函数
如何在 JavaScript 中将通配符元素名称与“querySelector()”或“querySelectorAll()”进行匹配？
有没有办法使用querySelector或querySelectorAll进行通配符元素名称匹配？ 我试图解析的 XML 文档基本上是一个简单的属性列表 我需要找到...
javascript addEventListener by querySelector 不起作用
嗨，这是我的 javascript 代码： window.onload = 函数() { 函数隐藏广告（）{ setTimeout(隐藏, 2000); } 函数隐藏() { var ads = document.querySelector(".ads"...
如何在不访问有问题的浏览器页面的情况下调试“不是有效的选择器”
我在工作中（在 Chrome 中）制作了一个 TamperScript，它从网页收集元素列表。该脚本被很多人使用，没有错误。但在一个人的工作站上，它失败并出现错误：
querySelectorAll 未在递归函数内返回更新的节点列表
我正在尝试抓取将来创建的 DOM 中的一个元素。为了简单起见，当用户通过单击上传按钮上传图像时，会在 DOM 中创建一个 div，它有一个类 ...
为什么 js dom api 'querySelector' 选择自身
我很困惑为什么$1是firstBB，querySelector('.aa .bb')调用应该在#root元素下执行。 const $1 = document.querySelector('#root').querySelector('.aa .bb'); const $2 = 文档。
如何从 Chrome 扩展中的 javascript 中的当前选项卡获取 <div> HTML 元素并打印它
我正在构建我的第一个 Chrome 扩展程序。功能集将会更大，但目前，我正在尝试从活动选项卡获取 HTML 元素。该选项卡将始终是温室网页。 对于
我需要获取 DOM 元素 myRootElement 中满足以下条件的所有 DOM 元素： 具有多个元素名称之一（例如 div 或 blockquote） 有几个类名之一（...
在 DOM 上更改变量后，如何获取 javascript 中变量的初始值？
我正在尝试获取输入字段中给定部分所需的成分数量。 当 dom 上的金额发生变化时，我无法访问 html 中的初始金额。正因为如此...
我有一个要求，我必须拾取容器中的最后一个 .div 并对其应用一些业务逻辑。最后一个 .div 的选择必须是动态的，因为用户可以选择...
未输入国家/地区时的 Covid-19 错误消息与 API 不匹配
我正在开发一个 COVID-19 跟踪器应用程序，到目前为止它可以工作，但是当用户搜索不在 API 中的国家/地区时，我遇到了问题，错误消息应该作为 else 语句弹出，w...
带有单个“:not()”的多个连接属性选择器与 JavaScript 中带有多个“:not()”的多个单独属性选择器
我有 2 s 并尝试通过将 2 个连接的属性选择器设置为 1 :not() 和 2 个单独的属性选择器设置为 2 :not()s 来选择 s 分别使用 querySelectorAll() as
在我正在做的页面上，我将以这样的自定义链接元素结束： 在我正在做的页面上，我将以这样的自定义link元素结束： <link rel="multiply" type="service/math" src="path/to/service"> <link rel="substract" type="service/math" src="path/to/service"> ... 我正在尝试使用 querySelectorAll 检索所有类型为 service/... 的链接元素，但我一无所获。 目前我选择的是： root.querySelectorAll('link'); 当我只想要类型为<link>的元素时，它给了我所有service/.*元素 问题： 我可以将正则表达式添加到 QSA 选择器吗？如果是这样，怎么做？ 您不能真正在选择器中使用正则表达式，但 CSS 选择器的功能足以满足您的需求，其受正则表达式启发的“开头为”语法。 您可以使用子字符串匹配属性选择器：link[type^=service] 读取“link类型的节点，其属性type以“服务”开头 来自正式规范： [att^=val] 表示具有 att 属性的元素，其值以前缀“val”开头。如果“val”是空字符串，那么选择器不代表任何东西。 工作 JSFiddle 我知道这已经有 7 年了，但这就是你的做法（对于属性值）： function DOMRegex(regex) { let output = []; for (let i of document.querySelectorAll('*')) { if (regex.test(i.type)) { // or whatever attribute you want to search output.push(i); } } return output; } console.log(DOMRegex(/^service\//)); // your regex here <link rel="multiply" type="service/math" src="path/to/service"> <link rel="substract" type="service/math" src="path/to/service"> <link rel="test" type="notservice/math" src="path/to/notservice"> <div id="some-other-node"></div> 要搜索all元素属性，你可以使用这个： function DOMRegex(regex) { let output = []; for (let i of document.querySelectorAll('*')) { for (let j of i.attributes) { if (regex.test(j.value)) { output.push({ 'element': i, 'attribute name': j.name, 'attribute value': j.value }); } } } return output; } console.log(DOMRegex(/(?<!t)service/)); // your regex here <link rel="multiply" type="service/math" src="path/to/service"> <link rel="substract" type="service/math" src="path/to/service"> <link rel="test" type="notservice/math" src="path/to/notservice"> <div id="some-other-node"></div> 我把它放在一个很好的对象布局中。 帖子很旧，但可能对某人有帮助。如果需要 like 子句并且我们不想只从头开始搜索，可以使用以下语法： document.querySelectorAll('[type*=service]'); 下面的例子： <link rel="multiply" type="service/math" src="path/to/service"> <link rel="substract" type="service/math" src="path/to/service"> 您不能使用正则表达式（Regex），但可以使用CSS选择器为querySelectorAll()以及querySelector()如下所示。 *你可以看到6.2。子串匹配属性选择器. link[type^="service"]可以选择所有<link>的type属性从service开始： document.querySelectorAll('link[type^="service"]'); // rel="multiply"'s <link> and rel="substract"'s <link> [type^="service"]也可以选择所有<link>的type属性从service开始，但我不推荐没有link的它，因为它不太具体所以它也可能选择其他元素： document.querySelectorAll('[type^="service"]'); // rel="multiply"'s <link> and rel="substract"'s <link> link[type*="service"]也可以选择所有<link>的type属性包含service： document.querySelectorAll('link[type*="service"]'); // rel="multiply"'s <link> and rel="substract"'s <link> 此外，link[src&="service"]还可以选择所有<link>的src属性以service结尾的： document.querySelectorAll('link[src&="service"]'); // rel="multiply"'s <link> and rel="substract"'s <link>
在 querySelectorAll 的选择器中使用 TailwindCSS 类时如何修复“不是有效的选择器”错误？
我正在尝试使用 querySelectorAll() 检索与以下 CSS 选择器匹配的所有 DOM 元素： 让选择器 = 'div.group.w-ful.text-gray-800.dark:text-gray-100.border-b.border-black/10.dark:
我不能用查询选择器全部选择相同的类元素。我使用 VS 代码编辑器
在 javascript 文件中，我使用查询选择器选择相同的类元素都是这样的...... const buttons = document.querySelectorAll(".button"); 在html文件中，我这样写... 在 javascript 文件中，我使用查询选择器选择相同的类元素都是这样的... const buttons = document.querySelectorAll(".button"); 在html文件中，我这样写... <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> </head> <body> <script src="index.js"></script> <button class="button" value="rock" style="background-color: rgb(240, 20, 20)"></button> <button class="button" value="paper" style="background-color: rgb(20, 240, 20)"></button> <button class="button" value="scissor" style="background-color: rgb(20, 20, 240)"></button> </body> </html> 选择元素后，我尝试控制“按钮”。但是我得到的是nodelist(0)。您可以在下图中看到它... 我看了所有的教程，学会了怎么做。我做了完全一样的，但结果不是我所期望的。谁能告诉我是我弄错了还是需要补充什么？ 导入 js 脚本文件页脚。 等待 DOM 加载 document.addEventListener("DOMContentLoaded", function(){ const buttons = document.querySelectorAll(".button"); console.log(buttons); }); <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> </head> <body> <button class="button" value="rock" style="background-color: rgb(240, 20, 20)"></button> <button class="button" value="paper" style="background-color: rgb(20, 240, 20)"></button> <button class="button" value="scissor" style="background-color: rgb(20, 20, 240)"></button> <script src="index.js"></script> </body> </html>
document.querySelectorAll() 不捕获用 JS 创建的元素
我试图捕获动态页面中的一系列元素，这些元素是使用 Javascript 和 document.querySelectorAll() 创建的，但它只捕获直接在 HTML 中创建的元素，显然......