DOM HTML
HTML DOM을 사용하면 JavaScript가 HTML 요소의 내용을 변경할 수 있습니다.
HTML 출력 스트림 변경
JavaScript는 동적 HTML 콘텐츠를 생성할 수 있습니다.
오늘 날짜:
Tue Oct 18 2016 09:59:23 GMT+0800
JavaScript에서는 document.write()를 사용할 수 있습니다. 내용 쓰기 HTML 출력 스트림에 직접 연결됩니다.
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <script> document.write(Date()); </script> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
 | 绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。 |
|---|
HTML 콘텐츠 변경
HTML 콘텐츠를 수정하는 가장 간단한 방법은 innerHTML 속성을 사용하는 것입니다.
HTML 요소의 콘텐츠를 변경하려면 다음 구문을 사용하세요.
이 예는 <p> 요소의 내용을 변경합니다.
예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>
</body>
</html>실행 예»
온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요.
이 예는 <h1> 요소의 내용을 변경합니다.
예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1 id="header">旧标题</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
<p>"旧标题" 被 "新标题" 取代。</p>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
인스턴스 설명 :
위 HTML 문서에는 id="header"인 <h1> 요소가 포함되어 있습니다.
우리는 HTML DOM을 사용합니다. id="header"로 요소를 가져오려면
JavaScript 이 요소의 콘텐츠를 변경합니다(innerHTML)
HTML 속성 변경
HTML 요소의 속성을 변경하려면 다음 구문을 사용하세요:
이 예에서는 <img> 요소의 src 속성을 변경합니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<img id="image" src="/upload/course/000/000/009/580469a2a27e3327.gif" width="160" height="120">
<script>
document.getElementById("image").src="/upload/course/000/000/009/58058303e12c0481.jpg";
</script>
<p>原图片为 /upload/course/000/000/009/580469a2a27e3327.gif,脚本将图片修改为/upload/course/000/000/009/58058303e12c0481.jpg</p>
</body>
</html>인스턴스 실행 »
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
인스턴스 설명:
위 HTML 문서에는 id= "image"의 <img> 요소가 포함되어 있습니다.
우리는 id=인 요소를 가져오기 위해 HTML DOM을 사용합니다. image"
이 요소 속성을 변경하는 JavaScript("/upload/course/000/000/009/58058303e12c0481.jpg"를 "/upload/course/000/000/009로 변경) /580469a2a27e3327.gif
")
