GetElementByID-Несколько Идентификаторов

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

Это не работает, поэтому мне нужна запятая или двоеточие, чтобы сделать эту работу?

22
arrays document element get javascript

13 ответов

document.getElementById() поддерживает только одно имя за раз и возвращает только один узел, а не массив узлов. У вас есть несколько различных вариантов:

  1. вы можете реализовать свою собственную функцию, которая принимает несколько идентификаторов и возвращает несколько элементов.
  2. вы могли бы использовать document.querySelectorAll() это позволяет указать несколько идентификаторов в строке селектора CSS .
  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"));
43

это не сработает,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

другой простой способ, если у вас есть массив идентификаторов, - использовать язык для создания запрос, пример:

const ids = ['myCircle1', 'myCircle2', 'myCircle3'];
const elements = document.querySelectorAll(ids.map(id => `#${id}`).join(', '));
13

нет, это не сработает.

document.getElementById() метод принимает только один аргумент.

однако вы всегда можете установить классы для элементов и использовать getElementsByClassName(). Другой вариант для современных браузеров-использовать querySelectorAll() способ:

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

getElementByID именно это-получить элемент по id.

может быть, вы хотите, чтобы эти элементы circle класс а getElementsByClassName

1

document.getElementById() принимает только один аргумент. Вы можете дать им имя класса и использовать getElementsByClassName() .

1

Я предлагаю использовать методы массива ES5:

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

затем doStuff будет вызываться один раз для каждого элемента и получит 3 аргумента: элемент, индекс элемента внутри массива элементов и массив элементов.

1

Не знаю, если что-то подобное работает в js, в PHP и Python, которые я использую довольно часто, это возможно. Может быть, просто использовать для цикла, как:

function doStuff(){
    for(i=1; i<=4; i++){
        var i = document.getElementById("myCiricle"+i);
    }
}
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.

1

лучший способ сделать это-определить функцию и передать ей параметр имени идентификатора, который вы хотите захватить из DOM, а затем каждый раз, когда вы хотите захватить идентификатор и сохранить его внутри массива, вы можете вызвать функцию

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

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

    return storeId;
}


grabbingId("testing").syle.color = "red";
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>
1

для меня работали недостатки что-то вроде этого

doStuff(

    document.getElementById("myCircle1") ,

    document.getElementById("myCircle2") ,

    document.getElementById("myCircle3") ,

    document.getElementById("myCircle4")

);
0

используйте jQuery или аналогичный, чтобы получить доступ к коллекции элементов только в одном предложении. Конечно, вам нужно поместить что-то подобное в раздел "голова" вашего html: 

<script type='text/javascript' src='url/to/my/jquery.1.xx.yy.js' ...>

так вот магия:

.- Прежде всего давайте предположим что у вас есть 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...

.- С помощью этого "заклинания" jQuery вернет коллекцию объектов, представляющих все элементы div с идентификаторами содержит всю строку "myCircle" в любом месте:

 $("div[id*='myCircle']")

Это все! Обратите внимание, что вы избавляетесь от деталей, таких как числовой суффикс, что вы можете манипулировать всеми divs в одном предложении, анимировать их... Вуаля!

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

докажите это в консоли скриптов Вашего браузера (нажмите F12) прямо сейчас!

0

вы можете сделать это с документом.getElementByID вот как.

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

там вы идете! xD

-4