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

Ответ 1

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

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

Ответ 2

Это не сработает, 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(', '));

Ответ 3

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

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

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

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

Ответ 4

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

Возможно, вы хотите дать этим элементам класс circle и getElementsByClassName

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

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

doStuff(

    document.getElementById("myCircle1") ,

    document.getElementById("myCircle2") ,

    document.getElementById("myCircle3") ,

    document.getElementById("myCircle4")

);

Ответ 9

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

<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']")

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

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

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

Ответ 10

У Вульго есть правильная идея в этой теме. Я считаю, что его решение является самым простым из множества, хотя его ответ мог быть немного более глубоким. Вот что-то, что сработало для меня. Я привел пример.

<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.

Ответ 11

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

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

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

    return storeId;
}


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

Ответ 12

Вы можете сделать это с помощью document.getElementByID Вот как.

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

Иди сюда! XD