Can't get childnodes.length

Question

I'm trying to find a node that contains an image, and then find a specific string in that image's tag. But I don't know when on the page the image tag will occur, except that it appears only in td elements that are classed as bodyTextSmall. That should get me there, right?

Everything works just fine, until I try to get the length of the childNodes property. See the line above.

Is this the right code, or is there another way to find out if a specific td has an img tag somewhere inside it? I'm tearing out what little hair I have left, because from what little I know of JavaScript, this is how it's supposed to work.

The problem is that I only know by the img tag whether I need to format the td tag, and I don't assemble the td tags and can't get into that part of the site to make changes directly. I've already tried CSS selectors to see if I can style parts of images, but there are inline styles that I can't override. Again, that's part of the site that I can't control.

<script type="text/javascript">

function getTables(dRef) {

var d = document;
var dMid = d.getElementById('mainContent');
var dTabs = dMid.getElementsByTagName('td');

  //  Attempts to load table cells...
  for (var i = 0; i < dTabs.length; i++) {
    //  Attempts to detect the specific cell type...
    if (dTabs[i].className == "bodyTextSmall") {
      //  Attempts to locate the parts inside this cell...
      var myNodes = i.ChildNodes;  //  This part runs, but I can't get "ChildNodes.length" to work

      //  Attempts to notify the user...
      alert(dTabs[i].className + ':  ' + i);
    }
  }

}

window.onload = getTables;

</script>

So, now I've switched to jQuery, and I'm getting the same problem. I can tell what image is where, but I can't do anything to the image itself.

<script type="text/javascript"> 

function getTables() {
    //  Locates the correct container for images...
    $('#mainContent img').each(function(idx, item) {
        var tImgs = item.src;
        if (tImgs.indexOf("-ds.") > 0) {
            window.alert(tImgs);
            $(this).append('Here is a message about the image.');  //nothing happens here
        }

    });

}

window.onload = getTables;

</script>

Again, this jQuery code responds by responding to any image that has "-ds." anywhere in the src. I can't get anything else to happen. I do know that $(img).append will affect EVERY image, so the script is capable of doing something.

This has now become a case of getting more than what I want or nothing at all, and it's really starting to get on my last nerves.

Answer 1

i.ChildNodes is undefined.
You mean childNodes.

Also, i is a number, not a DOM element.
You mean dTabs[i].

Answer 2

var myNodes = dTabs[i].ChildNodes;