Develop Reference

Make a div appear when clicking a link [duplicate]

The NodeList don't have a indexOf(element) method? So, how can I get the element index?

You can use Array.prototype.indexOf.call() like this
let nodes = document.getElementsByTagName('*');
Array.prototype.indexOf.call(nodes, document.body);

The NodeList object is an Array-like object. So it's possible to "convert" it into an Array using Array.prototype.slice.call()
var arr = Array.prototype.slice.call(yourNodeListObject); // Now it's an Array.
arr.indexOf(element); // The index of your element :)
On browsers that support ES6 you can also do this with Array.from()
const arr = Array.from(yourNodeListObject);
or using the spread operator ...
const arr = [...yourNodeListObject];

By iterating over the elements, and checking if it matches.
Generic code that finds the index of the element within it's parents childNodes collection.
function index(el) {
var children = el.parentNode.childNodes,
i = 0;
for (; i < children.length; i++) {
if (children[i] == el) {
return i;
}
}
return -1;
}
Usage:
// should return 4
var idx = index(document.body.childNodes[4]);
EDIT: I can't delete an accepted answer, but #kennebec's answer below is much better, which I'll quote verbatim:
You can use Array.prototype.indexOf.call() like this
let nodes = document.getElementsByTagName('*');
Array.prototype.indexOf.call(nodes, document.body);

Just add one line in your script:
NodeList.prototype.indexOf = Array.prototype.indexOf; // for IE11
Then use indexOf as usual:
var index = NodeList.indexOf(NodeElement);

Let us say you have the following line:
const list=document.querySelectAll('.some_class .someother_class');
list will be a nodelist.
So we can convert the nodelist to an array and create a new array of indexes as follows:
const indexArr= [...list].map( element => return [...list].indexOf(element) );
indexArr contains all the indexes of elements in the original list.

Loop through childNodes

I'm trying to loop through childNodes like this:
var children = element.childNodes;
children.forEach(function(item){
console.log(item);
});
However, it output Uncaught TypeError: undefined is not a function due to forEach function. I also try to use children instead of childNodes but nothing changed.
Does anybody know what's going on?

The variable children is a NodeList instance and NodeLists are not true Array and therefore they do not inherit the forEach method.
Also some browsers actually support it nodeList.forEach
ES5
You can use slice from Array to convert the NodeList into a proper Array.
var array = Array.prototype.slice.call(children);
You could also simply use call to invoke forEach and pass it the NodeList as context.
[].forEach.call(children, function(child) {});
ES6
You can use the from method to convert your NodeList into an Array.
var array = Array.from(children);
Or you can also use the spread syntax ... like so
let array = [ ...children ];
A hack that can be used is NodeList.prototype.forEach = Array.prototype.forEach and you can then use forEach with any NodeList without having to convert them each time.
NodeList.prototype.forEach = Array.prototype.forEach
var children = element.childNodes;
children.forEach(function(item){
console.log(item);
});
See A comprehensive dive into NodeLists, Arrays, converting NodeLists and understanding the DOM for a good explanation and other ways to do it.

I'm very late to the party, but since element.lastChild.nextSibling === null, the following seems like the most straightforward option to me:
for(var child=element.firstChild; child!==null; child=child.nextSibling) {
console.log(child);
}

Here is how you can do it with for-in loop.
var children = element.childNodes;
for(var child in children){
console.log(children[child]);
}

const results = Array.from(myNodeList.values()).map(parser_item);
NodeList is not Array
but NodeList.values() return a Array Iterator, so can convert it to Array.

Couldn't resist to add another method, using childElementCount. It returns the number of child element nodes from a given parent, so you can loop over it.
for(var i=0, len = parent.childElementCount ; i < len; ++i){
... do something with parent.children[i]
}

Try with for loop. It gives error in forEach because it is a collection of nodes nodelist.
Or this should convert node-list to array
function toArray(obj) {
var array = [];
for (var i = 0; i < obj.length; i++) {
array[i] = obj[i];
}
return array;
}
Or you can use this
var array = Array.prototype.slice.call(obj);

Here is a functional ES6 way of iterating over a NodeList. This method uses the Array's forEach like so:
Array.prototype.forEach.call(element.childNodes, f)
Where f is the iterator function that receives a child nodes as it's first parameter and the index as the second.
If you need to iterate over NodeLists more than once you could create a small functional utility method out of this:
const forEach = f => x => Array.prototype.forEach.call(x, f);
// For example, to log all child nodes
forEach((item) => { console.log(item); })(element.childNodes)
// The functional forEach is handy as you can easily created curried functions
const logChildren = forEach((childNode) => { console.log(childNode); })
logChildren(elementA.childNodes)
logChildren(elementB.childNodes)
(You can do the same trick for map() and other Array functions.)

Try this [reverse order traversal]:
var childs = document.getElementById('parent').childNodes;
var len = childs.length;
if(len --) do {
console.log('node: ', childs[len]);
} while(len --);
OR [in order traversal]
var childs = document.getElementById('parent').childNodes;
var len = childs.length, i = -1;
if(++i < len) do {
console.log('node: ', childs[i]);
} while(++i < len);

