Thursday, June 08, 2006

JavaScript - Concatenating NodeLists

In JavaScript, you cannot concatenate two nodeLists using Array.concat(). This is because nodeLists are not true Arrays, they are more like Objects that happen to have a length property. Here's an example scenario:

var pElements = document.body.getElementsByTagName("p");
var divElements = document.body.getElementsByTagName("div");

// This results in a new array where the last element is the entire
divElements nodeList
var pAndDivElements = pElements.concat(divElements);

As a workaround, I wrote a quick method that will join two nodelists:

joinNodeLists: function(list1,list2){
var i = list2.length - 1;

do{ list1[list1.length] = list2[i];

}
while(i--);

return list1;
}


Note that I use list1[list1.length] = list2[i] instead of list1.push(list2[i]). This is for compatibility with IE 5.

To Do: Make a function that accepts an unlimited number of nodeLists and joins them all.

Was this post helpful to you? If so, please consider making a small donation to keep this blog going.

10 Comments:

Anonymous Anonymous said...

Thanks for the function ... exactly what I needed.

12:26 PM  
Anonymous Anonymous said...

Hmmm, Thanks very much; works just like it says on the tin. However why cant I inline the code?

i=doc.getElementsByTagName("input");
t=doc.getElementsByTagName("textarea");
var ie=i.length -1;
do { t[t.length]=i[ie]; } while (ie--);
alert(t.length);

I only need the routine once and it seemed simple enough to inline. But it does not work. Why not?

Rgds Fergus

2:02 PM  
Blogger Rebecca said...

Um, have you checked to make sure this actually works? NodeLists are readonly, so what I found when I ran your function was that the length of the nodelist wouldn't update on subsequent loop iterations, meaning new items clobbered previous ones. I solved this by declaring an array and pushing the items onto that. Unlike the nodelist, the array length will update as you add new elements. I also wrote a version that accepts an indefinite number of nodelist arguments:


function joinNodeLists() {

if (!arguments.length) {
return;
}

var newList = [];
for (var i = 0; i < arguments.length; i++) {
var list = arguments[i];
for (var j = 0; j < list.length; j++) {
// Don't use push() for IE 5 compatibility
// newList.push(list[j]);
newList[newList.length] = list[j];
}
}

return newList;
}

2:02 PM  
Blogger tom said...

Interesting - what browser(s) are you testing in? (To answer your first question: yes, I do test my code :P ) I wonder if what you're seeing has anything to do with the problems anonymous had when he tried to take the code out of the context of a function.

2:11 PM  
Blogger Rebecca said...

I only tested this in Firefox and found it didn't work. Using Firebug's debugger I could see the failure of the nodelist's length property to update as items were concatenated.

10:24 AM  
Blogger Rebecca said...

I retract my remarks. It turns out the error was my code that called joinNodeLists. Sorry about that. So to handle an indefinite number of nodeList arguments, you can just have:

function joinNodeLists(){

if (!arguments.length) {
return null;
}
var newList = arguments[0];
for (var i = 1; i < arguments.length; i++) {
var list = arguments[i];
for (var j = 0; j < list.length; j++) {
// Don't use push() for IE 5 // compatibility
newList.push(list[j]);
newList[newList.length] = list[j];
}
}

return newList;
}

8:41 AM  
Blogger tom said...

Hi Rebecca,

Glad you got it sorted out. Looking at your code, it seems there's a comment missing:

// Don't use push() for IE 5 // compatibility
newList.push(list[j]);
newList[newList.length] = list[j];

Shouldn't the newList.push(list[j]) line be commented out?

9:37 AM  
Anonymous Mike said...

It didn't work in firefox. This does:

function joinNodeLists(){

if (!arguments.length) {
return null;
}
var newList = new Array();
for (var i = 0; i < arguments.length; i++) {
var list = arguments[i];
for (var j = 0; j < list.length; j++) {
// Don't use push() for IE 5 // compatibility

newList[newList.length] = list[j];

}
}

return newList;
}

3:09 PM  
Anonymous Anonymous said...

