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?

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.

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?

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.

• javascript
• html
• dom

4 Answers 4

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"

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
}

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.

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 acplish 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!