Java예제가 있는 스크립트 DOM 튜토리얼
제임스 하트만
DOM이란 무엇입니까? Java스크립트?
Java스크립트는 DOM(Document Object Model)을 사용하여 웹페이지의 모든 요소에 액세스할 수 있습니다. 사실, 웹 브라우저는 페이지가 로드될 때 웹페이지의 DOM을 만듭니다. DOM 모델은 다음과 같은 객체 트리로 만들어집니다.
DOM과 이벤트를 사용하는 방법
DOM을 사용하여, Java스크립트는 여러 작업을 수행할 수 있습니다. 새로운 요소와 속성을 만들고, 기존 요소와 속성을 변경하고, 기존 요소와 속성을 제거할 수도 있습니다. Java스크립트 또한 기존 이벤트에 반응하고 페이지에 새 이벤트를 만들 수도 있습니다.
getElementById, innerHTML 예
- getElementById: ID가 설정된 요소 및 속성에 액세스합니다.
- innerHTML: 요소의 콘텐츠에 액세스합니다.
다음 예제를 직접 시도해 보세요.
<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1 id="one">Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p>This is the technology section.</p>
<script type="text/javascript">
var text = document.getElementById("one").innerHTML;
alert("The first heading is " + text);
</script>
</body>
</html>
getElementsByTagName 예
getElementsByTagName: 태그 이름을 사용하여 요소 및 속성에 액세스합니다. 이 메소드는 정렬 동일한 태그 이름을 가진 모든 항목 중
다음 예제를 직접 시도해 보세요.
<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p id="second">This is the technology section.</p>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName("p");
alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
document.getElementById("second").innerHTML = "The orginal message is changed.";
</script>
</body>
</html>
이벤트 핸들러 예
- createElement: 새 요소를 생성합니다.
- RemoveChild: 요소 제거
- 추가할 수 있습니다 이벤트 핸들러 다음과 같은 특정 요소에:
document.getElementById(id).onclick=function()
{
lines of code to be executed
}
OR
document.getElementById(id).addEventListener("click", functionname)
다음 예제를 직접 시도해 보세요.
<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<input type="button" id="btnClick" value="Click Me!!" />
<script type="text/javascript">
document.getElementById("btnClick").addEventListener("click", clicked);
function clicked()
{
alert("You clicked me!!!");
}
</script>
</body>
</html>