情趣用品,情趣用品,情趣用品,情趣用品,情趣,情趣,情趣,情趣,按摩棒,震動按摩棒,微調按摩棒,情趣按摩棒,逼真按摩棒,G點,跳蛋,跳蛋,跳蛋,性感內衣,飛機杯,充氣娃娃,情趣娃娃,角色扮演,性感睡衣,SM,潤滑液,威而柔,香水,精油,芳香精油,自慰套,自慰,性感吊帶襪,吊帶襪,情趣用品加盟AIO交友愛情館,情人歡愉用品,美女視訊,情色交友,視訊交友,辣妹視訊,美女交友,嘟嘟成人網,成人網站,A片,A片下載,免費A片,免費A片下載愛情公寓,情色,舊情人,情色貼圖,情色文學,情色交友,色情聊天室,色情小說,一葉情貼圖片區,情色小說,色情,色情遊戲,情色視訊,情色電影,aio交友愛情館,色情a片,一夜情,辣妹視訊,視訊聊天室,免費視訊聊天,免費視訊,視訊,視訊美女,美女視訊,視訊交友,視訊聊天,免費視訊聊天室,情人視訊網,影音視訊聊天室,視訊交友90739,成人影片,成人交友,美女交友,微風成人,嘟嘟成人網,成人貼圖,成人電影,A片,豆豆聊天室,聊天室,UT聊天室,尋夢園聊天室,男同志聊天室,UT男同志聊天室,聊天室尋夢園,080聊天室,080苗栗人聊天室,6K聊天室,女同志聊天室,小高聊天室,上班族聊天室,080中部人聊天室,同志聊天室,聊天室交友,中部人聊天室,成人聊天室,一夜情聊天室,情色聊天室,寄情築園小遊戲情境坊歡愉用品,情趣用品,成人網站,情人節禮物,情人節,AIO交友愛情館,情色,情色貼圖,情色文學,情色交友,色情聊天室,色情小說,七夕情人節,色情,情色電影,色情網站,辣妹視訊,視訊聊天室,情色視訊,免費視訊聊天,美女視訊,視訊美女,美女交友,美女,情色交友,成人交友,自拍,本土自拍,情人視訊網,視訊交友90739,生日禮物,情色論壇,正妹牆,免費A片下載,AV女優,成人影片,色情A片,成人論壇,情趣,免費成人影片,成人電影,成人影城,愛情公寓,成人影片,保險套,舊情人,微風成人,成人,成人遊戲,成人光碟,色情遊戲,跳蛋,按摩棒,一夜情,男同志聊天室,肛交,口交,性交,援交,免費視訊交友,視訊交友,一葉情貼圖片區,性愛,視訊,視訊聊天,A片,A片下載,免費A片,嘟嘟成人網,寄情築園小遊戲,女同志聊天室,免費視訊聊天室,一夜情聊天室,聊天室

10:29 AM  
Blogger as said...

I like your blog. Thank you. They are really great . Ermunterung ++ .
Some new style Puma Speed is in fashion this year.
chaussure puma is Puma shoes in french . Many Franzose like seach “chaussure sport” by the internet when they need buy the Puma Shoes Or nike max shoes. The information age is really convenient .




By the way ,the nike max ltd is really good NIKE air shoes ,don’t forget buy the puma mens shoes and nike air max ltd by the internet when you need them . Do you know Nike Air Shoes is a best Air Shoes . another kinds of Nike shoes is better . For example , Nike Air Rift is good and Cheap Nike Shoes .the nike shox shoes is fitting to running.



Spring is coming, Do you think this season is not for Ugg Boots? maybe yes .but this season is best time that can buy the cheap ugg boots. Many sellers are selling discounted. Do not miss . Please view my fc2 blog and hair straighteners blog.
.thank you .


I like orange converse shoes ,I like to buy the cheap converse shoes by the internet shop . the puma shoes and the adidas shoes (or addidas shoes) are more on internet shop .i can buy the cheap nike shoes and cheap puma shoes online. It’s really convenient.
Many persons more like Puma basket shoes than nike air rift shoes . the Puma Cat shoes is a kind of Cheap Puma Shoes .
If you want to buy the Cheap Nike Air shoes ,you can buy them online. They are same as the Nike Air shoes authorized shop. Very high-caliber Air shoes and puma cat shoes . the cheap puma shoes as same as other.




polo shirts

ralph lauren polo shirts
chaussure puma

chaussure sport



chaussures puma

puma CAT

ed hardy clothing

ed hardy clothes



ed hardy womens

ed hardy sunglasses

ugg boots

cheap ugg boots

1:39 AM  

Post a Comment

Links to this post:

Create a Link

<< Home