HTML DOM 수정
HTML = 변화 요소, 속성, 스타일 및 이벤트를 수정합니다.
편집 HTML 요소
HTML DOM은 여러 가지 측면을 의미 수정 :
- HTML 내용을 변경
- 변경 CSS 스타일
- 는 HTML 속성 변경
- 새로운 HTML 요소 만들기
- 기존의 HTML 요소를 제거
- 변경 이벤트 (핸들러)
다음 섹션에서, 우리는 종래의 방법을 수정 깊이에서 HTML DOM을 공부합니다.
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 요소 만들기
되는 HTML DOM에 새 요소를 추가하려면 먼저 요소 (요소 노드)를 만든 다음 기존 요소에 추가해야합니다.
예
<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
»시도