javascript에 의해 id가없는 텍스트 영역의 값을 설정하는 방법은 무엇입니까?

Question

일반적으로 우리는 어떤 값을 설정하는 자바 스크립트 코드를 실행

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

을하지만이 같은 페이지가 있습니다

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

어떻게 자바 스크립트로 텍스트 영역의 값을 설정할 수 있습니까?

도움을 주셔서 감사합니다.

Answer 1

당신의 HTML 정말 간단 경우는,이 ​​작업을 수행 할 수 있습니다 : 새로운 브라우저에서 또한 "getElementsByClassName()"를있다

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

은 "class_name을"<div> 요소를 찾는 데 사용할 수있는 어떤에서 당신은 "getElementsByTagName()"호출을 할 것입니다.

Answer 2

최신 브라우져 support 당신은 매우 쉽게 할 수 있습니다 (querySelector를 통해) 선택기의 API :

완성도를 들어

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

, 나는이 셀렉터와 일치하는 첫 요소에 작동 언급해야 (물론 선택기를 조정할 수도 있습니다). 타겟팅해야 할 요소가 많이있을 가능성이있는 경우 querySelectorAll 및 루프로 전환 할 수 있습니다.

Answer 3

당신은 어떤 고정 된 시점에서 해당 요소에 도착하기 위해 DOM의 속성과 메서드를 사용할 수 있습니다 (이하는 당신의 div 것을에서, 인스턴스의 id 있습니다). 당신이 우리를 위해 HTML 것을 포맷 한 가정

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

... 과 정말 다음과 같습니다 : 귀하의 경우, 그것은 죽은 쉽게 그 가정이 아닌 경우

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

유효하면 firstChild은 Element이 아닌 Text node (공백 포함) 일 수 있기 때문에 더 많은 작업을해야합니다. 그렇다면, 그것은 여전히 ​​도우미 기능 꽤 쉽게 : 너무 많은 자바 스크립트 DOM 조작 라이브러리가 나타 났 이유

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 = /* ... */; 

이다 : DOM을 직접 사용하는 경우 일반적인 사용 사례가 자주 어색하기 때문에.

참고 :

• DOM2 Core
• DOM2 HTML
• DOM3 Core
• HTML5 Section 3("HTML 문서의 의미, 구조, 및 API")