DOM question: value of childnode

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • msalman
    New Member
    • Jun 2007
    • 6

    DOM question: value of childnode

    hey all,

    i'm very new to DOM and javascripting. I found a tutorial somewhere and i was playing around with it but it got stuck on getting the value of a node that i just append at the end. It returns me an empty string when i try to get the node value. I've looked around but no luck making my code work. Any help will be appreciated, thanking in advance! Please see the code below

    Code:
    <html>
    <head><title>JavaScript</title>
    </head>
    
    <body>
      <div style='position:absolute; width:150px; height:100px;overflow:auto' id = 'scroll_text'> </div>
      <script language='javascript'>
      
      function move_up() {
    
        var mycars = new Array()
        mycars[0] = "Saab"
        mycars[1] = "Volvo"
        mycars[2] = "BMW"
            
        var obj = document.getElementById("scroll_text")
    
        for (i=0;i<mycars.length;i++)
        {
            var mytext=document.createTextNode(mycars[i] + " ")
    
            obj.appendChild(mytext)
    
        }
    
        alert(obj.firstChild.nodeType)
        var ochildNodes = obj.childNodes
        var len = ochildNodes.length
        alert(len)
    
        alert(obj.firstChild.nodeValue) // the following line returns an empty string
    
    //]ultimately i would like to do this
        //obj.firstChild.style.backgroundColor="#0000FF"
      }
      move_up()
    </script>
    </body>
    </html>
  • pbmods
    Recognized Expert Expert
    • Apr 2007
    • 5821

    #2
    Heya, msalman. Welcome to TSDN!

    Hint: obj.firstChild. nodeValue is a space character, not an empty string ~_^

    Comment

    • msalman
      New Member
      • Jun 2007
      • 6

      #3
      Originally posted by pbmods
      Heya, msalman. Welcome to TSDN!

      Hint: obj.firstChild. nodeValue is a space character, not an empty string ~_^
      hmm, that's interesting. could you please explain why? Is it because that the inital value inside div is a space character? How can i change the background color of a specific child node because the following code of line doesn't work
      Code:
      ochildNodes[0].style.backgroundColor="#0000FF"
      thank you

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        Originally posted by msalman
        hmm, that's interesting. could you please explain why? Is it because that the inital value inside div is a space character?
        In short, yes.
        Originally posted by msalman
        How can i change the background color of a specific child node because the following code of line doesn't work
        Code:
        ochildNodes[0].style.backgroundColor="#0000FF"
        thank you
        You can't change the text node, but you can add say, a span, and then seting the background colour to that, e.g.
        [CODE=javascript]var span = document.create Element("span") ;
        span.appendChil d(mytext);
        obj.appendChild (span);
        [/CODE] then [CODE=javascript]ochildNodes[1].style.backgrou ndColor="#0000F F"[/CODE]

        Comment

        • msalman
          New Member
          • Jun 2007
          • 6

          #5
          Originally posted by acoder
          In short, yes.

          You can't change the text node, but you can add say, a span, and then seting the background colour to that, e.g.
          [CODE=javascript]var span = document.create Element("span") ;
          span.appendChil d(mytext);
          obj.appendChild (span);
          [/CODE] then [CODE=javascript]ochildNodes[1].style.backgrou ndColor="#0000F F"[/CODE]
          thanks for the help, it worked

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            No problem, you're welcome. Post again any time if you have more problems.

            Comment

            Working...