HTML DOM

会写码的猿

已于 2023-08-26 20:33:08 修改

阅读量60

点赞数

文章标签： html javascript 前端

于 2023-08-26 20:26:09 首次发布

本文链接：https://blog.csdn.net/ggg11232/article/details/132515436

版权

本文介绍了HTML DOM，它是跨平台和语言无关的接口，可让开发者用JavaScript访问和修改HTML文档。阐述了HTML DOM概念，如节点、元素、属性等。还讲解了访问HTML元素的方法，以及如何进行修改，包括内容、样式、属性等，最后列举了HTML事件的例子。

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

HTML DOM是一种跨平台和语言无关的接口，它定义了如何访问和操作 HTML 和 XML 文档的内容和结构。通过 DOM，开发者可以使用 JavaScript 来访问和修改文档的元素、属性和内容。

HTML DOM 将 HTML 文档视为一个由节点和对象组成的层次结构。每个 HTML 元素都可以看作是一个节点，这些节点可以通过各种方式相互连接。

HTML DOM 概念：

节点：HTML 文档中的每个部分都是一个节点，包括元素、属性和文本。

元素：HTML 文档的基本组成部分。

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

属性：附加到 HTML 元素上的特性。
```
<body>
 
<p id="intro">Hello World!</p>
 
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
 
</body>
```
获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。在上面的例子中，getElementById 是一个方法，而 innerHTML 是属性。

4.HTML DOM 访问

访问 HTML 元素等同于访问节点您能够以不同的方式来访问 HTML 元素：

通过使用 getElementById() 方法
```
document.getElementById("intro");
```
通过使用 getElementsByTagName() 方法
```
document.getElementsByTagName("p");
```
通过使用 getElementsByClassName() 方法

document.getElementById("main").getElementsByTagName("p");

5.HTML DOM 修改

改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）

通过 HTML DOM，您能够访问 HTML 元素的样式对象。下面的例子改变一个段落的 HTML 样式：

<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
 
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

6.HTML DOM事件

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

为 button 元素分配 onclick 事件：

document.getElementById("myBtn").onclick=function(){displayDate()};

HTML DOM

节点：HTML 文档中的每个部分都是一个节点，包括元素、属性和文本。

元素：HTML 文档的基本组成部分。

属性：附加到 HTML 元素上的特性。

获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。在上面的例子中，getElementById 是一个方法，而 innerHTML 是属性。

4.HTML DOM 访问

5.HTML DOM 修改

6.HTML DOM事件