Как узнать номер элемента в DOM?

Question

[newaitix]

Я создаю элемент.
Я не назначаю ему ни id ни class, не назначаю ему каких либо опознавательных знаков.
Затем я выбираю все элементы

var elem=document.createElement("div");
//тут я хочу узнать и запомнить какой номер у моего элемента
var all=document.getElementsByTagName('*');
//и выбрать его all[125]

Но для этого мне нужно перебирать все элементы по новой

for(var i=0; i<all.length; i++){
if(all[i]==elem){
console.log('Искомый элемент найден под номером '+i);
break;
}
}

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

Comments

[newaitix]

Я попытаюсь объяснить. Я навешиваю событие на элемент вот таким образом document.getElementById('middle').onclick
Но я хочу выполнить при клике на этот элемент несколько функций.
Для этого я сознаю объект

var allevent={
'#middle':[function(){},function(){},function(){},function(){}]
};
//и затем делаю так
document.getElementById('middle').onclick=function(){
for(var i=0; i<allevent['#middle'].length; i++)
allevent['#middle'][i]();
};

Зачем? ведь есть addEventListener?
Потому что я так хочу сделать
Так вот когда я в allevent добавляю идентификатор или класс элемента как мне быть в случае если элемент будит без опознавательных знаков?
<div></div>
Как мне назвать свойство в ollevent объекте?

[Виталий Инчин ☢]

Покажите пример разметки. Я отвечу примером получения элемента.

[newaitix]

В смысле пример разметки?

[Виталий Инчин ☢]

newaitix: ...в общем, почитайте: learn.javascript.ru/traversing-dom

[newaitix]

да мне нужен универсальный вариант конечно если я всегда буду знать где его найти то так можно
а затем на другой странице это будит другой вариант
html
head
/head
body
box
blank
div
вот этот div
/div
/blank
/box
/body
/html

[Виталий Инчин ☢]

newaitix: blank.children[0]

Answer 1

[Stalker_RED]

function getElementIndex(elem) {
    elem = elem.tagName ? elem : document.querySelector(elem) // можно добавить еще проверок
    return [].indexOf.call(elem.parentNode.children, elem)
}

Демо jsfiddle.net/ywfoheah

Comments

[s-morello]

Можешь расшифровать что как он работет ?

[Stalker_RED]

Это бредятина, которую я не рекомендую использовать, если ты не сошел с ума.
Она (вроде как) подходит под описание автора вопроса, хотя это и не точно.

Впрочем, если хочешь разобраться как -
просто почитай описание indexOf

function getElementIndex(elem) {
    // если передан элемент, он и ищется. 
    elem = elem.tagName ? elem 
      // или попытка использовать переданный параметр как селектор
       : document.querySelector(elem)

    // elem.parentNode - общий родитель этого элемента
    // .children - все его дочерние элементы 
    // ну и собственно indexOf, который вертнет индекс.
    return [].indexOf.call(elem.parentNode.children, elem)
}

Но если с ума не сходить, то лучше просто сохранить ссылку на элемент.

Answer 2

[Виталий Инчин ☢]

• getElementsBy... это живая выборка и она включает в себя только те элементы, которые добавлены в DOM.
  
• Что за бред?
  
• Нету тега *.
  
• Что за бред?
  
• Покажите полный код или опишите задачу целиком.
  
• Что за бред?
  

Comments

[newaitix]

Я уже понял что не выйдет это сделать таким образом так как элемент меняет свой номер. Код вам ничего не даст слишком много его строк 200 придется выкладывать. Идея заключается в том чтоб навесить событие на элемент после отгрузки DOM. Но нужно как то сослаться на него. Нужно иметь ссылку на него чтоб потом это сделать. Должны быть варианты кроме как хранить этот элемент в переменной.

[Виталий Инчин ☢]

newaitix: храните элементы в массиве.

[newaitix]

Я попытаюсь объяснить. Я навешиваю событие на элемент вот таким образом document.getElementById('middle').onclick
Но я хочу выполнить при клике на этот элемент несколько функций.
Для этого я сознаю объект
var allevent={
'#middle':[function(){},function(){},function(){},function(){}]
}
//и затем делаю так
document.getElementById('middle').onclick=function(){
for(var i=0; i

[newaitix]

Ниже в ответ написал тут почему то не выкладывается

[Stalker_RED]

newaitix: вместо onclick и кучи велосипедов используйте addeventListener и добавляйте сколько угодно обработчиков.

[Виталий Инчин ☢]

Stalker_RED: у ТС кровная вражда с aEL:

Зачем? ведь есть addEventListener?
Потому что я так хочу сделать

[Stalker_RED]

Виталий Инчин ☢: да, я уже прочитал ниже.
Всё равно непонятные движения какие-то. Почему тогда не привязывать список ф-ций к самому элементу, например?