How to set a value of the textarea without id by javascript?

Question

Typically we run javascript code to set any value:

document.getElementById('id_name').value = "...";

But I have a page like this:

<div id="id_name">
    <div class="class_name">
        <textarea></textarea>
    </div>
</div>

How to set a value of the textarea by javascript?

Thanks a lot for help!

Answer 1

You could do this, if your HTML is really that simple:

var textarea = document.getElementById('id_name').getElementsByTagName('textarea')[0];
textarea.value = "hello world";

There's also a "getElementsByClassName()" in newer browsers that could be used to find the "class_name" <div> element, from which you'd do the "getElementsByTagName()" call.

Answer 2

Modern browsers support the Selectors API (through querySelector ), which lets you do this very easily:

document.querySelector("#id_name > .classname > textarea").value = "foo";

For completeness, I should mention that this will operate on the first element that matches the selector (you can also tweak the selector of course). If there is the possibility of having many elements that need to be targeted, you can switch to querySelectorAll and a loop.

Answer 3

There are a few differerent possibilities and many context:

document.querySelector("textarea").value = "Your text";// Set a first textarea find in a page.

document.querySelectorAll("textarea").value = "Your text";// Set all textarea find in a page.

document.getElementById('myForm').querySelector("textarea").value = "Your text";// Set a textarea into a form: (frequently used).

Answer 4

You can use the DOM properties and methods to get to that element from any fixed point (for instance, from your div that does have an id ). In your case, it's dead easy:

document.getElementById('id_name').firstChild.firstChild.value = /* ... */;

... assuming that you've formatted that HTML for us and it really looks like this:

<div id="id_name"><div class="class_name"><textarea></textarea></div></div>

If that assumption isn't valid, then you have to do more work, because the firstChild may well be a Text node (containing the white space) rather than an Element . If so, it's still pretty easy with a helper function:

function firstElement(node) {
    while (node && node.nodeType !== 1) { // 1 = Element
        node = node.nextSibling;
    }
    return node;
}

var n = document.getElementById("id_name");
n = firstElement(n);
n = firstElement(n);
n.value = /* ... */;

This is why so many JavaScript DOM manipulation libraries have sprung up: Because common use-cases are frequently awkward when the DOM is used directly.

References:

• DOM2 Core
• DOM2 HTML
• DOM3 Core
• HTML5 Section 3 ("Semantics, Structures, and APIs of HTML documents")