Javascript与HTML DOM_javascript 和 html dom-优快云博客

本文链接：https://blog.youkuaiyun.com/sun9979/article/details/85205708

本文深入探讨HTMLDOM（文档对象模型）的概念及其在网页动态化中的应用。HTMLDOM为HTML提供了一套标准的对象和方法，使我们能够通过如JavaScript等编程语言访问和操作网页元素，实现动态内容更改、CSS样式调整及事件响应等功能。

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

首先来说一说HTML DOM：

HTML DOM（文档对象模型）Document Object Model For HTML

HTML DOM中定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。

通过DOM，可以访问所有的HTML的元素（应该就是标签），连同它们所包含的文本和属性。可以对其中的内容进行增删改查的操作。

总的来说，HTML DOM 独立于平台和编程语言。它可以被Javascript,java等使用。

Javascript可以通过操作HTML DOM来创建动态的HTML。

Javascript可以改变页面中的所有HTML的元素和其属性
Javascript可以改变页面中的所有CSS样式
Javascript可以对页面中的所有时间做出反应

Javascript要改变某一个元素就应该先找到这个元素，主要通过三种方式：

通过id查找
通过标签名查找
通过类名查找

通过id查找：（通过类名查找同理，只不过将id换成class）

<p id="info"> bbbbbbbbeautiful!</p>
<script>
x=document.getElementById("info");<!-- 通过id查找到-->
document.write("<p>I am <br>",x.innerHTML,"</p>");<!--以p标签的形式输出(只是中间多了个换行)-->
</script>

通过标签名查找：（得到的是一个集合）

<p> bbbbbbbbeautiful!</p>
<p>hhhhhhandsome!</p>
<script>
x=document.getElementByTagName("p");<!-- 通过id查找到-->
document.write('第一个p标签:',x[0].innerHTML);<!--以p标签的形式输出(只是中间多了个换行)-->
</script>