Ward Germonpré wrote:
Hi,
It seems to me that you try and experiment with the DOM Core and DOM
Traversal without really having understood the specifications: giving
them some reading would certainly help to dissipate the fog you're
struggling in currently :)
<URL:http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html>
<URL:http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/traversal.html>
If I understand you correctly you're advising me to use
NodeFilter.SHOW_TEXT instead of SHOW_ELEMENT ?
Not really.
This argument, "whatToShow", explains which node type(s) the tree should
consider in its logical view before handling them to your filter. There
are exactly 12 node types, which can be combined using the OR bit operator.
Apparently, you want to retrieve some text content from a particular
element. The DOM work in two directions, therefore you could implement
two different logics (at least).
[1] filter using SHOW_ELEMENT; when iterating, you have to make sure
that the element is of nodeName TD and that it is the third TD in its
row. You can then grab its text content directly using the textContent
property. Other ways of retrieving the text also are available, like
concatenating the nodeValue of the text nodes contained within the TD,
get the string value of a matched text range, and so forth.
[2] filter using SHOW_TEXT; when iterating, you have to make sure that
one of the ascendant of the text node is a TD and that this TD is the
third in its row. This way, you will have determined that the text
belongs to the TD; however you're not finished, because some other text
nodes might be included in the TD - some cache process should therefore
be implemented in order to calculate the correct text value in the end.
Of course, the first solution is the simplest, all the more than an
efficient filter makes it a one line statement (see below).
I think something is wrong with my filterfunction,
The filter function should theoretically be fine, although I question
whether it is appropriate. I can see at first that you accept or reject
some node based on their CSS Class attribute, but that you provide some
HTML with TD having no CSS class atribute at all, resulting in their
being rejected in the end.
However, this function should be made part of an object literal, under
the named property "acceptNode". Also, using NodeFilter.REJECT moves
away the rejected node, including all its children; make sure you really
want to use REJECT and not SKIP.
if I alert the
currentnode right after invoking the walker, it gives me TABLE, where it
should TR.
No, the first node of the treewalker is the root node you have specified
when calling the createTreeWalker factory.
NodeName and className confuse me, classname is an element
property I've used, but nodeName can yield 'class' and then its nodeValue
yields 'gewoon'.
nodeName gives you the name of the node (eg. "TABLE", "TD", "#document",
"#text"...) while className gives you the CSS class, like in
<div class="cssFoo">
nodeName will never yield "class", unless you work with a node of type
ATTRIBUTE; still, since they are not part of the tree (they are
registered on the ELEMENT node), they will never appear in the
treewalker unless you define one explicitly as the root node of the
treewalker, using the getAttributeNode method for instance.
But a node is an element, right, like a tag
Not really. An element is a node of type ELEMENT, however 11 other node
types exist, such as TEXT, DOCUMENT, ENTITY, PROCESSING_INSTRUCTION,
COMMENT etc.
Here is a short example demonstrating the use of a treewalker to alert
the third TD content. Eventually, be informed that using a treewalker
over basic DOM parsing suffers several flaws: not only is it supported
in a very few browsers, but also very few programmers are familiar with
DOM Traversal (which could lead to a maintenance issue).
---
<style type="text/css">
td {
border : 1px solid #c00;
padding : 5px;
width : 200px;
}
</style>
<table id="foo">
<tbody>
<tr>
<td>Desert on the Moon</td>
<td>010101 (binary system)</td>
<td>Kung-Fu World Champion</td>
</tr>
<tr>
<td>Truth and Lies</td>
<td>Wind Song</td>
<td>XYZ</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
window.onload = function() {
if(document.createTreeWalker) {
var n;
var tw = document.createTreeWalker(
document.getElementById("foo"),
NodeFilter.SHOW_ELEMENT,
{
acceptNode : function (node) {
return (
node.nodeName.toLowerCase()=="td" &&
node==node.parentNode.cells[2]
) ? NodeFilter.FILTER_ACCEPT :
NodeFilter.FILTER_SKIP ;
}
},
false
);
while((n=tw.nextNode()) != null)
alert(n.nodeName + " : " + n.textContent);
}
}
</script>
---
