JavaScript и getElementById для нескольких элементов с одинаковым идентификатором

Ответ 1

спецификация HTML требовала, чтобы атрибут ID был уникальным на странице:

Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документе.

Если у вас несколько элементов с одинаковым идентификатором, ваш HTML недействителен.

Итак, getElementById() должен возвращать только один элемент. Вы не можете заставить его возвращать несколько элементов.

Существует несколько связанных функций, которые возвратят массив элементов - getElementsByName или getElementsByClassName, который может больше соответствовать вашим требованиям, хотя getElementsByClassName является новым для HTML 5, который все еще находится в черновике.

Ответ 2

Почему вы хотели бы сделать это, это вне меня, так как id должен быть уникальным в документе. Тем не менее, браузеры, как правило, довольно слабы в этом, поэтому, если вы действительно должны использовать getElementById для этой цели, вы можете сделать это следующим образом:

function whywouldyoudothis() {
    var n = document.getElementById("non-unique-id");
    var a = [];
    var i;
    while(n) {
        a.push(n);
        n.id = "a-different-id";
        n = document.getElementById("non-unique-id");
    }

    for(i = 0;i < a.length; ++i) {
        a[i].id = "non-unique-id";      
    }
    return a;
}

Однако это глупо, и я бы не стал доверять этому, чтобы он работал на всех браузерах навсегда. Хотя спецификация HTML DOM определяет id как readwrite, проверяющий браузер будет жаловаться, если сталкивается с более чем одним элементом с тем же идентификатором.

РЕДАКТИРОВАТЬ: При наличии действующего документа такой же эффект может быть достигнут таким образом:

function getElementsById(id) {
  return [document.getElementById(id)];
}

Ответ 3

Нельзя иметь несколько элементов с тем же id. id используется как индивидуальный идентификатор. Для групп элементов используйте class и getElementsByClassName.

Ответ 4

Я знаю, что это старый вопрос и что HTML-страница с несколькими идентификаторами недопустима. Тем не менее, я столкнулся с этими проблемами, когда вам нужно соскрести и переформатировать другую документацию API HTML, содержащую дубликаты идентификаторов (недопустимый HTML).

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

var elms = document.querySelectorAll("[id='duplicateID']");

for(var i = 0; i < elms.length; i++) 
  elms[i].style.display='none'; // <-- whatever you need to do here.

Ответ 5

Идентификатор должен быть уникальным, вместо этого используйте атрибут "имя" и "getelementsbyname", и у вас будет свой массив.

Ответ 6

document.querySelectorAll("#yourId"); возвращает все элементы с идентификатором yourId

Ответ 7

Как утверждали другие, вы не должны иметь один и тот же идентификатор более одного раза в своем HTML, однако... элементы с идентификатором прикрепляются к объекту документа и к окну в Internet Explorer. См. Также:

Элементы дерева DOM с идентификаторами становятся глобальными переменными?

Если в вашем HTML существует более одного элемента с тем же идентификатором, это свойство присоединяется как массив. Извините, но я не знаю, где искать, если это стандартное поведение или, по крайней мере, вы получаете такое же поведение между браузерами, что я сомневаюсь.

Ответ 8

Вы не должны этого делать, и даже если это возможно, оно не является надежным и подверженным проблемам.

Причина в том, что идентификатор уникален на странице. то есть вы не можете иметь более одного элемента на странице с тем же идентификатором.

Ответ 9

Класс более чем достаточно для ссылки на все, что вы хотите, потому что он может иметь имя с одним из слов больше:

<input class="special use">
<input class="normal use">
<input class="no use">
<input class="special treatment">
<input class="normal treatment">
<input class="no special treatment">
<input class="use treatment">

что способ применения разных стилей с помощью css (и Bootstrap - лучший пример), и, конечно, вы можете называть

document.getElementsByClassName("special");
document.getElementsByClassName("use");
document.getElementsByClassName("treatment");
document.getElementsByClassName("no");
document.getElementsByClassName("normal");

и т.д. для любой группировки, в которой вы нуждаетесь.

Теперь, в самом последнем случае, вы действительно хотите группировать элементы по id. Вы можете использовать и ссылаться на элементы, используя числовое сходство, но не равное id:

<input id=1>
<input id="+1">
<input id="-1">
<input id="1 ">
<input id=" 1">
<input id="0x1">
<input id="1.">
<input id="1.0">
<input id="01.0">
<input id="001">

Таким образом, вы можете узнать числовой идентификатор, получить доступ и получить элемент, просто добавив лишние недействительные числовые символы и вызывая функцию, чтобы получить (путем разбора и т.д.) исходный индекс из его значения, идентифицирующего правовую строку. Это полезно, если вы:

• Имеют несколько строк с похожими элементами и хотят обрабатывать свои события когерентно. Независимо от того, удаляете ли вы один или почти все из них. Поскольку числовая ссылка все еще присутствует, вы можете повторно использовать их и переназначить его удаленный формат.

• Выполнить идентификаторы классов, имен и тэгов.

Хотя вы можете использовать пробелы и другие общие признаки, даже если это не строгое утверждение в браузерах, не рекомендуется их использовать, особенно если вы собираетесь отправлять эти данные в других форматах, таких как JSON. Вы даже можете справиться с такими вещами с помощью PHP, но это плохая практика, прикрывающая грязные методы программирования.

Ответ 10

мы можем использовать document.forms [0].Controlid

Ответ 11

Если вы используете d3 для обработки нескольких объектов с тем же классом /id

Вы можете удалить подмножество элементов класса, используя d3.selectAll( ". classname" );

Например, график пончика здесь на http://medcorp.co.nz использует копии дугового объекта с именем класса "arc", и есть одна строка d3, d3.selectAll( ". arc" ). remove(); для удаления всех этих объектов;

используя document.getElementById( "arc" ). remove(); удаляет только один элемент и должен быть вызван несколько раз (как и в случае с предложениями выше, он создает цикл для удаления объектов n раз)