GetElementByID - 多个ID

时间:2013-01-18 22:48:00

标签: javascript arrays get element document

doStuff(document.getElementById("myCircle1" "myCircle2" "myCircle3" "myCircle4"));

这不起作用,所以我需要使用逗号或分号来完成这项工作吗?

15 个答案:

答案 0 :(得分:52)

document.getElementById()一次只支持一个名称,只返回单个节点而不是节点数组。您有几种不同的选择:

  1. 您可以实现自己的函数,该函数需要多个ID并返回多个元素。
  2. 您可以使用document.querySelectorAll()来允许您在CSS选择器字符串中指定多个ID。
  3. 您可以在所有节点上放置一个公共类名,并将document.getElementsByClassName()与一个类名一起使用。
  4. 每个选项的示例:

    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"));
    

答案 1 :(得分:14)

这不起作用,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(', '));

答案 2 :(得分:8)

不,它不起作用。

document.getElementById()方法只接受一个参数。

但是,您可以始终为元素设置类,然后使用getElementsByClassName()。现代浏览器的另一个选择是使用querySelectorAll()方法:

document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4");

答案 3 :(得分:3)

我建议使用ES5数组方法:

["myCircle1","myCircle2","myCircle3","myCircle4"] // Array of IDs
.map(document.getElementById, document)           // Array of elements
.forEach(doStuff);

然后将为每个元素调用doStuff一次,并将接收3个参数:元素,元素数组内元素的索引以及元素数组。

答案 4 :(得分:1)

getElementByID正是如此 - 通过id获取元素。

也许您想要为这些元素添加circle类和getElementsByClassName

答案 5 :(得分:1)

document.getElementById()只接受一个参数。您可以为他们提供班级名称并使用getElementsByClassName()

答案 6 :(得分:1)

Dunno如果这样的东西在js中工作,在PHP和Python中我经常使用它是可能的。 也许只是用于循环:

function doStuff(){
    for(i=1; i<=4; i++){
        var i = document.getElementById("myCiricle"+i);
    }
}

答案 7 :(得分:1)

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。

答案 8 :(得分:1)

最好的方法是定义一个函数,并传递一个你想从DOM中获取的ID名称的参数,然后每次你想要获取一个ID并存储它在数组内部,然后你可以调用函数

<p id="testing">Demo test!</p>

function grabbingId(element){
    var storeId = document.getElementById(element);

    return storeId;
}


grabbingId("testing").syle.color = "red";

答案 9 :(得分:1)

您可以使用类似惠特数组和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>

答案 10 :(得分:0)

对我来说,工作有点像这样的事情

doStuff(

    document.getElementById("myCircle1") ,

    document.getElementById("myCircle2") ,

    document.getElementById("myCircle3") ,

    document.getElementById("myCircle4")

);

答案 11 :(得分:0)

使用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)中证明这一点!

答案 12 :(得分:0)

如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]

答案 13 :(得分:0)

这是解决方法

if (
  document.getElementById('73536573').value != '' &&
  document.getElementById('1081743273').value != '' &&
  document.getElementById('357118391').value != '' &&
  document.getElementById('1238321094').value != '' &&
  document.getElementById('1118122010').value != ''
  ) {
code
  }

答案 14 :(得分:-4)

你可以使用document.getElementByID来实现这一点。

function dostuff (var here) {
  if(add statment here) {
  document.getElementById('First ID'));
  document.getElementById('Second ID'));
  }
}
你去吧!的xD