nodelist 相关问题

NodeList接口提供有序节点集合的抽象,而不定义或约束此集合的实现方式。 DOM中的NodeList对象是实时的。 NodeList中的项可通过整数索引访问,从0开始。


为什么我的 for 循环只影响 getElementsByClassName NodeList 中的第一个元素?

我正在尝试循环遍历类 hot 的 NodeList。我想把他们的类名改成cool。当我使用 for 循环时,第二个 似乎没有改变颜色。有谁知道什么... 我正在尝试循环遍历类 hot 的 NodeList。我想将他们的班级名称更改为 cool 。当我使用 for 循环时,第二个 <li> 似乎没有改变颜色。有谁知道我的错误是什么? var elements = document.getElementsByClassName('hot'); var i; for(i = 0; i < elements.length; i++) { elements[i].className = 'cool'; } *{ box-sizing: border-box; } .hot { background-color: red; border: 1px solid black; padding: 10px; margin-top: 1px; font-size: 25px; list-style-type: none; } .cool { background-color: blue; padding: 10px; color: white; font-size: 25px; } <html> <body> <div id="page"> <h1 id="header">List</h1> <h2>Buy Greoceries</h2> <ul> <li id="one" class="hot"><em>Fresh</em>figs</li> <li id="two" class="hot">pine nuts</li> <li id="three" class="hot">honey</li> <li id="four">balsamic vinegear</li> </ul> </div> </body> </html> getElementsByClassName 返回活动节点列表。一旦您更改了一个元素上的类,节点列表就会更新以反映这一点,因此您的索引将始终消失。 缓解这种情况的一种方法是使用 Array.slice.call: 将节点列表转换为静态节点列表 var elements = [].slice.call(document.getElementsByClassName('hot')); 演示 正如您所指出的,另一种方法是使用 document.querySelectorAll 返回静态节点列表: document.querySelectorAll('.hot'); 演示

回答 1 投票 0

如何获取nodeList中某个节点的值?

