HTML DOM

最新推荐文章于 2022-05-03 21:39:28 发布

平凡的Mac

最新推荐文章于 2022-05-03 21:39:28 发布

阅读量555

点赞数

分类专栏： javascript

javascript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

1.JavaScript HTML DOM - 改变 HTML

改变<p>元素内容:

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>

JavaScript HTML DOM - 改变 CSS

改变 HTML 元素的样式：
<h1 id="id1">My Heading 1</h1>

<button type="button" οnclick="document.getElementById('id1').style.color='red'">
点击这里
</button>
显示或者隐藏盒子:
<!DOCTYPE html>
<html>
<head>
<style>
#main1{width:500px;height:200px;border:2px solid red;}
</style>
</head>
<body>
<p id="main1"></p>
<input type="button" value="隐藏盒子" οnclick="document.getElementById('main1').style.visibility='hidden'" />
<input type="button" value="显示盒子" οnclick="document.getElementById('main1').style.visibility='visible'" />
</body>
</html>