Javascript - Get child's text value

Question

How can I get the text value from an elements's child?

Say I have this code on a page:

<div class='geshitop'>
  &#91; CODE &#93; &#91; <a href="#" onclick="javascript:copy(); return false;">PLAIN-TEXT</a> &#93;
</div>
<div class='geshimain'>
  <pre><div class="text" style="font-family:monospace;">Code goes here...</div></pre>
</div>

The function copy():

<script type="text/javascript">
function copy() {
 var text = this.parent.getElementsByName("text");
 var code = text[0].value;
 var popup = window.open("", "window", "resizeable,width=400,height=300");
 popup.document.write("<textarea name='code' cols='40' rows='15'></textarea>");
 popup.code.value = code;
}

How would I go about getting that child's data: the <div class "text">. How can I get that from the parent?

Answer 1

To clarify: Are you trying to get the css from the "text" class to display?

Just a thought, you could try using id attributes to get what you need.

Answer 2

put an ID on the tag you want to get its data from.

this way will only grab the first child of the div node:

function copy(){
     var text = document.getElementById( "YOU_TAG_NAME" ).firstChild;
     //do stuff
}

this will grab all of the data in the node, but don't do this unless you have control over what goes into that div tag:

function copy(){
     var text = document.getElementById( "YOU_TAG_NAME" ).innerHtml;
     //do stuff
}

Answer 3

Get a reference to the node you want to retrieve text from and try:

someNode.firstChild.nodeValue

When you have a node like this:

<span>Here is some text</span>

You're actually looking at two nodes, a span node which has a text node child. In DOM, that text node child's nodeValue is "Here is some text"

Answer 4

I'm still having problems. If there is two codeboxes on one page, then it does not work. Remember, I am unable to use ID's. It must be classes.

If I was able to use jQuery this would be easy.

Answer 5

Try this:

Change your HTML slightly. The "javascript:" prefix isn't necessary inside an onclick handler. Also, pass a reference of "this" to your copy function:

<div class='geshitop'>
  &#91; CODE &#93; &#91; <a href="#" onclick="copy(this); return false;">PLAIN-TEXT</a> &#93;
</div>
<div class='geshimain'>
  <pre><div class="text" style="font-family:monospace;">Code goes here...</div></pre>
</div>

Having done that, alter your copy function to accept the new parameter. Then you just have to locate the correct node. From the question, I think you are looking for the next <div class="text"> that is a child of the <div class="geshimain"> that is the next sibling of the parent node that contains the link that was clicked. This function should accomplish that:

function copy(node) {
    node = node.parentNode; // <div class="geshitop">

    // Loop over adjacent siblings, looking for the next geshimain.
    while (node.nextSibling) {
     node = node.nextSibling;
     if (node.nodeName === 'DIV' && node.className === 'geshimain') {
      break;
     }
    }

    if (!node) {
     throw new Error("Could not locate geshimain");
    }

    // Locate the <div class="text">
    node = (function () {
     var divs = node.getElementsByTagName('div');
     for (var x = 0; x < divs.length; x++) {
      if (divs[x].className === 'text') {
       return divs[x];
      }
     }
     return null;
    }());

    if (!node) {
     throw new Error("Could not locate text");
    }

    node =
    '<textarea name="code" cols="40" rows="15">' + node.innerHTML + "</textarea>";
    popup = window.open("", "window", "resizeable,width=400,height=300");
    popup.document.write(node);
    popup.document.close();
}

Good luck!