HTML DOM - HTML 콘텐츠 수정
JavaScript는 HTML DOM을 통해 HTML 문서의 모든 요소에 액세스할 수 있습니다.
HTML 콘텐츠 변경
요소의 콘텐츠를 변경하는 가장 쉬운 방법은 innerHTML 속성을 사용하는 것입니다.
다음 예에서는 <p> 요소의 HTML 콘텐츠를 변경합니다.
Example
<html><!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>예제 실행»
온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요
HTML 변경 style
HTML DOM을 통해 HTML 개체의 스타일 개체에 액세스할 수 있습니다.
다음 예제는 단락의 HTML 스타일을 변경합니다.
Example
<html><!DOCTYPE html>
<html>
<body>
<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
</body>
</html>예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
이벤트 사용
HTML DOM 이벤트가 발생하면 코드가 실행될 때 이벤트를 사용할 수 있습니다.
HTML 요소에 "뭔가 발생"하면 브라우저는 이벤트를 생성합니다.
요소를 클릭합니다.
페이지 로드
입력 필드 변경
에서 자세히 알아볼 수 있습니다. 다음 장에서 이벤트에 대해 자세히 알아보세요.
다음 두 가지 예는 버튼을 클릭할 때 <body> 요소의 배경색을 변경합니다.
Instance
<html><!DOCTYPE html> <html> <body> <input type="button" onclick="document.body.style.backgroundColor='lavender';" value="Change background color"> </body> </html>
Run Instance»
온라인 예를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
이 기사에서는 동일한 코드가 다음 함수에 의해 실행됩니다.
Instance
<html><!DOCTYPE html>
<html>
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()" value="Change background color" />
</body>
</html>예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
The 아래 예는 버튼을 클릭하면 변경됩니다.<p> 요소의 텍스트:
Instance
<html><!DOCTYPE html>
<html>
<body>
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>
<input type="button" onclick="ChangeText()" value="Change text" />
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요
