What is JavaScript HTML DOM?-JS Tutorial-php.cn

Table of Contents

我的标题 1

Home

Web Front-end

JS Tutorial

What is JavaScript HTML DOM?

黄舟

Aug 04, 2017 am 10:28 AM

html javascript js

What is JavaScript HTML DOM?

Through the HTML DOM, all elements of the JavaScript HTML document can be accessed.

HTML DOM (Document Object Model)

When a web page is loaded, the browser creates the Document Object Model of the page.

Through the programmable object model, JavaScript has gained enough power to create dynamic HTML.

What is JavaScript HTML DOM?

RecommendedJavaScript TutorialLearning Course

1.JavaScript HTML

HTML DOM allows JavaScript to change the content of HTML elements.

<!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>

Copy after login

Course link: http://www.php.cn/code/3743.html

2.JavaScript HTML DOM - Change CSS

There are 4 ways to modify CSS in JavaScript:

Modify node style (inline style);

Change node class or id;

Write new css;

Replace the style sheet in the page.

<!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>

Copy after login

Course link: http://www.php.cn/code/3748.html

##3. JavaScript HTML DOM events

HTML DOM gives JavaScript the ability to react to HTML events.

<!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>

Copy after login

Course link: 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>

Copy after login

Course link:

http://www.php.cn/code/3755.html

5. JavaScript HTML DOM Elements

To add a new element to the HTML DOM, you must first create the element (element node) and then append the element to an existing element.

<!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>

Copy after login

Course link:

http://www.php.cn/code/3757.html

The above is the detailed content of What is JavaScript HTML DOM?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn