When I put the function call into a js debugger in FF, it shows a number of results. But at the bottom of a page, it returns null, as if the DOM hasn't been constructed yet by the time my script runs.

Example. I'm trying to read what categories a post is filed under, and then light those up in the category tree. It seems like that would help the navigation be a little more natural, and also just be cool. I've tried a number of different syntax possibilities Google suggested for script defer.

Here's the code, which runs without throwing any errors ... it just doesn't return any data, either:

<script defer="defer" type="text/javascript">
  var temp = "";
  var allSpans = document.getElementsByTagName("span");
  for(var i = 0; i < allSpans.length; i++)
     if(allSpans[i].class == "postmetadata") {
      var catLinks = allSpans.getElementsByTagName("a");
      for(var a = 0; a < catLinks.length; a++)
        temp += catLinks[a].innerText + ", ";
    }
  window.status = "Categories:  " + temp;</script>

How do I get this to run after the document tree is built so I can query the DOM? None of the italic code above ever gets a chance to run...

Apparently you need to put the script in an external file to make this work...?

And, for the record, it's innerHTML, not innerText.

Forrest, did you put your script at the top of the page ?

If so, this might be your problem.
Javascript is interpreted as the browser "sees" it.
If it's placed before HTML content, then it won't see any span, as they are not rendered at this time.

What you need is to launch your DOM parsing once the page is loaded

function initSpan(){
  var temp = "";
  var allSpans = document.getElementsByTagName("span");
  for(var i = 0; i < allSpans.length; i++)
     if(allSpans[i].class == "postmetadata") {
      var catLinks = allSpans.getElementsByTagName("a");
      for(var a = 0; a < catLinks.length; a++)
        temp += catLinks[a].innerText + ", ";
    }
  window.status = "Categories:  " + temp;
}
 
try{
  window.addEventListener('load',initSpan, true);
}
catch(err){
  window.attachEvent('onload',initSpan);
}

This makes the initSpan() function being called upon the onload event, and should resolve your problem.
It should be the same when you include js in an external file, it's maybe an coincidence if it works when you do so.

I had put this one at the bottom of the page, just before the analytics code and </body>, for exactly the reason you mentioned. I had noticed long ago that script doesn't "see" document elements that are declared lower down in the code. Sort of like C, unless I'm not remembering properly ... I don't think you could declare an instance of a class you hadn't defined yet?

Anyway, it's probably a coincidence, like you said, but externalizing the code seems to have fixed it. Running line by line in the debugger in FF, it would hit the .innerText property and then start the next iteration of the loop. Confusing error handling...

I've never tried attaching events in js ... I've never been that comfortable understanding exactly how they bubble in javascript.

Here's the working code, below. Have a look! Now the question is whether I want to disable this on everything but individual posts...?

    var temp = "";
    var allSpans = document.getElementsByTagName("span");

    for(var i = 0; i < allSpans.length; i++)
        if(allSpans[i].className == "postmetadata") {
            var catLinks = allSpans[i].getElementsByTagName("a");
            for(var a = 0; a < catLinks.length; a++)
                if(catLinks[a].innerHTML)
                    temp += catLinks[a].innerHTML + ", ";
        }

    // Now update the tree
    var catLinks2 = document.getElementById("categoryList").getElementsByTagName("a");
    for(var b = 0; b < catLinks2.length; b++)
        if(temp.indexOf(catLinks2[b].innerHTML) > -1) {
            catLinks2[b].style.fontWeight = "bold";
            catLinks2[b].style.fontFamily = "helvetica";
            catLinks2[b].style.color = "purple";
        }