Question

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

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

但我有一个这样的页面：

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

如何通过javascript设置textarea的值？

非常感谢您的帮助！

Answer 1

如果你的HTML非常简单，你可以这样做：

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

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

Answer 2

现代浏览器support选择器API（通过querySelector），可让您轻松完成此操作：

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

为了完整性，我应该提一下，这将在匹配选择器的第一个元素上运行（当然你也可以调整选择器）。如果有可能需要定位许多元素，您可以切换到querySelectorAll和循环。

Answer 3

有几种不同的可能性和多种情况：

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

您可以使用DOM属性和方法从任何固定点（例如， <{1}}的{{1}}获取该元素。在你的情况下，它很容易：

div

... 假设您为我们格式化了HTML，它看起来真的像这样：

id

如果该假设无效，那么您必须做更多工作，因为document.getElementById('id_name').firstChild.firstChild.value = /* ... */;可能是Text node（包含空格）而不是Element。如果是这样，使用辅助函数它仍然很容易非常：

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

这就是为什么如此众多的JavaScript DOM操作库如雨后春笋般出现的原因：因为直接使用DOM时，常见的用例通常很难用。

参考文献：

DOM2 Core
DOM2 HTML
DOM3 Core
HTML5 Section 3 （“HTML文档的语义，结构和API”）

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

4 个答案: