DOM Tree (Cannot read property 'childNodes' of undefined)

Page 1 of 1

5 Replies - 1258 Views - Last Post: 19 July 2012 - 03:02 AM

#1 Toxicterror  Icon User is offline

  • blub

Reputation: 15
  • View blog
  • Posts: 685
  • Joined: 10-March 09

DOM Tree (Cannot read property 'childNodes' of undefined)

Posted 18 July 2012 - 08:23 AM

so... here's my code

function getRFPercent(rf) {
    alert('calc');
    //return (parseInt(rf)-1)/parseInt(rf);
}
function extract() {
    var techinfo, rflist, rfs, rf;
    techinfo = document.getElementById('techinfo');
    rflist = techinfo.firstChild.childNodes[1].childNodes[1];
    rfs = rflist.getElementsByTagName('span');
    
    for (rf in rfs) {
        alert('callfnc');
        //rf.innerHTML = getRFPercent(rf.innerHTML)
    }
}
function callRFCalc() {
    extract();
}

callRFCalc();

Causing the error: Cannot read property 'childNodes' of undefined

This is the HTML Code where i want to navigate through
<div id="techinfo">
    <div class="techwrapper">
        <div class="leftcol">
            blabla
        </div>
        <div class="rightcol">
            <p>bla</p>
            <ul>          
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <table cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td colspan="2">blabla</td>
                    </tr>
                </tbody>
            </table>

            <div id="bl0" style="display: none; ">
                <table class="titt" width="100%">
                    <tbody>
                        <tr>
                            <td>bla</td>
                            <td align="right" class="white">bla</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="bl1" style="display: none; ">
                blabla
            </div>
        </div><!-- rightcol -->
        <br class="clearfloat">
    </div><!-- techwrapper -->
</div>


What i'm trying to get is the <ul><li>-stuff.
I'd like to modify the text in those <li>'s and i dont know why im getting that error.

Side-Info: It's an Userscript(.org)

Does anybody know what i'm doing wrong?
cheers

This post has been edited by Toxicterror: 18 July 2012 - 08:24 AM


Is This A Good Question/Topic? 0
  • +

Replies To: DOM Tree (Cannot read property 'childNodes' of undefined)

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2899
  • View blog
  • Posts: 7,555
  • Joined: 08-June 10

Re: DOM Tree (Cannot read property 'childNodes' of undefined)

Posted 18 July 2012 - 11:22 PM

you try to access the HTML element before it is created by the HTML parser.

you need to delay the function execution (no idea why you use a nested function for it) until the DOM* finished loading.

options to do that
- use the load event of the window object
- use the DOMContentLoaded event of the window object
- place the execution trigger at the end of the <body>



* - JS does not need to wait for the elements to be rendered visually, they just need to be parsed (exist in memory).
Was This Post Helpful? 0
  • +
  • -

#3 Toxicterror  Icon User is offline

  • blub

Reputation: 15
  • View blog
  • Posts: 685
  • Joined: 10-March 09

Re: DOM Tree (Cannot read property 'childNodes' of undefined)

Posted 19 July 2012 - 01:36 AM

Still not working...
Tried document.addEventListener('load', callRFCalc, false);
and document.addEventListener('DOMContentLoaded', callRFCalc, false);
but both dont work.

I've broke down the code to only do the following:
techinfo = document.getElementById('techinfo');    
console.debug(techinfo.innerHTML);
console.debug(techinfo.firstChild.innerHTML);

The first outputs the complete content of the div as it should,
but the second console print just returns undefined.

Another idea is to hook in at techinfo and getElementsByTagName('li') which then should return all the list items that i need.

This post has been edited by Toxicterror: 19 July 2012 - 01:36 AM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2899
  • View blog
  • Posts: 7,555
  • Joined: 08-June 10

Re: DOM Tree (Cannot read property 'childNodes' of undefined)

Posted 19 July 2012 - 01:52 AM

yepp, text nodes do not have an innerHTML property (that’s why there is the firstElementChild property in DOM 4). depending on the browser, whitespace between element nodes is treated as separate node (or not).

you could also use the CSS style access via querySelector() or querySelectorAll()

This post has been edited by Dormilich: 19 July 2012 - 01:54 AM

Was This Post Helpful? 0
  • +
  • -

#5 Toxicterror  Icon User is offline

  • blub

Reputation: 15
  • View blog
  • Posts: 685
  • Joined: 10-March 09

Re: DOM Tree (Cannot read property 'childNodes' of undefined)

Posted 19 July 2012 - 02:43 AM

so i just could use firstElementChild to fix it?

actually i want to stick with JS as its an userscript loaded via tampermonkey
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2899
  • View blog
  • Posts: 7,555
  • Joined: 08-June 10

Re: DOM Tree (Cannot read property 'childNodes' of undefined)

Posted 19 July 2012 - 03:02 AM

View PostToxicterror, on 19 July 2012 - 11:43 AM, said:

so i just could use firstElementChild to fix it?

yepp. well, I suppose it does.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1