Tags:





JavaScript / DOM question
July 8, 2004 9:18 AM   RSS feed for this thread 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 comments total)
What do you mean by the element addresses?

Here are some things to keep in mind when navigating around a table:

posted by Khalad at 9:46 AM on July 8, 2004


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


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


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 Read any good field guides for...   |   ScienceProjectFilter: Can anyb... Newer »
This thread is closed to new comments.