How i can read index from element? example:
I have code:
<div class="a"> <span id="el">Yeah!</span> <span class="span">1</span> <span class="span">2MANO</span> </div> and javascript: var mySpan = document.getElementsByTagName("span")[0]; // it span id="el" its ok,
but how i can read from this span index of this element
var span= document.getElementById("el"); // i should get index 0 but i cant do that You've said you mean its position within its parent: To do that, count how many times previousSibling or previousElementSibling (depending on whether you want to count other kinds of nodes or just Elements) is not null:
Counting all node types:
function getIndex(node) { var index = 0; while (node.previousSibling) { node = node.previousSibling; ++index; } return index; } console.log(getIndex(document.getElementById("el"))); // 0 console.log(getIndex(document.getElementById("el2"))); // 5, counts text nodes<div class="a"> <span id="el">Yeah!</span> <span class="span">1</span> <span class="span" id="el2">2MANO</span> </div>Counting only elements:
function getElementIndex(node) { var index = 0; while (node.previousElementSibling) { node = node.previousElementSibling; ++index; } return index; } console.log(getElementIndex(document.getElementById("el"))); // 0 console.log(getElementIndex(document.getElementById("el2"))); // 2, counts only elements<div class="a"> <span id="el">Yeah!</span> <span class="span">1</span> <span class="span" id="el2">2MANO</span> </div>You wouldn't be able to if you are getting the element by getElementById. You would need to reference the parent and get the index of it via the parents children:
var nodes = Array.prototype.slice.call( document.getElementsByClassName('a')[0].children ); var span = document.getElementById('el'); var index = nodes.indexOf(span); console.log(index); // 0 var span = document.getElementById('el2'); var index = nodes.indexOf(span); console.log(index); // 1<div class="a"> <span id="el">Yeah!</span> <span id="el2">Yeah!</span> </div>
Array.from and Array#indexOf... :-) (But managing complexity with abstractions is a Good Thing™, so :-) )You can look at parent node and it's children (using ES6 syntax):
const span = document.getElementById("el"); const idx = [...span.parentNode.children].findIndex(n => n === span); Here is alternative in ES5:
idx = Array.prototype.slice.call(span.parentNode.children) .reduce(function(result, node, i) { return node === span ? i : result; }, -1); 
spans in the document? Something else entirely?var mySpans = [].slice.call(document.getElementsByTagName("span")); var index = mySpans.indexOf(document.getElementById("el"))