SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Travesing a specific container

    Hi,

    I'm trying to targeting a specific id. I'm trying to move around the nodes changing values and or adding attributes as I please, but for some reason I can't get it to work. In fact, it's giving me a weird output.

    Code JavaScript:
    <!DOCTYPE html>
    <html>
     
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
        <script>
        window.onload = function() {
            var main = document.getElementById('main');
            var children = main.childNodes;
     
            for(var i = 0, ii = children.length; i < ii; i++) {
                children[i].nodeValue = 'changed out';
            }
        }
     
        </script>
    </head>
     
    <body>
     
    <div id="main">
    <h1>Header 1</h1>
    <p>Content 1</p>
    <h1>Header 2</h1>
    <p>Content 2</p>
    </div>
     
    </body>
    </html>

    Ouput is:

    changed out
    Header 1
    changed out

    Content 1
    changed out
    Header 2
    changed out

    Content 2
    changed out

    ....??? Not sure why that's the output.

    Where are all these additional nodes coming from?

    I've been reading and it says chilNodes return an array like. So I did this:

    Code JavaScript:
            var main = document.getElementById('main');
            var children = main.childNodes;
            var h1 = children.getElementsByTagName('h1');
     
            for(var i = 0, ii = h1.length; i < ii; i++) {
                h1[i].innerHTML = 'changed out';
            }

    yet it returned an error stating that it getElementsByTagName was not a function

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've gotten it to work. But I'm still stumped as to why there are blank/undefined nodes?

    Code JavaScript:
        window.onload = function() {
            var main = document.getElementById('main');
            var nodes = main.childNodes;
     
            for (var i = 0, ii = nodes.length; i < ii; i++) {
                console.log('Node: ' + nodes[i].innerHTML);
            }
        }

    Output is:

    Node: undefined
    Node: Header 1
    Node: undefined
    Node: Content 1
    Node: undefined
    Node: Header 2
    Node: undefined
    Node: Content 2
    Node: undefined

  3. #3
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After a few hours working with their example I gave up on it. I did manage to somewhat getting working. The problem that I was having is that fire fox is not reliable enough to tell me the correct node type.

    The following doesn't seem to work on the first node, it seems to skip it and correctly push the rest into the array.


    Code JavaScript:
        window.onload = function() {
            var main = document.getElementById('main');
            var nodes = buildChildNodes(main.childNodes);
        }
     
        function buildChildNodes(nodeList) {
            var children = [],
                i = 0,
                current = nodeList[i];
     
            while (current) {
                // 8 -- Comment node 3 -- Text node
                if (current.nodeType != 8 && current.nodeType != 3) {
                    children.push(current);
                }
                current = nodeList[++i].nextSibling;
            }
            return children;
        }

    I ended up with another way of getting the children and it seems to work across all modern browsers.

    Code JavaScript:
        window.onload = function() {
            var main = document.getElementById('main');
            var nodes = main.getElementsByTagName('*') || main.all;
     
            for(var i = 0, ii = nodes.length; i < ii; i++) {
                console.log(nodes[i].innerHTML);
            }
        }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •