HTML | DOM 源对象大介绍

在Web开发中，HTML和DOM源对象扮演着非常重要的角色。HTML是HyperText Markup Language的缩写，是标记语言，用于创建网页和Web应用程序。DOM是文档对象模型的缩写。DOM表示用于处理HTML文档的树状结构。

HTML

什么是HTML？

HTML是一种标记语言，用于将文本、图像和其他媒体和计算机可处理的对象组织成Web页面和应用程序。

HTML的基本组成部分

元素

HTML的基本组成部分是元素。元素是标记语言中的一个概念，表示一个文本片段或其他对象，可以用来创建Web页面和应用程序。每个元素都有一个开始标记和结束标记，以及中间包裹的内容。例如：

<p>This is a paragraph</p>

上述代码中，“p”是开始标记，而“/p”是结束标记。而“This is a paragraph”则是被包裹在p标记中的文本内容。

属性

元素可以有属性，属性用于提供关于元素额外的信息，如样式等。例如：

<p style="color: red;">This paragraph is in red</p>

上述代码中，style是一个属性，它提供了一个内联样式表，使段落的文本颜色变成红色。

标签

HTML中的每个元素都与一个标签相关联。标签是封装元素的开始和结束标记。在上面的代码中，“p”和“/p”标签是段落元素的开始和结束标记。

HTML的DOM表示

HTML的DOM表示是一个树状结构，每个节点表示HTML文档的一个元素。在DOM中，HTML元素（如p、div、span等）被表示为节点树状结构的节点对象。

DOM源对象

什么是DOM源对象？

DOM源对象是浏览器提供的一个API，用于动态修改HTML和XML文档。它是一个表示文档元素的对象集合，可以通过JavaScript来操作和修改。

DOM源对象的基本组成部分

文档对象模型

文档对象模型（DOM）是一种跨平台和语言无关的编程接口，用于处理HTML和XML文档。DOM它可用于从 HTML 或 XML 中访问和修改文档内容。 它将整个文档表示为一个对象树，每个部分都可以通过 JavaScript 进行访问和修改。

节点

在DOM中，HTML元素（如p、div、span等）被表示为节点树状结构的节点对象。节点可以是元素、属性、文本或注释等。

元素对象

元素对象是文档中的元素节点表示。元素对象是节点对象的一种，具有特定的属性和方法。属性包括 class、id、style、innerHTML 等，方法包括 getAttribute()、removeAttribute() 等。

如何使用DOM源对象？

使用DOM源对象可以直接操作HTML文档，可以添加、删除和修改HTML元素、属性、文本等。

例如:

//获取元素对象
var p = document.getElementById("my-paragraph");
//修改元素内容
p.innerHTML = "New content";
//修改元素样式
p.style.color = "red";

上述代码中，我们首先使用getElementById()方法获取一个ID为“my-paragraph”的元素，然后使用innerHTML属性和style属性来修改此元素。

结论

HTML和DOM源对象是Web开发的核心内容之一。了解HTML的基本组成部分和DOM源对象可以使开发人员更好地使用HTML、CSS和JavaScript来构建优美的Web应用程序。