w3school JavaScript笔记2 ——JavaScript HTML DOM

最新推荐文章于 2024-07-08 23:20:41 发布

若耶溪coding

最新推荐文章于 2024-07-08 23:20:41 发布

阅读量379

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript w3school

本文链接：https://blog.youkuaiyun.com/beijingpengpeng/article/details/79330420

js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用JavaScript通过HTML DOM来改变HTML元素的内容、属性及样式。通过具体实例展示了如何利用getElementById方法选取元素并修改其innerHTML属性或直接更改属性值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

教程地址：http://www.w3school.com.cn/js/js_htmldom.asp

HTML DOM （文档对象模型）

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

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

HTML DOM 树

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。