Selectors API提供了一些方法，通过匹配一组选择器，可以快速轻松地从DOM中检索Element节点。
所以我最近一直在使用 querySelector，并在尝试选择后代元素时注意到一些非常奇怪的行为。 以以下标记为例： 所以我最近一直在使用 querySelector，并在尝试选择后代元素时注意到一些非常奇怪的行为。 以以下标记为例： <div id="parent"> <div id="foo"> <div id="bar"></div> </div> </div> 如果我想从#parent元素的上下文中查询这个DOM树，我可以执行以下操作： var parent = document.getElementById('parent'); parent.querySelector('div') 这将按预期返回 #foo 元素。现在，如果我想仅通过引用标签名称来获取 #bar 元素，我可以执行以下任一操作： var parent = document.getElementById('parent'); parent.querySelector('div div') parent.querySelector('div > div') 相反，两个选择器字符串都返回 #foo 元素，而不是 #bar 元素？但是，将上下文元素（#parent）更改为跨度可以解决问题吗？上下文元素似乎会影响它解释选择器字符串的方式。或者，jQuery 的选择器引擎按预期执行。 我创建了一个 CodePen 来说明问题。 我不认为这是一个错误，因为结果在多个浏览器中是一致的（我使用的是 Chrome 37）。我想我的问题是；我错过了什么吗？这是规范的一部分吗？有人对这种行为有解释吗？ 任何见解将不胜感激，谢谢， 瑞安 根据文档，“选择器是在元素所在的整个 DOM 树的上下文中针对给定元素进行评估的。” 也就是说，它不是 jQuery 风格的“查找与从此处开始的选择器路径匹配的元素”。 根据规范，从 DOM 树级别查看时，#parent #foo 绝对匹配 div div 和 div > div。 当您将 #parent 更改为 span 时，它会“起作用”，因为 #parent #foo 不再匹配 div div，而 #foo #bar 是新的第一个匹配项。 对我来说，截至今天它返回正确的结果 <!DOCTYPE html> <html> <body> <div id="parent"> <div id="foo"> <div id="bar"> <p> sample para </p> </div> </div> </div> <script> //const div = document.querySelector("div div div").innerHTML; var parent = document.getElementById('parent'); const div = parent.querySelector('div div').innerHTML; document.write(div); //sample para const div = parent.querySelector('div div').innerHTML; document.write(div); //sample para </script> </body> </html> 您可以使用“:scope”来限制后代，这样 var parent = document.getElementById('parent'); parent.querySelector(':scope > div div'); 返回#bar。所有现代浏览器都支持它。 从这个答案学习。
因此，我在页面上的四个输入（身高、体重、年龄、性别）上使用 querySelectorAll，并为每个输入添加一个更改事件。 var 输入 = document.querySelectorAll('input'); input.addEventListener('
我如何从 HTML 中选择所有“选择元素”，并从所选选项中获取值。 我如何检索从选项中选择的值， 我想迭代选择的元素...
如何在`querySelector`中将兄弟组合器与`:scope`一起使用
假设我有一个元素，我想选择下一个匹配的同级元素。通常，在 css 中我可以写 ~ ，但是 sibl...
如何使用 document.querySelectorAll() 禁用复选框？
单击复选框后，我无法禁用该复选框。 该复选框已通过 document.querySelectorAll() 附加了一个类名。 我能够使用条件语句 where...
在纯 javascript 的动态对象中，事件仅执行一次而不是始终执行
我有一个菜单，仅在单击/触摸事件后才会显示。 想象一下这种情况： 我有一个菜单，仅在单击/触摸事件后才会显示。 想象一下这种情况： <ul id="menu" class="ul-level1"> <li id="menu-li-1" class="li-level1"><a href="#">word 1 level 1</a></li> <li id="menu-li-2" class="li-level1 haschildren"><a href="#">word 2 level 1</a> <ul id="menu-ul-1" class="ul-level2"> <li id="menu-li-3" class="li-level2"><a href="#">word 1 level 2</a></li> <li id="menu-li-4" class="li-level2 haschildren"><a href="#">word 2 level 2</a> <ul id="menu-ul-2" class="ul-level3"> <li id="menu-li-5" class="li-level3"><a href="#">word 1 level 3</a></li> </ul><!--end level 3 UL--> </li><!--end level 2 LI 1--> <li id="menu-li-6" class="li-level2"><a href="#">word 3 level 2</a> <ul id="menu-ul-3" class="ul-level3 "> <li id="menu-li-7" class="li-level3 haschildren"><a href="#">word 2 level 3</a></li> </ul><!--end level 3 UL--> </li><!--end level 2 LI--> </ul><!-- end level 2 UL 2--> </li><!-- end level 1 LI--> </ul><!--end level 1 UL--> <div id="wall" style="display:grid; grid-template-columns: 1fr 1fr 1fr;"> </div> <script> document.addEventListener("DOMContentLoaded",function(event){ let has_sons = document.querySelectorAll('ul li .haschildren'); let wall = document.querySelector("#wall"); has_sons.forEach((ul_li) => { ul_li.addEventListener("click", function(li){ let li_container_id = this.parentNode.id; let li_container_id_element = document.getElementById(li_container_id); if(!document.getElementById(li_container_id+"-wall")){ var nuovo_elemento = document.createElement('div'); nuovo_elemento.id = li_container_id + "-wall"; nuovo_elemento.classList.add("col1"); wall.appendChild(nuovo_elemento); //instaziare COL2 var nuovo_elemento = document.createElement('div'); nuovo_elemento.id = li_container_id + "-wall"; nuovo_elemento.classList.add("col2"); wall.appendChild(nuovo_elemento); //instaziare COL3 var nuovo_elemento = document.createElement('div'); nuovo_elemento.id = li_container_id + "-wall"; nuovo_elemento.classList.add("col3"); wall.appendChild(nuovo_elemento); let new_container = document.getElementById(li_container_id + "-wall"); //id del sottomenu per la sezione appendix let this_clone = this.cloneNode(true); //ELEMENTO SU CUI SI È FATTO "CLICK" this_clone.id = this.parentNode.id+'_goku'; this_clone.classList.add(this_clone.id); this_clone.classList.add("_goku"); new_container.appendChild(this_clone); let ul_li_ul = li_container_id_element.querySelector('ul'); new_container.appendChild(ul_li_ul); var colonna2 = document.getElementsByClassName("col2")[0]; var colonna3 = document.getElementsByClassName("col3")[0]; //inizio controllo su click menu di secondo livello con apertura al terzo livello let hafigli_liv2 = wall.querySelectorAll('ul li.haschildren'); hafigli_liv2.forEach((ul_li_liv2) => { ul_li_liv2.currentTarget.addEventListener("click", function(link_liv2){ link_liv2.preventDefault(); //evita che cambi pagina let link_liv2_clone = this.cloneNode(true); let link_liv2_clone_a = link_liv2_clone.querySelector('li a'); let li_container_id_liv2 = this.parentNode.parentNode.id; if(!document.getElementById(li_container_id_liv2+"-wall-col2")){ link_liv2_clone.id = li_container_id_liv2+"-wall-col2"; let original_colonna2 = colonna2.cloneNode(true); colonna2.innerHTML = ''; colonna2.appendChild(link_liv2_clone); //inizio controllo su click menu di terzo livello con apertura al secondo livello let hafigli_liv3 = document.querySelectorAll('.col2 li ul li.haschildren'); hafigli_liv3.forEach((ul_li_liv3) => { ul_li_liv3.addEventListener("click", function(link_liv3){ link_liv3.preventDefault(); //evita che cambi pagina let link_liv3_clone = this.cloneNode(true); let link_liv3_clone_a = link_liv3_clone.querySelector('li a'); let li_container_id_liv3 = this.parentNode.parentNode.id; if(!document.getElementById(li_container_id_liv3+"-wall-col3")){ link_liv3_clone.id = li_container_id_liv3+"-wall-col3"; let original_colonna3 = colonna3.cloneNode(true); colonna3.innerHTML = ''; colonna3.appendChild(link_liv3_clone); } }); }); } }); }); } }); //FINE click menu di primo livello con sottolivelli }); }); </script> 出于您可以想象但与此问题无关的原因，以“菜单”作为自己的 ID 的 UL 不可见； 在 DOMContentLoaded 中，带有 getElementById 选择器的 #menu 将克隆到 .col1 元素处的 #wall，该元素具有要显示的 CSS 指令：无子菜单，因此只能看到： 单词 1 级别 1 和 单词 2 级别 1 此时，如果用户单击 word 2 level 1，则只会克隆其子菜单 (.ul-level2) 并显示在 #wall .col2 元素中，该元素具有要显示的 CSS 指令：无子菜单，因此此时您可以看到：word 1 level 2 AND word 2 level 1 at .col1, word 2 level 2 at .col2 此时，如果用户单击 word 2 level 2，其子菜单 (.ul-level2) 将被克隆并显示在 #wall .col3。 这个Javascript适用于一些queryselectorAll，仅此而已，第一次触摸它可以工作，但它不再工作，浏览器在第二次点击时不会告诉任何问题： 例如，如果在单击 word 2 level 2 并动态填充 .col3 之后，他单击 word 3 level 2 任何内容都会改变现有技术。 有谁可以帮忙吗？ 我尝试按照本网站某处的阅读内容编辑某些行，但没有结果 ul_li.addEventListener("click", function(lk){ const link = lk.target.closest('a'); link.preventDefault(); //evita che cambi pagina 但没有任何改变...无论如何它都不起作用 这个网站上有没有人可以在这种情况下提供帮助？
使用通配符追踪querySelectorAll NodeList中的a.href
假设我不想查看 ID，而是选择包含（一部分）此示例的所有 a.href 元素：如果 document.url 是“www.youtube.com”。 var youtubeID = 文档。
使用通配符追踪querySelectorAll节点列表中的a.href
假设我不想查看 ID，而是想选择包含（一部分）此示例 document.url“www.youtube.com”的所有 a.href var youtubeID= document.querySelectorAll('.
寻找一种更智能的方法来遍历querySelectorAll节点列表（在GTM中）
尝试了很多解决方案（例如这些https://dev.to/dailydevtips1/javascript-loop-queryselectorall-results-j6），但无法让循环在GTM/Google跟踪代码管理器中工作。 我的工作脚本 - 不太...
我是一名一年级学生，正在创建一个函数，以便在单击表格行或 td 单元格时突出显示并更改“populateStaffTable”tbody 表格行中的背景颜色。尽管
这似乎是一个可以快速回答的问题，但我找不到。也许我正在搜索错误的术语？请不要使用库，虽然我不需要跨浏览器后备，但我的目标是......
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"...