HTML | DOM 代码对象

简介

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，DOM（Document Object Model）是HTML文档的对象表示方式。在web开发中，HTML和DOM对象是程序员必须掌握的基本概念之一。

HTML | DOM 代码对象是指HTML和DOM对象在“代码”形式上的表现形式。在开发过程中，程序员需要用代码来操作HTML | DOM对象，从而实现页面的交互和效果。

HTML代码对象

HTML代码对象指的是用代码形式创建HTML元素的对象。在JavaScript中，我们可以通过以下方式来创建HTML代码对象：

const element = document.createElement(tagName);

其中tagName表示要创建的元素的标签名。例如：

const pElement = document.createElement('p');

这段代码会创建一个<p>元素的HTML代码对象。

DOM代码对象

DOM代码对象指的是用代码形式访问和操作HTML文档中已有的DOM元素的对象。在JavaScript中，我们可以通过以下方式来获取DOM代码对象：

const element = document.getElementById(elementId);

其中elementId表示要获取的元素的ID。例如：

const pElement = document.getElementById('myParagraph');

这段代码会获取ID为myParagraph的元素的DOM代码对象。获取到DOM代码对象后，我们就可以通过修改它的属性、添加/删除它的子元素等方式来动态改变页面的展示。

示例代码

下面是一个通过创建HTML | DOM代码对象来动态创建页面的示例代码：

const body = document.querySelector('body');

// 动态创建一个标题元素
const heading = document.createElement('h1');
heading.textContent = '这是一个标题';
body.appendChild(heading);

// 动态创建一个段落元素
const paragraph = document.createElement('p');
paragraph.textContent = '这是一个段落';
body.appendChild(paragraph);

// 获取一个元素的DOM代码对象，并动态改变它的样式
const existingElement = document.getElementById('existingElement');
existingElement.style.color = 'red';

这段代码会在页面上动态创建一个标题和一个段落，同时还会获取ID为existingElement的元素的DOM代码对象，并将它的样式改为红色。