如何从getElementById中获得多个唯一的结果？JavaScript
如何从getElementById中获得多个唯一的结果？JavaScript
提问于 2018-09-26 08:09:30
我正在尝试创建一个随机字符生成器，可以一次创建几个不同的字符，但我很难让数据显示在多个id=标签上。例如，为第一个字符的名称生成数据，但不为第二个字符的名称生成数据。
是否可以显示来自同一数组的两个结果的唯一结果？
<span>Name:</span><span id="name"></span>
<span>Name:</span><span id="name"></span>Html
var name = ["vin","hau","kin"]
var randomName = name[Math.floor(Math.random() * name.length)]
console.log(randomName);
document.getElementById("name").innerHTML = randomNameJavaScript
回答 1
Stack Overflow用户
发布于 2018-09-26 08:20:59
使用document.querySelectorAll。它需要CSS选择器。永远不要使用同一个id两次。这就是糟糕的HTML。
使用document.querySelectorAll，您可以选择所有类型的内容。
选择class=为“foo”的所有元素
const elements = document.querySelectorAll('.foo')换句话说，它将选择下面的1和2，而不是3
<div class="foo">one</div>
<h1 class="foo">two</h1>
<div>three</div>选择作为元素class="foo“的直接子级的所有div
const elements = document.querySelectorAll('.foo>div')换句话说，选择下面的一个和两个
<div class="foo">
<div>one</div>
<div>two</div>
</div>选择class=为“foo”的所有div
const elements = document.querySelectorAll('div.foo')换句话说，选择下面的一个和两个，而不是三个
<div class="foo">one</div>
<div class="foo">two</div>
<hi class="foo">three</h1>选择所有pre元素
const elements = document.querySelectorAll('pre')换句话说，选择下面的两个和三个
<div>one<div>
<pre>two</pre>
<pre>three</pre>选择id以"abc“开头的所有元素
const elements = document.querySelectorAll("[id^=abc]");换句话说，选择下面的一个和两个
<div id="abc1">one</div>
<div id="abc2">two</div>
<div id="def3">three</div>它不一定是id，它可以是任何属性
const elements = document.querySelectorAll("a[href^=https://]");选择所有具有以https://开头的href属性的<a>元素，以便选择下面的一个和两个
<a href="https://google.com">one</div>
<a href="https://duckduckgo.com">two</div>
<a href="http://bing.com">three</div>我最近用过的一个
const elements = document.querySelectorAll("div[data-mystuff]");选择所有具有data-mystuff属性的元素，这样下面将选择一个和两个
<div data-mystuff="usa">one</div>
<div data-mystuff="canada">two</div>
<div>three</div>示例
document.querySelectorAll('div[data-mystuff]').forEach((elem) => {
console.log(elem.dataset.mystuff);
});
document.querySelectorAll('div[data-mystuff]').forEach((elem) => {
console.log(elem.dataset.mystuff);
});<div data-mystuff="usa">one</div>
<div data-mystuff="canada">two</div>
<div>three</div>
等等。
还要注意，querySelectorAll也在所有元素上，因此您可以使用它来选择特定元素下的内容。换句话说
someElement.querySelectorAll('.foo')选择作为someElement子级的具有class="foo"的所有元素
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52508181
复制相关文章
相似问题