前言

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>

巴特西

JavaScript之DOM HTML

前言

内容

DOM改变 HTML输出

DOM改变 HTML内容

DOM改变 HTML属性

最新文章

热门文章