HTML DOM 액세스
HTML DOM 액세스 - HTML 요소를 찾습니다.
HTML 요소(노드) 액세스
HTML 요소 액세스는 노드 액세스와 동일합니다.
다양한 방법으로 HTML 요소에 액세스할 수 있습니다.
getElementById() 메소드 사용
getElementsByTagName() 사용 메서드
getElementsByClassName() 메서드
getElementById() 메서드를 사용하면
getElementById() 메서드가 지정된 ID
Syntax
node를 사용하여 요소를 반환합니다. getElementBy Id("id " );
다음 예에서는 id="intro"인 요소를 가져옵니다.
Instance
<html><!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementById</b> method!</p>
<script>
x=document.getElementById("intro");
document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>");
</script>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
getElementsByTagName() 메소드
getElementsByTagName()은 지정된 태그 이름을 가진 모든 요소를 반환합니다.
Syntax
node.getElementsByTagName("tagname");
다음 예에서는 문서의 모든 <p> 요소가 포함된 목록을 반환합니다.
Instance
<html><!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
<script>
x=document.getElementsByTagName("p");
document.write("Text of first paragraph: " + x[0].innerHTML);
</script>
</body>
</html>달려 인스턴스 »
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.
다음 예제는 문서의 모든 <p> 요소를 포함하는 목록을 반환하며 이러한 <p> 요소는 요소의 하위 항목이어야 합니다. with id="main" (자식, 손주 등):
Instance
<html><!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method</p>
</div>
<script>
x=document.getElementById("main").getElementsByTagName("p");
document.write("First paragraph inside the div: " + x[0].innerHTML);
</script>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요
getElementsByClassName() Method
class="intro"가 포함된 모든 HTML 요소에 대해 동일한 클래스를 찾으려면 다음 방법을 사용하세요.
document.getElementsByClassName("intro");
위 예에서는 목록을 반환합니다. class="intro"를 포함하는 모든 요소:
참고: getElementsByClassName()은 Internet Explorer 5,6,7,8에서 유효하지 않습니다.
