JavaScript / DOM question
July 8, 2004 9:18 AM Subscribe
I'm learning JavaScript for a project, and having trouble sussing the DOM addresses of components of a page. I've played with FireFox's DOM Explorer, but while it shows the tree, it doesn't show the element addresses, nor can you print the tree out. Any suggestions?
Specifically, I've got a table that contains form fields, and when the user fills the second field on the last (current) row, I want to add a row and its attached fields (incrementing the number at the end of the fieldname by 1 for each new row).
I can see how to do most of it, but I can't quite figure out how to navigate the tree to the last row of the table so that I can do the paste -- or more accurately, I can figure out how to *do* it, but not where to *go*.
Is there a better/newer/more powerful DOM explorer type tool around somewhere that I'm missing?
I have the O'Reilly book; that's how I got this far...
Specifically, I've got a table that contains form fields, and when the user fills the second field on the last (current) row, I want to add a row and its attached fields (incrementing the number at the end of the fieldname by 1 for each new row).
I can see how to do most of it, but I can't quite figure out how to navigate the tree to the last row of the table so that I can do the paste -- or more accurately, I can figure out how to *do* it, but not where to *go*.
Is there a better/newer/more powerful DOM explorer type tool around somewhere that I'm missing?
I have the O'Reilly book; that's how I got this far...
Response by poster: I hadn't seen the DevGuru reference; thanks.
What I mean, Khalad, is that I can figure out how to write the code to add the appropriate nodes, but I'm having trouble figuring out how to get the current-node pointer to the proper place, first.
I'm sure there's some deterministic address that points to each place in the the DOM tree the explorer shows me -- it having been built by the page's HTML -- but the explorer doesn't tell me what that address is, and I'm not sufficiently familiar with how the DOM works yet to extract it from the picture of the tree, particularly since I don't seem to be able to print it.
posted by baylink at 12:49 PM on July 8, 2004
What I mean, Khalad, is that I can figure out how to write the code to add the appropriate nodes, but I'm having trouble figuring out how to get the current-node pointer to the proper place, first.
I'm sure there's some deterministic address that points to each place in the the DOM tree the explorer shows me -- it having been built by the page's HTML -- but the explorer doesn't tell me what that address is, and I'm not sufficiently familiar with how the DOM works yet to extract it from the picture of the tree, particularly since I don't seem to be able to print it.
posted by baylink at 12:49 PM on July 8, 2004
Ah, I see. You need to use the various DOM navigation functions to get to the right node. There's no way to directly get to a particular node in the DOM tree like you could do with XPath. Instead, usually you'll want to give an element an
For example, you might do something like this:
(Since I gave the rows
posted by Khalad at 1:50 PM on July 8, 2004
id
, use getElementById
to get that element, and then use properties like childNodes
, nextSibling
, and parentNode
to get to the right element.For example, you might do something like this:
<html>
<body>
<table id="tableId">
<tr id="first"> <td>1</td></tr>
<tr id="second"><td>2</td></tr>
<tr id="third"> <td>3</td></tr>
</table>
<script type="text/javascript">//<![CDATA[
function removeEmptyTextNodes(element)
{
var nextNode;
for (var node = element.firstChild; node != null; node = nextNode)
{
nextNode = node.nextSibling;
if (node.nodeName == "#text" && node.nodeValue.match(/^\s*$/))
node.parentNode.removeChild(node);
else
removeEmptyTextNodes(node);
}
return element;
}
var table = removeEmptyTextNodes(document.getElementById("tableId"));
var tbody = table.firstChild;
var lastRow = tbody.lastChild;
alert(lastRow.id);
//]]></script>
</body>
</html>
(Since I gave the rows
id
s, I could have cheated and gotten directly to the last row with document.getElementById("three")
, but that wouldn't really have answered your question.)posted by Khalad at 1:50 PM on July 8, 2004
Response by poster: No, but getElementById will work in my case, since all my fields have unique names. Cool. Thanks.
posted by baylink at 7:13 PM on July 12, 2004
posted by baylink at 7:13 PM on July 12, 2004
« Older Bird Watching in the Northeast | How can I trip motion detector lights continuously... Newer »
This thread is closed to new comments.
Here are some things to keep in mind when navigating around a table:
tbody
element, meaning your rows are children of thetbody
and not thetable
.tbody
element, lest your browser mysteriously ignore your new table.nextSibling
and the like, you have to watch out for text nodes in the DOM tree, particularly empty ones containing only whitespace.posted by Khalad at 9:46 AM on July 8, 2004