Home > Article > Web Front-end > What is JavaScript HTML DOM?
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.
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('id1').style.color='red'"> 点我!</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!