HTML DOM - 수정
HTML 수정 = 요소, 속성, 스타일 및 이벤트를 변경합니다.
HTML 요소 수정
HTML DOM 수정은 다양한 의미를 갖습니다.
HTML 콘텐츠 변경
CSS 스타일 변경
HTML 속성 변경
만들기 새로운 HTML 요소
기존 HTML 요소 삭제
Change 이벤트(핸들러)
다음 장에서는 HTML DOM을 수정하는 일반적인 방법을 심층적으로 학습하겠습니다.
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 스타일 변경
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 요소 만들기
HTML DOM에 새 요소를 추가해야 하는 경우 먼저 요소(요소 노드)를 만든 다음 기존 요소에 추가해야 합니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
