doStuff(document.getElementById("myCircle1" "myCircle2" "myCircle3" "myCircle4"));
这不起作用,所以我需要逗号或分号才能使其工作吗?
document.getElementById()
一次只支持一个名称,只返回单个节点而不是节点数组。您有几种不同的选择:
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"));
你可以使用数组和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,为它们设置动画...Voilá!
$("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]
你可以用document.getElementByID来做这个是怎么做的。
function dostuff (var here) {
if(add statment here) {
document.getElementById('First ID'));
document.getElementById('Second ID'));
}
}
你去!的xD
这不起作用,getElementById
将只按时间查询一个元素。
您可以使用document.querySelectorAll("#myCircle1, #myCircle2")
查询多个元素。
使用新版本的JavaScript,您还可以将结果转换为数组以轻松横向化。
例:
const elementsList = document.querySelectorAll("#myCircle1, #myCircle2");
const elementsArray = [...elementsList];
// Now you can use cool array prototypes
elementsArray.forEach(element => {
console.log(element);
});
如果您有一组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
document.getElementById()
只有一个参数。你可以给他们一个班级名称并使用getElementsByClassName()
。
Dunno如果像这样的东西在js中工作,在PHP和Python中我经常使用它是可能的。也许只是用于循环:
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";