如何設置沒有id的textarea的值由JavaScript？

Question

通常我們運行JavaScript代碼的任何值：

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

但我有這樣的頁面：

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

如何設置由JavaScript文本區域的價值？

非常感謝您的幫助！

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

可以使用DOM屬性和方法從任何固定點到達該元素（例如，從您的div是確實有id）。根據你的情況，它的死很容易：

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

... 假設你已經格式化該HTML爲我們和它真的是這樣的：

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

如果假設不有效，那麼你必須做更多的工作，因爲firstChild很可能是Text node（包含空格）而不是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 = /* ... */; 

這就是爲什麼這麼多的JavaScript DOM操作庫如雨後春筍般涌現：因爲當DOM直接使用常見的用例常常很尷尬。

參考文獻：

• DOM2 Core
• DOM2 HTML
• DOM3 Core
• HTML5 Section 3（ 「語義，結構和HTML文件的API」）