[IE vs Gecko & DOM] Getting text from a <div> in a <tr>

[F. Da Costa]

Hi,

I' looking to retrieve ProdName1 form the <tr> below.

<tr id="1-1-1" class="even">
<td>
<div class="tier4">
<a href="#" class="leaf"></a>
ProdName1
</div>
</td>
<td><input type="checkbox" name="checkbox$2" checked="1" onClick="setCheckbox(this);"/></td>
<td><input type="text" name="text2Edit$2" value="100" align="right"/></td>
</tr>

In Gecko it works as follows.
var vals = r.getElementsByTagName("div");
obj = vals[0];
_searchValues[_searchValues.length]=obj.textContent;

obj.textContent retrieves ProdName1 without any problem in *Gecko*

Obviously I also need to do this with IE and obviously the above does *not* work.
Does anybody has a suggestion as to how this can be accomplished using IE?

TIA,
Fermin DCG

[Andy Leighton]

On Fri, 12 Dec 2003 10:04:57 +0100, F. Da Costa <da*****@xs4all.nl> wrote:

Hi,

I' looking to retrieve ProdName1 form the <tr> below.

<tr id="1-1-1" class="even">
<td>
<div class="tier4">
<a href="#" class="leaf"></a>
ProdName1
</div>
</td>
<td><input type="checkbox" name="checkbox$2" checked="1" onClick="setCheckbox(this);"/></td>
<td><input type="text" name="text2Edit$2" value="100" align="right"/></td>
</tr>

In Gecko it works as follows.
var vals = r.getElementsByTagName("div");
obj = vals[0];
_searchValues[_searchValues.length]=obj.textContent;

obj.textContent retrieves ProdName1 without any problem in *Gecko*

Well you could get the tr element using getElementById and then walking
down the tree IF you can guarantee that structure. Myself I might well
put an id on the <div> and doing a getElementById on that.

--
Andy Leighton => an***@azaal.plus.com
"The Lord is my shepherd, but we still lost the sheep dog trials"
- Robert Rankin, _They Came And Ate Us_

[F. Da Costa]

Andy Leighton wrote:

On Fri, 12 Dec 2003 10:04:57 +0100, F. Da Costa <da*****@xs4all.nl> wrote:

Hi,

I' looking to retrieve ProdName1 form the <tr> below.

<tr id="1-1-1" class="even">
<td>
<div class="tier4">
<a href="#" class="leaf"></a>
ProdName1
</div>
</td>
<td><input type="checkbox" name="checkbox$2" checked="1" onClick="setCheckbox(this);"/></td>
<td><input type="text" name="text2Edit$2" value="100" align="right"/></td>
</tr>

In Gecko it works as follows.
var vals = r.getElementsByTagName("div");
obj = vals[0];
_searchValues[_searchValues.length]=obj.textContent;

obj.textContent retrieves ProdName1 without any problem in *Gecko*

Well you could get the tr element using getElementById and then walking
down the tree IF you can guarantee that structure. Myself I might well
put an id on the <div> and doing a getElementById on that.

obj already contains the <div> so that is not the problem.
The trick lies in getting hold of the text *without* the <a> coming along (like in using childNodes[0])
Even IE 6 gives me an undefined whilst trying to get to 'textContent'

[F. Da Costa]

F. Da Costa wrote:

Hi,

I' looking to retrieve ProdName1 form the <tr> below.

<tr id="1-1-1" class="even">
<td>
<div class="tier4">
<a href="#" class="leaf"></a>
ProdName1
</div>
</td>
<td><input type="checkbox" name="checkbox$2" checked="1"
onClick="setCheckbox(this);"/></td>
<td><input type="text" name="text2Edit$2" value="100"
align="right"/></td>
</tr>
Changed the HTML to
<tr id="1-1-2" class="odd"> <td>
<div class="tier4"> <a href="#" class="leaf">ProdName136</a>
TProdName136
</div> </td>
<td><input type="checkbox" name="checkbox$3" onClick="setCheckbox(this);"/></td>
<td><input type="text" name="text2Edit$3" value="" align="right"/></td>
</tr>
In Gecko it works as follows.
var vals = r.getElementsByTagName("div");
obj = vals[0];
_searchValues[_searchValues.length]=obj.textContent;
Changed the js to
vals = r.getElementsByTagName("div");
// Since there could be an <a> and a normal text in the <div> get them both
// The last childNode contains the 'normal' text
div = vals[0];
_searchValues[_searchValues.length]=div.childNodes[div.childNodes.length-1].nodeValue;
obj = r.getElementsByTagName("a")[0];
_searchValues[_searchValues.length]=obj.nodeValue;
obj.textContent retrieves ProdName1 without any problem in *Gecko*

Obviously I also need to do this with IE and obviously the above does
*not* work.
Does anybody has a suggestion as to how this can be accomplished using IE?

TIA,
Fermin DCG

[Lasse Reichstein Nielsen]

"F. Da Costa" <da*****@xs4all.nl> writes:

obj already contains the <div> so that is not the problem.
The trick lies in getting hold of the text *without* the <a> coming along (like in using childNodes[0])
Addressing child nodes by fixed offset numbers should be
avoided. Elements won't have the same offset in different browsers (IE
doesn't include all-whitespace text nodes in the DOM tree, Mozilla does).
Even IE 6 gives me an undefined whilst trying to get to 'textContent'

The property "textContent" is part of the comming W3C DOM 3
specification, which very few browsers support (IE still struggles
with, e.g., DOM 2 Events). It might be equivalent to the IE property
"innerText", but that won't help you in other browsers. This should work
in any W3C DOM compliant browser:

function getTextContent(node) {
if (node.nodeType == 3) {return node.nodeValue;} // text node
if (node.nodeType == 1) { // element node
var text = [];
for (var chld = node.firstChild;chld;chld=chld.nextSibling) {
text.push(getTextContent(chld));
}
return text.join("");
}
return ""; // some other node, won't contain text nodes.
}

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[F. Da Costa]

Lasse Reichstein Nielsen wrote:

"F. Da Costa" <da*****@xs4all.nl> writes:

obj already contains the <div> so that is not the problem.
The trick lies in getting hold of the text *without* the <a> coming along (like in using childNodes[0])

Addressing child nodes by fixed offset numbers should be
avoided. Elements won't have the same offset in different browsers (IE
doesn't include all-whitespace text nodes in the DOM tree, Mozilla does).

Even IE 6 gives me an undefined whilst trying to get to 'textContent'

The property "textContent" is part of the comming W3C DOM 3
specification, which very few browsers support (IE still struggles
with, e.g., DOM 2 Events). It might be equivalent to the IE property
"innerText", but that won't help you in other browsers. This should work
in any W3C DOM compliant browser:

Thx for the snip, much appreciated.

Had run into the nodeType as well but wasn't to sure what to do whith them.
Would it be save to assume that their definitions are described somewhere on the w3c?
What, in your your opinion, is the most reliable source for obtaining the things like the nodeType definitions,
functions pertaining to standard objects/ the DOM model etc?
function getTextContent(node) {
if (node.nodeType == 3) {return node.nodeValue;} // text node
if (node.nodeType == 1) { // element node
var text = [];
for (var chld = node.firstChild;chld;chld=chld.nextSibling) {
text.push(getTextContent(chld));
}
return text.join("");
}
return ""; // some other node, won't contain text nodes.
}

/L

TIA
Fermin DCG

[Lasse Reichstein Nielsen]

"F. Da Costa" <da*****@xs4all.nl> writes:

Had run into the nodeType as well but wasn't to sure what to do
whith them. Would it be save to assume that their definitions are
described somewhere on the w3c?
Yep: <URL:http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247>
What, in your your opinion, is the most reliable source for obtaining
the things like the nodeType definitions, functions pertaining to
standard objects/ the DOM model etc?

The W3C DOM specifications are available on their web page. I have links
to them here:
<URL:http://www.infimum.dk/HTML/references.html#ref_1_5>

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[F. Da Costa]

Lasse Reichstein Nielsen wrote:

"F. Da Costa" <da*****@xs4all.nl> writes:

Had run into the nodeType as well but wasn't to sure what to do
whith them. Would it be save to assume that their definitions are
described somewhere on the w3c?

Yep: <URL:http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247>

What, in your your opinion, is the most reliable source for obtaining
the things like the nodeType definitions, functions pertaining to
standard objects/ the DOM model etc?

The W3C DOM specifications are available on their web page. I have links
to them here:
<URL:http://www.infimum.dk/HTML/references.html#ref_1_5>

Thx, exactly what i was looking for.
Much appreciated.

/L

DCG