javascript 如何通过javascript设置没有id的textarea的值？

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

提问by Dmitry

Typically we run javascript code to set any value:

通常我们运行 javascript 代码来设置任何值：

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?

如何通过javascript设置textarea的值？

Thanks a lot for help!

非常感谢您的帮助！

回答by Pointy

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

你可以这样做，如果你的 HTML 真的那么简单：

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.

在较新的浏览器中还有一个“getElementsByClassName()”可用于查找“class_name”<div>元素，您可以从中执行“getElementsByTagName()”调用。

回答by Jon

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

现代浏览器支持Selectors API（通过querySelector），这让您可以非常轻松地做到这一点：

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

For completeness, I should mention that this will operate on the firstelement 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 querySelectorAlland a loop.

为了完整起见，我应该提到这将对匹配选择器的第一个元素进行操作（当然您也可以调整选择器）。如果有可能有很多元素需要定位，你可以切换到querySelectorAll一个循环。

回答by Josias Wattrelos

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).

回答by T.J. Crowder

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

您可以使用 DOM 属性和方法从任何固定点（例如，从您的div那个确实有一个id）获取该元素。在你的情况下，这很容易：

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

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

...假设您已经为我们设置了 HTML 格式，它看起来像这样：

<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 firstChildmay well be a Textnode(containing the white space) rather than an Element. If so, it's still prettyeasy with a helper function:

如果该假设无效，那么您必须做更多的工作，因为 很firstChild可能是一个Text节点（包含空格）而不是Element. 如果是这样，使用辅助函数仍然很容易：

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.

这就是为什么会出现如此多的 JavaScript DOM 操作库的原因：因为当直接使用 DOM 时，常见用例通常很尴尬。

References:

参考：

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

• DOM2 核心
• DOM2 HTML
• DOM3 核心
• HTML5 第 3 节（“HTML 文档的语义、结构和 API”）