Home > Article > Web Front-end > What is JavaScript HTML DOM?

What is JavaScript HTML DOM?

黄舟Original: 2017-08-04 10:28:441323browse

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>

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="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById(&#39;id1&#39;).style.color=&#39;red&#39;">
点我!</button>
</body>
</html>

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>

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>

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>

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：

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

Previous article：Summary of JavaScript array operationsNext article：Summary of JavaScript array operations

See more

What is JavaScript HTML DOM?

Related articles