因此,我在页面上的四个输入(身高、体重、年龄、性别)上使用 querySelectorAll,并为每个输入添加一个更改事件。 var 输入 = document.querySelectorAll('input'); input.addEventListener('

回答 4 投票 0

如何从特定 CSS 选择器获取值列表

我想立即从特定的 CSS 选择器中检索值列表。 我只想提取 中的文本。我正在使用: document.querySelectorAll("p > 强") 但是……

回答 2 投票 0

如何迭代节点列表以便为每个元素节点分配特定于索引的事件处理程序?

我正在尝试使用 for 循环来递增多个按钮元素,以便我可以为它们分配不同的操作。 我无法弄清楚这一点,这是代码。 我对 javascript 非常陌生......

回答 3 投票 0

在 ES6 中过滤或映射节点列表

在 ES6 中过滤或映射节点列表最有效的方法是什么? 根据我的阅读,我会使用以下选项之一: [...节点列表].filter 或者 Array.from(nodelist).filter 哪一个...

回答 7 投票 0

如何使用类选择器querySelectorAll在本地存储中设置元素及其值?

我正在尝试制作一个待办事项列表,现在当我按下添加任务按钮时,正在创建 2 个输入和 1 个选择元素并显示在页面上。我保存内容并显示它......

回答 1 投票 0

NodeList 什么时候是活动的,什么时候是静态的?

来自 NodeList 的 MDN: 在某些情况下,NodeList 是一个实时集合,这意味着 DOM 中的更改会反映在集合中。例如, Node.childNodes 已上线: 变数...

回答 2 投票 0

在 JavaScript 中从单个节点创建节点列表

这是其中一个看起来很简单的方法,但我想不出一个好的方法来解决它。 我有一个节点,也许是nodelist = document.getElementById("mydiv"); - 我需要将其标准化为节点...

回答 6 投票 0

如何让 IntersectionObserver 处理 div ID 的节点列表或 div ID 数组?

我正在创建一个在同一 HTML 页面上有多个“章节”的网站。 每章顶部有两个跳过按钮。左侧的跳过按钮跳转到上一章。右边的跳过按钮...

回答 1 投票 0

如何在 JavaScript 中使用单个函数删除多个 DOM 元素?

我正在开发一个项目,需要从页面中删除多个 DOM 元素。有时我需要删除单个元素,有时我需要删除元素集合(例如

回答 1 投票 0

List<Character>到java中的节点列表

如何在java中将List转换为nodelist任何人都可以添加片段 我尝试转换,但它给了我错误。无法将数组列表转换为节点列表 我尝试搜索很多但没有找到任何相关的

回答 1 投票 0


MutationRecord的addedNodes和removedNodes属性是实时的还是静态的NodeList对象?

我正在使用 JavaScript 中的 MutationObserver API,我对 MutationRecord 对象的 addedNodes 和 returnedNodes 属性有疑问。 当突变发生并且

回答 1 投票 0

迭代 document.querySelectorAl 上升元素

希望你能帮我解决这个JS难题。 我需要浏览网页,找到类为“lstp-t”的 div,然后将鼠标悬停在容器 div.user-grid-card_avatar 上,然后再按一些 b...

回答 0 投票 0

javascript 中的 NodeList 对象

谁能告诉我 NodeList 是什么样的对象。我读到它是一个类似数组的对象,可以通过括号表示法访问它,例如 var a = someNode.childNode[0];。你怎么样

回答 8 投票 0

如何将元素附加到特定的 div - Vanilla JS? [已关闭]

我是新来的 - 也是 JavaScript 新手,我正在创建这个待办事项列表 - 我一直在尝试只使用普通 JS。这个想法是用户可以创建自己的任务类别,这些将是

回答 1 投票 0

'querySelectorAll()'返回[object NodeList]而不是实际值

正如标题所示,我在尝试使用 JavaScript 获取某些 HTML div 的值时遇到了麻烦。 我有两个独立的函数,它们实际上是同等编写的,但是在 sh 中...

回答 1 投票 0

具有相同类名的Javascript组元素

我想选择类名为 find-me 的所有元素,并根据它们的其他类(如果相同)将它们分组到单独的数组(或 NodeList)中。这是一个例子: 我想选择类名称为 find-me 的所有元素,并根据它们的其他类(如果相同)将它们分组到单独的数组(或 NodeList)中。这是一个例子: <div class="find-me one two"> Element 1 </div> <div class="find-me one two"> Element 2 </div> <div class="find-me one two three"> Element 3 </div> <div class="find-me one two three"> Element 4 </div> <div class="find-me one two four"> Element 5 </div> <div class="find-me one two"> Element 6 </div> <div class="one two"> Element 7 </div> 我的目标是: 包含元素 1、2 和 6 的一个数组或 NodeList (find-me, one, two) 包含元素 3 和 4 的一个数组或 NodeList (find-me, one, two, three) 包含元素 5 的一个数组或 NodeList (find-me, one, two, four) 不应考虑元素 7,因为它没有 find-me 类 我想我必须使用 document.querySelectorAll('.find-me') 首先获取我感兴趣的所有元素的 NodeList。 但是然后呢?我想我可以将当前元素的类列表与前一个元素进行比较,但是我如何跟踪哪个元素属于哪个组?知道如何实现这一目标吗? 您可以使用此代码: const findMeElements = document.querySelectorAll('.find-me'); const groupedElements = {}; findMeElements.forEach(element => { const currentClasses = Array.from(element.classList); const otherClasses = currentClasses.filter(className => className !== 'find-me'); const key = otherClasses.join(','); if (groupedElements[key]) { groupedElements[key].push(element); } else { groupedElements[key] = [element]; } }); console.log(groupedElements); <div class="find-me one two"> Element 1 </div> <div class="find-me one two"> Element 2 </div> <div class="find-me one two three"> Element 3 </div> <div class="find-me one two three"> Element 4 </div> <div class="find-me one two four"> Element 5 </div> <div class="find-me one two"> Element 6 </div> <div class="one two"> Element 7 </div>

回答 1 投票 0

当控制台从我的 JS 文件记录时,为什么我的节点列表包含 0 个项目?

我关心的JS代码是这样的: const modals=document.querySelectorAll('.modal'); const modalsArray=[...模态]; console.log(modalsArray); document.addEventListener('...

回答 1 投票 0

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.