circle all the childNodes

[Kor]

I wanna get all the text nodes of the children of an element. The goal is to get an array with all the textNodes in each cell of a table, without any other nodes that might ocure whithin that cell (<p>, <br> etc...)

I mean if:
<td>12</td>
<td>1<p>23<b>34</b>5</p>6</td>
I need:
var txt = new Array()
txt[0] = '12';
txt[1] = '123456';

Now I had to circle through all the childNodes to extract all the text nodes. I have build a function, but something is wrong in the code, and I don't sense what. I need soime fresh eyes, any ideeas? Where's the mistake?:

<script type="text/javascript">
function checkCell(){
var allC = document.getElementById('tab').getElementsByTagName('td');//cells' collection
var txt = new Array()
for(var i=0;i<allC.length;i++){
txt[i]='';
while(allC[i].hasChildNodes()){
var chC = allC[i].childNodes;
for(var j=0;j<chC.length;j++){
if(chC[j].nodeType==3){
txt[i]+=chC[j].data;
}
}
allC[i]=allC[i].childNodes;
}
}
alert(txt[1])
}
onload=checkCell;
</script>

[Kor]

I sensed that I was wrong
allC[i]=allC[i].childNodes;
is not correct as I replace a variable with a collection

Well, I tried another solution which looks more logical, but no luck agaian :confused:

function checkCell(){
var allC = document.getElementById('tab').getElementsByTagName('td');//cells' collection
var txt = new Array()
for(var i=0;i<allC.length;i++){
txt[i]='';
var chC = allC[i].childNodes;
for(var j=0;j<chC.length;j++){
while(chC[j].hasChildNodes()){
chC[j]=chC[j].firstChild;
}
txt[i]+=chC[j].data;
}
}
alert(txt[1])
}
onload=checkCell;
</script>


Any ideeas?
_____
It looks like

while(obj.hasChildNodes()){
obj = obj.childNodes[0]
}
or
while(obj.hasChildNodes()){
obj = obj.firstChild;
}

is not correct. Why?

[SpirtOfGrandeur]

How about you get all the innerHTML's of each of the TD's and use regex to get rid of the HTML commands? Seems much quicker and less looping in my mind. Which could take valuable seconds off of longer tables...

[dumpfi]

Hmm.. I don't understand this line of code:
allC[i]=allC[i].childNodes;Why do you replace the element with a collection of elements? :confused:

Anyway, this should work for you:

function getCellText(table) {
var cellText = [], i = 0, cells = table.getElementsByTagName("td");
for(; i < cells.length; i++) {
cellText[i] = filterText(cells[i]);
}
return cellText;
}
function filterText(elem) {
if(elem.nodeType == 3) return elem.nodeValue;
var txt = '', i;
for(i = 0; i < elem.childNodes.length; i++) {
txt += filterText(elem.childNodes[i]);
}
return txt;
}
window.onload = function() {
alert(getCellText(document.getElementsByTagName("table")[0]));
}
dumpfi

[Kor]

Hmm.. I don't understand this line of code:
Code:

allC[i]=allC[i].childNodes;

Why do you replace the element with a collection of elements

I have already sensed the error in my second post. I'll try all your solutions, tx to all...

[Harry Armadillo]

Might as well take advantage of DOM tools.function checkCell(){
var allC = document.getElementById('tab').getElementsByTagName('td');//cells' collection
var txt = new Array()
for(var i=0;i<allC.length;i++){
var r=document.createRange();
r.selectNodeContents(allC[i]);
txt[i]=r.toString();
}
alert(txt.join('\n'))
}
Granted, this will fail in IE. But IE makes available its proprietary .innerText property.

[jkd]

Might as well take advantage of DOM tools.function checkCell(){
var allC = document.getElementById('tab').getElementsByTagName('td');//cells' collection
var txt = new Array()
for(var i=0;i<allC.length;i++){
var r=document.createRange();
r.selectNodeContents(allC[i]);
txt[i]=r.toString();
}
alert(txt.join('\n'))
}
Granted, this will fail in IE. But IE makes available its proprietary .innerText property.

The use of the DOM2 Range seems quite unnecessary, especially when Gecko-based browsers support the DOM3 Core's textContent property.

[Harry Armadillo]

textContent! Ugh, I hate it when I can't remember the property I really want and end up hacking around my amnesia.

[DHTML Kitchen]

function collectTextNodes(el) {
var textNodes = [];
var len = 0;
for(var n = el.firstChild; n != null; n = n.nextSibling)
if(n.nodeType == 3)
textNodes[len++] = n;

return textNodes;
}

javascript:void(collectTextNodes = function collectTextNodes(el) { var textNodes = []; var len = 0; for(var n = el.firstChild; n != null; n = n.nextSibling) if(n.nodeType == 3) textNodes[len++] = n; return textNodes;});alert(collectTextNodes(document.getElementById('fontselect')).length);


However, looking at the source code of this page, it seems FF is ignoring some text nodes.

HTH,

Garrett