如何选择具有特定属性的跨度[重复]答案

【问题标题】：How to select a span who has a specific attribute [duplicate]如何选择具有特定属性的跨度[重复]
【发布时间】：2017-09-03 18:01:14
【问题描述】：

我需要在包含属性“data-whatever”的span中放入单词“hello”，即对于这个span：

<span data-whatever="nomatterwhat"> </ span>

我需要这样做：

$ ("span[data-whatever]").html("hello");

请注意，上面是使用 JQuery，但我需要知道如何使用纯 javascript 做同样的事情。

【问题讨论】：

使用 DOM API。 developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
尝试谷歌搜索“css 属性选择器”。
我不同意@torazaburo，你链接的那个问题不是这个问题的重复。那是css，如果你知道那个答案和我在这里需要什么之间的关系，那对你有好处，但我不知道如何用你链接的帖子解决我的问题。
嗨罗伯托。所以首先你没有阅读关于 CSS 选择器的手册，或者关于使用 JavaScript 使用 CSS 选择器查找元素的手册。 “手册”是指一百个文档页面、教程、介绍或 Google 结果页面中的任何一个。现在您没有阅读这个被标记为重复的问题的答案，特别是第二个答案，它明确指出“注意这也可以在 JQuery 选择器中使用，或使用document.querySelector”。如果你放慢速度，阅读和消化东西，你会发现你作为程序员的进步会更快。
好的，我明白了，只是在与我无关的问题上找到答案的概率可能很困难......或者当“可能已经有你的问题的问题回答”，当我提出问题时显示，不显示您链接的帖子。

【解决方案1】：

您可以使用querySelector

document.querySelector('span[data-whatever]').innerHTML = "You text";

【讨论】：

这根本行不通。
它适用于我的情况，太棒了
@torazaburo OP 已接受它。你能告诉我这个答案有什么问题，以便我可以改进它。我应该遍历querySelectorAll 返回的任何内容并设置innerHTML 还是使用querySelector？
它的问题是它不起作用。 querySelectorAll 返回一个 NodeList，它没有 innerHTML 属性。除了他实际上没有尝试过之外，这意味着 OP 完全接受了它。是循环还是使用querySelector 取决于 OP 的意图——他是想对所有这些元素都这样做，还是希望只有一个。

【解决方案2】：

试试这个：

var el = document.querySelectorAll('span');
el.forEach(function(item){
  if(item.hasAttribute('data-whatever')){
    item.innerHTML = 'Hello';
  }
})

【讨论】：

我更新了代码来修复它。
这不可能在所有浏览器中工作，因为querySelectorAll 的结果是NodeList，它可能没有forEach 方法。无论如何，为什么不直接使用属性选择器开始呢？