JavaScript HTML DOM

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000018241113

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用JavaScript操作HTML文档对象模型(DOM)，包括通过不同方式选择元素、改变HTML内容、属性和样式，以及响应事件。

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

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
操作HTML元素，有三种方法：
通过 id 找到 HTML 元素 //getElementById("intro")
通过标签名找到 HTML 元素 //getElementsByTagName("p")
通过类名找到 HTML 元素
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
document.getElementById(id).innerHTML=new HTML;
改变 HTML 属性
// document.getElementById("image").src="landscape.jpg";
操作方法.需要更改的属性=new value;
改变 HTML 样式
document.getElementById(id).style.property=new style
// document.getElementById("p2").style.color="blue";