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...
posted by baylink to Computers & Internet (5 answers total)
 
What do you mean by the element addresses?

Here are some things to keep in mind when navigating around a table:
  • Even though your HTML probably does not include such an element, the DOM tree will contain a tbody element, meaning your rows are children of the tbody and not the table.
    • Corollary: If you create a table through DOM calls, you can't leave out the tbody element, lest your browser mysteriously ignore your new table.
  • If you're trying to navigate with 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


Handy reference
posted by yerfatma at 10:11 AM on July 8, 2004


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


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 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 ids, 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


« Older Bird Watching in the Northeast   |   How can I trip motion detector lights continuously... Newer »
This thread is closed to new comments.


Tags

Share