Корректно ли делать навигацию по DOM через индекс элементов?

Question

[Spaceoddity]

Грубо говоря:

var el = document.getElementsByClassName(className);
el[1].onclick = function() {
	/*  */
}

Т.е. перебор html-коллекции всегда идёт по порядку html-структуры?

Answer 1

[Максим Ткачев]

наверное так все-таки лучше. Вы же не всегда знаете сколько у вас элементов с данным классом на странице

var els = document.getElementsByClassName(className);
els .forEach(function (el, index) {
el.addEventListener('click',(e)=>{
console.log('click')
})

Comments

[Spaceoddity]

В том-то и дело что знаю))
Дублируется некий функционал. Не копипастить же код под getElementById.
Хочу обращаться по классу, а различать выборку элементов через их порядковый номер в коде.
Вот живой пример:

arr.forEach(function(e, t, n) {
	Object.keys(els).forEach(function (key) {
		var c = document.createElement("option");
		c.innerHTML = e.name,
		c.value = e.k,
		els[key].appendChild(c)
	})
})

[Максим Ткачев]

Что вы хотите сэкономить?
Избегая привязки к индексу вы можете всегда увеличить или уменьшить кол-во элементов. а что если придется удалить элемент?,
Одним словом ваш вопрос был о том стоит ли так делать - если вы точно знаете ЗАЧЕМ - то значит стоит. если просто так, то это в будущем может привести к проблемам

[Максим Ткачев]

еще дополню, если вы хотите обратится только к какому-то определенному элементу из коллекции - то лучше использовать дополнительный атрибут. к примеру data-ajax=true

var els = document.getElementsByClassName(className);
els .forEach(function (el, index) {

if(el.dataset.ajax==true){
el.addEventListener('click',(e)=>{
console.log('click')
}
})

[Spaceoddity]

Всё не так просто.
Во-первых, нужен "ванильный" ES5 (привет кроссбраузерность).
А обращение к определенному элементу из коллекции по индексу надо потому, что через этот элемент получаем значения других элементов, которые динамически генерируется через тот же самый индекс.

На пальцах: на странице есть пара калькуляторов, в них селекты, в селектах <option> генерируются через JS из массива данных. По клику на кнопку калькулятора - надо считать значения селектов и произвести некие манипуляции над ними. Поскольку селекты я генерирую через классы (для уменьшения объёма кода), то и обратиться я к ним могу только через классы и индекс коллекции. Что-то типа:

cacl1Btn.onclick = function() {
	calculateSelectbox(0);
},
cacl2Btn.onclick = function() {
	calculateSelectbox(1);
}

var selectItem = document.getElementsByClassName("calc-item");

function calculateSelectbox(index) {
	var result = selectItem[index].value;
/* ... */
}

Понятно что тут можно гораздо оптимальнее и проще написать, но опять же - кроссбраузерность. Поэтому многое идёт лесом. Оно возможно и совместимо будет по итогу, но я просто не хочу тратить время на тестирование и выяснение. Поэтому постарался максимально "топорно" сделать.

UPD: Единственное что думаю оптимизировать - это индекс на обработчике нажатия кнопок не вручную проставлять, а написать функцию, которая будет возвращать индекс кнопки из своей коллекции. Так сказать заложиться на добавление ещё копий калькуляторов.

[Максим Ткачев]

Стало понятно что ничего не понятно :) Изначально казалось вопрос новичка... Из своего опыта, я делал как то обращения по индексу к элементам таблицы - так вот когда через какое-то время пришлось менять очередность столбцов - то простая задача поменять верстку на полчаса -вылилась гемороем на 2 дня. Поэтому зарекся обращаться по индексам. Если точно нет никакой возможности добавить атрибуты - то конечно можно и по индексам. Недавно в другом проекте менял табличную верстку на flex, так тоже намучался с js и поиском а что же это за элемент у нас в третьей строке четвертом столбце и пришлось фактически весь код перелопатить