자바스크립트 HTML DOM

JavaScript HTML DOM

HTML DOM을 통해 JavaScript HTML 문서의 모든 요소에 접근할 수 있습니다.

HTML DOM(문서 개체 모델)

웹 페이지가 로드되면 브라우저는 페이지의 문서 개체 모델을 생성합니다.

프로그래밍 가능한 개체 모델을 통해 JavaScript는 동적 HTML을 생성할 수 있는 충분한 성능을 얻었습니다.

JavaScript는 페이지의 모든 HTML 요소를 변경할 수 있습니다

JavaScript는 페이지의 모든 HTML 속성을 변경할 수 있습니다

JavaScript는 페이지의 모든 CSS 스타일을 변경할 수 있습니다

JavaScript는 페이지의 모든 이벤트에 반응할 수 있습니다

HTML 요소 찾기

일반적으로 JavaScript를 사용하면 HTML 요소를 조작해야 합니다.

이 작업을 수행하려면 먼저 요소를 찾아야 합니다. 이를 수행하는 방법에는 세 가지가 있습니다.

ID로 HTML 요소 찾기

태그 이름으로 HTML 요소 찾기

클래스 이름으로 HTML 요소 찾기

ID로 HTML 요소 찾기

DOM에서 HTML 요소를 찾는 가장 쉬운 방법 방법은 요소의 ID를 사용하는 것입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="intro">你好世界!</p>
<p>该实例展示了 <b>getElementById</b> 方法!</p>
<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>
</body>
</html>

요소가 발견되면 메소드는 요소를 객체(x에서)로 반환합니다.

요소를 찾을 수 없으면 x에 null이 포함됩니다.

태그 이름으로 HTML 요소 찾기

이 예에서는 id="main"인 요소를 찾은 다음 id="main" 요소에서 모든 <p> 요소를 찾습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>
</body>
</html>

클래스 이름으로 HTML 요소 찾기

이 예에서는 getElementsByClassName 함수를 사용하여 class="intro"가 있는 요소를 찾습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p class="intro">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>
<p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p id="intro">你好世界!</p> <p>该实例展示了 <b>getElementById</b> 方法!</p> <script> x=document.getElementById("intro"); document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>"); </script> </body> </html>

제출하다 코드 재설정

자동운전