If you do a lot of this sort of thing then it might be worth defining the function for yourself.
if (typeof NodeList.prototype.forEach == "undefined"){
NodeList.prototype.forEach = function (cb){
for (var i=0; i < this.length; i++) {
var node = this[i];
cb( node, i );
}
};
}

for (var i = 0; i < e.childNodes.length; i++) {
var id = e.childNodes[i].id;
}

which approach is best to search object in array?

I've sorted following ways to search for an object in array.
This question has been asked like countless times but I want to know which of the best from following ways. If there's another I'd like to know that too.
Using $.grep()
function is_in_array(arr,element){
var result = $.grep(arr, function(e){ return e.id == element; });
return result.length;
}
Above function returns length of array.
0 when element not present
1 when element present
length > 1 if more elements with same value present
using lookup object
var lookup = {};
for (var i = 0, len = array.length; i < len; i++) {
lookup[array[i].id] = array[i];
}
This way I don't need to traverse entire array each time. I'd just check for lookup[id] instead.
for loop in traditional way
function in_array(array, id) {
for(var i=0;i<array.length;i++) {
if(array[i].id === id) {
return true;
}
}
return false;
}
to check if element exists, i'd call in_array(arr,element).
Which approach is best ? Question seriously sounds duplicate and it is but I just want to make sure which is best from these three only.
Update
Array will contain objects like --
var arr = [];
var nameObj = {};
nameObj.label = "somename";
nameObj.id = 123;
arr.push(nameObj);
.
.
.

You could also use a combination of JSON (for comparison) and the Array.filter method:
var findvalue = JSON.stringify([somevalue]),
,found = [array].filter(
function(a){return JSON.stringify(a) === findvalue;}).length
;
// found > 0 means: findvalue found
A jsfiddle example
More about Array.filter and a shim for older browsers #MDN

You could use the built-in map() method instead of a loop:
var lookup=array.map(function(e){return e.id;});
(Not supported in IE 8)

accessing elements in a list in javascript html

I have a list - [getFamilyPkg, getActivePkg, getEligiblePkg, getActivePkgForDeactivation], want to get each element in this list in a javascript function.
How to do it? Thanks in advance.

Assume list is stored in a variable called arr.
for (var i = 0; i < arr.length; i++) {
var elem = arr[i];
// elem is either getFamilyPkg, or getActivePkg, or ...
}

Tommy's answer is actually incorrect. for (var i in arr) loops over all attributes/properties of the arr object prototype, which includes builtin functions like slice(), etc. See jsfiddle example here: http://jsfiddle.net/sEtMw/ (check the console and you will see a bunch of extra properties other than the array elements.
There are a few approaches (once again assuming the array is named arr):
var elem;
for (var i = 0, len = arr.length; i < len; i++) {
elem = arr[i];
// elem is actually one of the array elements here
}
Another option is as follows:
var elem;
while (elem = arr.shift()) {
// elem is one of the array elements
}
Please note that the second approach does not keep the array intact. i.e. at the end of the loop, the array will be empty. But if you are okay with that, the syntax is definitely cleaner. Both approaches are illustrated here: http://jsfiddle.net/z7zKK/. The variable arr is logged at the end to illustrate that it is empty.

How to get the index of the element in javascript?

The NodeList don't have a indexOf(element) method? So, how can I get the element index?

You can use Array.prototype.indexOf.call() like this
let nodes = document.getElementsByTagName('*');
Array.prototype.indexOf.call(nodes, document.body);

The NodeList object is an Array-like object. So it's possible to "convert" it into an Array using Array.prototype.slice.call()
var arr = Array.prototype.slice.call(yourNodeListObject); // Now it's an Array.
arr.indexOf(element); // The index of your element :)
On browsers that support ES6 you can also do this with Array.from()
const arr = Array.from(yourNodeListObject);
or using the spread operator ...
const arr = [...yourNodeListObject];

By iterating over the elements, and checking if it matches.
Generic code that finds the index of the element within it's parents childNodes collection.
function index(el) {
var children = el.parentNode.childNodes,
i = 0;
for (; i < children.length; i++) {
if (children[i] == el) {
return i;
}
}
return -1;
}
Usage:
// should return 4
var idx = index(document.body.childNodes[4]);
EDIT: I can't delete an accepted answer, but #kennebec's answer below is much better, which I'll quote verbatim:
You can use Array.prototype.indexOf.call() like this
let nodes = document.getElementsByTagName('*');
Array.prototype.indexOf.call(nodes, document.body);

Just add one line in your script:
NodeList.prototype.indexOf = Array.prototype.indexOf; // for IE11
Then use indexOf as usual:
var index = NodeList.indexOf(NodeElement);

Let us say you have the following line:
const list=document.querySelectAll('.some_class .someother_class');
list will be a nodelist.
So we can convert the nodelist to an array and create a new array of indexes as follows:
const indexArr= [...list].map( element => return [...list].indexOf(element) );
indexArr contains all the indexes of elements in the original list.