前言
JavaScript这门语言在一定程度上让我们html之间耦合度降低了,为什么这样说呢?JavaScript语言一样可以可以随意写入html页面一些东西,比如:JavaScript的DOM可以改变html的输出、内容、属性,下面通过几个例子加以说明。
内容
DOM改变 HTML输出
语法:
<script> document.write(); </script>
例子:(输出时间)
<!DOCTYPE html> <html> <body> <script> document.write("zhoulitong"); </script> </body> </html>
DOM改变 HTML内容
语法:
document.getElementById(id).innerHTML=new HTML
例子:(改变标题内容)
<!DOCTYPE html> <html> <body> <p id="p1">Hello JavaScript!</p> <script> document.getElementById("p1").innerHTML="YES!"; </script> <p>宝宝刚才的内容被残忍的修改了···</p> </body> </html>
DOM改变 HTML属性
语法:
document.getElementById(id).attribute=new value
例子:(点击按钮改变图片属性)
<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html> <html> <body> <img id="img" src="/i/shanghai_lupu_bridge.jpg" /> <button type="button" onclick="myfunction()" >点我 </button> <script> function myfunction() { document.getElementById("img").src="/i/eg_tulip.jpg"; } </script> </body> </html></span>