【发布时间】：2013-01-18 22:48:00
【问题描述】：
doStuff(document.getElementById("myCircle1" "myCircle2" "myCircle3" "myCircle4"));
这不起作用，所以我需要一个逗号或分号来使它起作用吗？
【问题讨论】：
标签： javascript arrays get element document
【发布时间】：2013-01-18 22:48:00
【问题描述】：
document.getElementById() 一次只支持一个名称，并且只返回一个节点而不是节点数组。您有几种不同的选择：
- 您可以实现自己的函数，该函数接受多个 id 并返回多个元素。
- 您可以使用
document.querySelectorAll()，它允许您在 CSS 选择器字符串中指定多个 id。 - 您可以在所有这些节点上放置一个通用的类名，然后将
document.getElementsByClassName()与一个类名一起使用。
每个选项的示例：
doStuff(document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4"));
或：
// put a common class on each object
doStuff(document.getElementsByClassName("circles"));
或：
function getElementsById(ids) {
var idList = ids.split(" ");
var results = [], item;
for (var i = 0; i < idList.length; i++) {
item = document.getElementById(idList[i]);
if (item) {
results.push(item);
}
}
return(results);
}
doStuff(getElementsById("myCircle1 myCircle2 myCircle3 myCircle4"));
【讨论】：
-
我认为
querySelector接受CSS语法，所以我们需要用逗号分隔选择器。 -
@VisioN - 是的，你是对的 - 我在回答中更正了这个例子。
-
谢谢，哇，这是一个信息矿！非常有帮助，谢谢，我会调查这些选项：D
-
我可以使用一系列数字，例如：
myCirclei吗？ @jfriend00 -
@MHB - 不使用这种技术。
这不行，getElementById 只会按时间查询一个元素。
您可以使用document.querySelectorAll("#myCircle1, #myCircle2") 查询多个元素。
ES6 或更新版本
使用新版本的 JavaScript，您还可以将结果转换为数组，以便轻松遍历它。
例子：
const elementsList = document.querySelectorAll("#myCircle1, #myCircle2");
const elementsArray = [...elementsList];
// Now you can use cool array prototypes
elementsArray.forEach(element => {
console.log(element);
});
如何在 ES6 中查询 ID 列表
如果您有一组 ID，另一种简单的方法是使用该语言来构建您的查询，例如：
const ids = ['myCircle1', 'myCircle2', 'myCircle3'];
const elements = document.querySelectorAll(ids.map(id => `#${id}`).join(', '));
【讨论】：
不，它不会起作用。
document.getElementById() 方法只接受一个参数。
但是，您可以始终为元素设置类并改用getElementsByClassName()。现代浏览器的另一个选择是使用querySelectorAll() 方法：
document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4");
【讨论】：
我建议使用 ES5 数组方法：
["myCircle1","myCircle2","myCircle3","myCircle4"] // Array of IDs
.map(document.getElementById, document) // Array of elements
.forEach(doStuff);
然后doStuff将为每个元素调用一次，并将接收3个参数：元素、元素数组中元素的索引和元素数组。
【讨论】：
getElementByID 就是这样 - 通过 id 获取元素。
也许你想给这些元素一个circle 类和getElementsByClassName
【讨论】：
-
getElementsByClassName 似乎不起作用。我正在使用 SVG。在我的 SVG 对象中，我写了 class="circle"。对吗？
document.getElementById() 只接受一个参数。您可以给他们一个类名并使用 getElementsByClassName() 。
【讨论】：
-
您可能认为它会处理所有案例，但您必须指定要处理的案例，所以
getElementsByClassName()[0]用于第一个，..[1]用于第二个等。
不知道这样的东西是否适用于我经常使用的 js、PHP 和 Python。 也许只是使用 for 循环，例如：
function doStuff(){
for(i=1; i<=4; i++){
var i = document.getElementById("myCiricle"+i);
}
}
【讨论】：
-
肯定不错。最简单。
Vulgo 在这个线程上有正确的想法。我相信他的解决方案是最简单的，尽管他的回答可能更深入一点。这是对我有用的东西。我提供了一个例子。
<h1 id="hello1">Hello World</h1>
<h2 id="hello2">Random</h2>
<button id="click">Click To Hide</button>
<script>
document.getElementById('click').addEventListener('click', function(){
doStuff();
});
function doStuff() {
for(var i=1; i<=2; i++){
var el = document.getElementById("hello" + i);
el.style.display = 'none';
}
}
</script>
显然，只需更改 for 循环中的整数以说明您要定位的元素数量，在本示例中为 2。
【讨论】：
最好的方法是定义一个函数，并将你想从 DOM 中获取的 ID 名称的参数传递给它，然后每次你想获取一个 ID 并将其存储在一个数组中，然后就可以调用函数了
<p id="testing">Demo test!</p>
function grabbingId(element){
var storeId = document.getElementById(element);
return storeId;
}
grabbingId("testing").syle.color = "red";
【讨论】：
您可以使用类似这样的 whit 数组和 for 循环。
<p id='fisrt'>??????</p>
<p id='second'>??????</p>
<p id='third'>??????</p>
<p id='forth'>??????</p>
<p id='fifth'>??????</p>
<button id="change" onclick="changeColor()">color red</button>
<script>
var ids = ['fisrt','second','third','forth','fifth'];
function changeColor() {
for (var i = 0; i < ids.length; i++) {
document.getElementById(ids[i]).style.color='red';
}
}
</script>
【讨论】：
对我来说这样的工作完美无缺
doStuff(
document.getElementById("myCircle1") ,
document.getElementById("myCircle2") ,
document.getElementById("myCircle3") ,
document.getElementById("myCircle4")
);
【讨论】：
使用 jQuery 或类似工具，只需一句话即可访问元素集合。当然，你需要在你的 html 的“head”部分中添加这样的内容：
<script type='text/javascript' src='url/to/my/jquery.1.xx.yy.js' ...>
这就是魔法：
.- 首先让我们假设您有一些带有您所写的 ID 的 div，即，
...some html... <div id='MyCircle1'>some_inner_html_tags</div> ...more html... <div id='MyCircle2'>more_html_tags_here</div> ...blabla... <div id='MyCircleN'>more_and_more_tags_again</div> ...zzz...
.- 使用这个“spell”，jQuery 将返回一个对象集合，这些对象代表所有 div 元素，其 ID 在任何地方都包含整个字符串“myCircle”：
$("div[id*='myCircle']")
这就是全部！请注意，您摆脱了诸如数字后缀之类的细节，您可以在一个句子中操作所有 div，为它们设置动画......瞧！
$("div[id*='myCircle']").addClass("myCircleDivClass").hide().fadeIn(1000);
立即在浏览器的脚本控制台（按 F12）中证明这一点！
【讨论】：
正如jfriend00所说，
document.getElementById() 一次只支持一个名称，并且只返回一个节点而不是节点数组。
但是，这是我创建的一些示例代码，您可以提供一个或逗号分隔的 id 列表。它将为您提供数组中的一个或多个元素。如果有任何错误，它将返回一个带有 Error 作为唯一条目的数组。
function safelyGetElementsByIds(ids){
if(typeof ids !== 'string') return new Error('ids must be a comma seperated string of ids or a single id string');
ids = ids.split(",");
let elements = [];
for(let i=0, len = ids.length; i<len; i++){
const currId = ids[i];
const currElement = (document.getElementById(currId) || new Error(currId + ' is not an HTML Element'));
if(currElement instanceof Error) return [currElement];
elements.push(currElement);
};
return elements;
}
safelyGetElementsByIds('realId1'); //returns [<HTML Element>]
safelyGetElementsByIds('fakeId1'); //returns [Error : fakeId1 is not an HTML Element]
safelyGetElementsByIds('realId1', 'realId2', 'realId3'); //returns [<HTML Element>,<HTML Element>,<HTML Element>]
safelyGetElementsByIds('realId1', 'realId2', 'fakeId3'); //returns [Error : fakeId3 is not an HTML Element]
【讨论】：
解决办法
if (
document.getElementById('73536573').value != '' &&
document.getElementById('1081743273').value != '' &&
document.getElementById('357118391').value != '' &&
document.getElementById('1238321094').value != '' &&
document.getElementById('1118122010').value != ''
) {
code
}
【讨论】：
您可以使用 document.getElementByID 来实现，方法如下。
function dostuff (var here) {
if(add statment here) {
document.getElementById('First ID'));
document.getElementById('Second ID'));
}
}
给你！ xD
【讨论】：