JavaScript 문서 요소에 액세스하기 위해 HTML DOM을 사용하는 예제 코드
- 零下一度원래의
- 2017-05-05 11:51:391637검색
HTML DOM을 통해 JavaScript HTML 문서의 모든 요소에 액세스할 수 있습니다.
HTML DOM(Document Object Model)
웹페이지가 로드되면 브라우저는 페이지의 문서 객체 모델(Document Object 모델).
HTML DOM 모델은 객체 트리로 구성됩니다.
HTML DOM 트리
프로그래밍 가능 개체 모델을 통해 JavaScript는 동적 HTML을 생성할 수 있는 충분한 성능을 얻습니다.
JavaScript는 페이지의 모든 HTML 요소를 변경할 수 있습니다
JavaScript는 페이지의 모든 HTML 속성을 변경할 수 있습니다
JavaScript는 페이지의 모든 CSS 스타일을 변경할 수 있습니다
JavaScript는 페이지의 모든 이벤트에 반응할 수 있습니다
HTML 요소 찾기
일반적으로 JavaScript를 사용하면 HTML 요소를 조작해야 합니다.
이를 위해서는 먼저 요소를 찾아야 합니다. 이를 수행하는 세 가지 방법이 있습니다:
ID로 HTML 요소 찾기
태그 이름으로 HTML 요소 찾기
클래스 이름으로 HTML 요소 찾기
ID로 HTML 요소 찾기
DOM에서 HTML 요소를 찾는 가장 간단한 방법은 요소의 ID를 사용하는 것입니다.
인스턴스
이 예에서는 id="intro"인 요소를 찾습니다.
[html] view plain copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.php.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.php.cn/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<p id="intro">hello</p>
<p>本例演示 <strong>getElementById</strong> 方法</p>
<script>
x = document.getElementById("intro");
document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>');
</script>
</body>
</html>요소가 발견되면 메소드는 이를 객체로 반환합니다(x에서). ) 요소.
요소를 찾을 수 없으면 x에 null이 포함됩니다.
태그 이름으로 HTML 요소 찾기
예
이 예는 id가 "main"인 요소를 찾은 다음 "main"에 있는 모든 e388a4556c0f65e1904146cc1a846bee :
[html] view plain copy
<html xmlns=www.php.cn/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<script>
var x = document.getElementById("main");
var y = document.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段落文本是：' + y[0].innerHTML);
</script>
</body>
</html>클래스 이름으로 HTML 요소를 찾는 것이 IE 5,6,7,8에서 작동하지 않습니다.
[관련 추천]
위 내용은 JavaScript 문서 요소에 액세스하기 위해 HTML DOM을 사용하는 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!