Повторные идентификаторы в HTML-документе. Насколько плоха идея, если они ограничены элементом div с уникальным идентификатором?

Question

У меня есть веб-страница, которая показывает один предмет для продажи с кнопкой добавления в корзину. Страница использует много javascript, чтобы позволить пользователю настроить элемент. Теперь мне нужно изменить страницу, чтобы отображать несколько похожих элементов на одной странице, каждый дополнительный элемент также настраивается таким же образом пользователем. Javascript интенсивно использует идентификаторы в разметке для поиска элементов и манипулирования ими для обеспечения настройки элементов на стороне клиента.

Моя первая мысль - позволить html-разметке повторяться для каждого элемента, также позволяя идентификаторам повторяться, но добавляя дополнительный div с уникальным идентификатором вокруг разметки каждого элемента, чтобы отделить область повторяющихся идентификаторов, делая повторяющиеся идентификаторы. Идентификатор уникален в пределах содержащего div. Это должно позволить javascript оставаться относительно неизменным, за исключением того, что любые ссылки на повторяющиеся идентификаторы должны быть ограничены для конкретного идентификатора DIV ID

Имея в виду, что я хочу, чтобы результат был кроссбраузерно-совместимым, IE6 -IE9, Firefox 3+, Chrome, Safari, Opera, насколько разумно звучит этот подход? Будут ли некоторые браузеры запрещать повторяющиеся идентификаторы или будут вести себя плохо с ними? Любой совет относительно лучшего подхода или вещей, на которые я должен обратить внимание, будет очень приветствоваться. Спасибо

----------------- добавление ----------------------------- -----------------------------------

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

Классовый подход, казалось, был лучшим путем, чтобы извлечь из полученных советов, но теперь похоже, что старые браузеры не будут его поддерживать, особенно IE6 и 7. Любой совет о том, как двигаться дальше?

----------------- добавление ----------------------------- -----------------------------------

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

Спасибо за все ваши советы.

Answer 1

Не используйте идентификаторы повторно.Когда-либо.Это приводит к очень неожиданному поведению.Если вам нужно повторно использовать маркеры, используйте вместо этого классы.

Если у вас следующий синтаксис

<div id="container1"><span id="a"></span></div>
<div id="container2"><span id="a"></span></div>

Что вы ожидаете от document.getElementById('a')?

Вместо этого используйте:

<div id="container1"><span class="a"></span></div>
<div id="container2"><span class="a"></span></div>

Затем вы можете получить к ним доступ через.

document.getElementsByClassName('a') 

Answer 2

Начиная с спецификации HTML 4.01 от 24 декабря 1999 г., недопустимо, если атрибут id имеет повторяющееся значение.

Вы должны использовать класс, на который ссылаются здесь:

http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

Answer 3

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

Answer 4

Для такого рода вещей я обычно перебираю childNodes или использую getElementsByTagName с найденным элементом.

<div id="div_with_id">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>


<script>

    var div = document.getElementById("div_with_id");
    var cNodes = div.getElementsByTagName("div");

    for(var i = 0, l = cNodes.length; i < l; i++) {
        console.log(cNodes[i].innerHTML);
    }

</script>

Я использую getElementById только тогда, когда это необходимо, что, оказывается, не так часто;)

Помните: getElementsByTagName получает все элементы типа, включая элементы внутри элементов. childNodes получает только верхний уровень, но получает все в элементе, включая текстовые узлы.