JavaScript DOM inquiry

Posted on 2007-10-11
Last Modified: 2013-11-19
Hey all,

I'm just trying to learn some basic DOM manipulation with core javascript. I know how simple it is to do something like this using a library like jQuery or prototype, but for now my interests remain in obtaining results similar to these without them.  In this example, I'm looking over a book and noted how they're uppercasing all letters.  However, I can't get it to work. What kind of node should I be passing to get Node.TEXT_NODE for this to work?

here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<html lang="en">
      <script type="text/javascript">
      // This function recursively looks at Node n and its descendants,
      // converting all Text node data to uppercase
      function upcase(n) {
          if (n.nodeType == 3 /*Node.TEXT_NODE*/) {
              // If the node is a Text node, change its text to uppercase.
          else {
              // If the node is not a Text node, loop through its children
              // and recursively call this function on each child.
              var kids = n.childNodes;
              for(var i = 0; i < kids.length; i++) upcase(kids[i]);
<p id="test">
      This is a test
      <button onclick="upcase('test')">UpperCase it up!</button>
Question by:stevefNYC
    LVL 23

    Accepted Solution

    call it like this:

    <button onclick="upcase(document.body)">UpperCase it up!</button>
    LVL 3

    Author Comment

    Dang, you know how I tested it at one point. I used:

    <button onclick="upcase('document')">UpperCase it up!</button>

    Had the right idea, but passing it as a string doesn't work. :-(

    Thank you though for the help.
    LVL 14

    Expert Comment

    I think you just need to actually get the node, not pass in the string 'test' to your function call.

          <button onclick="upcase(document.getElementById('test'))">UpperCase it up!</button>
    LVL 23

    Expert Comment

    no problem - at least you'll never forget it now...

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Join & Write a Comment

    Suggested Solutions

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    733 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now