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

这不起作用，所以我需要一个逗号或分号来完成这项工作吗？

4

15 回答 15

79

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

  1. 您可以实现自己的函数，该函数接受多个 id 并返回多个元素。
  2. 您可以使用document.querySelectorAll()它允许您在 CSS 选择器字符串中指定多个 id。
  3. 您可以在所有这些节点上放置一个通用类名并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"));
于 2013-01-18T22:49:12.320 回答
20

这不起作用，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(', '));
于 2013-01-18T22:49:22.457 回答
10

不，这行不通。

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

但是，您可以始终将类设置为元素并getElementsByClassName()改为使用。现代浏览器的另一个选择是使用querySelectorAll()方法：

document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4");
于 2013-01-18T22:49:18.433 回答
3

我建议使用 ES5 数组方法：

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

然后doStuff将为每个元素调用一次，并将接收 3 个参数：元素、元素数组中的元素索引和元素数组。

于 2015-07-03T18:49:54.133 回答
1

getElementByID就是这样 - 通过 id 获取元素。

也许你想给这些元素一个circle类getElementsByClassName

于 2013-01-18T22:50:16.190 回答
1

document.getElementById()只接受一个论点。你可以给他们一个类名并使用getElementsByClassName().

于 2013-01-18T22:51:21.433 回答
1

您可以使用类似这样的 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>
于 2018-08-20T20:24:49.007 回答
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";
于 2017-02-14T05:00:15.983 回答
1

不知道如果这样的东西在我经常使用的 js、PHP 和 Python 中有效，这是可能的。也许只是使用 for 循环，如：

function doStuff(){
    for(i=1; i<=4; i++){
        var i = document.getElementById("myCiricle"+i);
    }
}
于 2016-09-15T09:39:26.547 回答
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。

于 2017-02-09T14:53:18.133 回答
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，为它们设置动画......瞧！

 $("div[id*='myCircle']").addClass("myCircleDivClass").hide().fadeIn(1000);

立即在浏览器的脚本控制台中证明这一点（按 F12）！

于 2013-11-28T16:30:42.887 回答
0

对我来说，像这样完美无瑕

doStuff(

    document.getElementById("myCircle1") ,

    document.getElementById("myCircle2") ,

    document.getElementById("myCircle3") ,

    document.getElementById("myCircle4")

);
于 2013-03-30T10:13:20.450 回答
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]
于 2019-02-13T17:45:54.957 回答
-1

这是解决方案

if (
  document.getElementById('73536573').value != '' &&
  document.getElementById('1081743273').value != '' &&
  document.getElementById('357118391').value != '' &&
  document.getElementById('1238321094').value != '' &&
  document.getElementById('1118122010').value != ''
  ) {
code
  }
于 2020-07-18T06:32:15.207 回答
-5

你可以用 document.getElementByID 来做这就是方法。

function dostuff (var here) {
  if(add statment here) {
  document.getElementById('First ID'));
  document.getElementById('Second ID'));
  }
}

给你！xD

于 2014-10-15T13:44:51.423 回答