JavaScript HTML DOM이란 무엇입니까?-JS 튜토리얼-php.cn

我的标题 1

집

웹 프론트엔드

JS 튜토리얼

JavaScript HTML DOM이란 무엇입니까?

黄舟

Aug 04, 2017 am 10:28 AM

html javascript js

JavaScript HTML DOM이란 무엇인가요?

HTML DOM을 통해 JavaScript HTML 문서의 모든 요소에 액세스할 수 있습니다.

HTML DOM(문서 개체 모델)

웹 페이지가 로드되면 브라우저는 페이지의 문서 개체 모델을 생성합니다.

프로그래밍 가능한 개체 모델을 통해 JavaScript는 동적 HTML을 생성할 수 있는 충분한 성능을 얻었습니다.

JavaScript HTML DOM이란 무엇입니까?

추천JavaScript 튜토리얼학습 코스

1.JavaScript HTML

HTML DOM을 사용하면 JavaScript가 HTML 요소의 내용을 변경할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>
</body>
</html>

로그인 후 복사

강의 링크:http://www.php.cn/code/3743.html

2.JavaScript HTML DOM - CSS 변경

JavaScript 수정 CS S 4가지 방법이 있습니다:

노드 스타일 수정(인라인 스타일);

노드 클래스 또는 ID 변경

새 CSS 작성

페이지에서 스타일 시트 교체.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 id="我的标题-nbsp">我的标题 1</h1>
<button type="button" onclick="document.getElementById(&#39;id1&#39;).style.color=&#39;red&#39;">
点我!</button>
</body>
</html>

로그인 후 복사

과정 링크:http://www.php.cn/code/3748.html

3. JavaScript HTML DOM 이벤트

HTML DOM을 사용하면 JavaScript가 다음에 반응할 수 있습니다. HTML 이벤트.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
<button onclick="displayDate()">试一试</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>

로그인 후 복사

강좌 링크:http://www.php.cn/code/3752.html

4.JavaScript HTML DOM EventListener

<!DOCTYPE html> 
<html>
<meta charset="utf-8"> 
<body> 
<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
 <p>点击按钮执行计算。</p>
 <button id="myBtn">点我</button> 
 <p id="demo"></p> 
 <script> 
 var p1 = 5; var p2 = 7; 
 document.getElementById("myBtn").addEventListener("click", function() { 
 myFunction(p1, p2);
 });
 function myFunction(a, b) { 
 var result = a * b; 
 document.getElementById("demo").innerHTML = result; 
 } 
 </script> 
 </body> 
 </html>

로그인 후 복사

강좌 링크:http://www.php .cn/code/3755.html

5.JavaScript HTML DOM 요소

HTML DOM에 새 요소를 추가하려면 먼저 요소(요소 노드)를 만든 다음 기존 요소에 추가해야 합니다. 요소.

<!DOCTYPE html> 
<html> 
<meta charset="utf-8">
<body>
 <div id="div1"> 
<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("div1"); 
element.appendChild(para); 
</script> 
</body>
 </html>

로그인 후 복사

강좌 링크: http://www.php.cn/code/3757.html

위 내용은 JavaScript HTML DOM이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.