HTML DOM HTML 편집 내용
표시되는 HTML DOM 통해 JavaScript는 각 요소의 HTML 문서를 액세스 할 수있다.
HTML 내용을 변경
요소의 내용을 변경하는 가장 쉬운 방법은 innerHTML 속성을 사용하는 것이다.
다음 예는 HTML 내용의 <p> 요소를 변경합니다
예
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
»시도
변경 HTML 스타일
되는 HTML DOM을 통해, 당신은 객체의 HTML 스타일 개체에 액세스 할 수 있습니다.
다음 예제는 HTML 단락 스타일을 변경합니다
예
<html>
<body>
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
»시도
사용 이벤트
HTML DOM 이벤트가 발생할 때 코드를 실행할 수있다.
하면 "일이 일어나고있는"HTML 요소는 브라우저가 이벤트를 생성합니다 :
- 요소를 클릭
- 로드 페이지
- 입력 필드를 변경합니다
당신은 다음 장에서 이벤트에 대해 자세히 알아볼 수 있습니다.
다음은 배경색을 변경하는 두 가지 예를 다음의 <몸> 버튼의 요소를 클릭 :
예
<html>
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
»시도
이 경우, 함수는 동일한 코드를 수행
예
<html>
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
»시도
다음은 버튼의 텍스트 <P> 요소를 클릭 할 때 변경 :
예
<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>
<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>
»시도