HTML

📌 相关文章

📜 HTML | DOM 主体对象(1)

📅 最后修改于: 2023-12-03 15:31:12.747000 🧑 作者: Mango

HTML | DOM 主体对象

HTML (Hypertext Markup Language) 是用来描述网页的标记语言。DOM (Document Object Model) 是一种表示和操作HTML文档的对象模型。HTML和DOM主体对象是前端开发中不可或缺的两个概念。

HTML由一系列标记（tag）组成，用来描述网页的结构和内容。HTML文件通常以.html或.htm为扩展名，可以在浏览器上打开运行。

以下是一个HTML文档的基本结构：

<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    <h1>页面标题</h1>
    <p>页面内容</p>
  </body>
</html>

以上代码展示了一个HTML文档的基本结构，包括文档类型声明、文档头部（head）和文档主体（body），其中head用于定义页面元数据，如页面标题、字符集、样式表等等，而body则用于定义页面主体内容。

DOM

DOM是一种用于描述HTML文档结构的对象模型。通过DOM可以方便地访问和操作HTML文档中的元素、属性、事件等等。

DOM的核心对象是document，它代表了整个HTML文档。在JavaScript中，可以使用document对象对HTML文档进行各种操作，比如查找元素、添加元素、删除元素等等。

以下是一些常见的DOM操作：

// 访问元素
const element = document.getElementById('id');
const elements = document.getElementsByTagName('tagname');

// 添加元素
const newElement = document.createElement('tagname');
parentElement.appendChild(newElement);

// 删除元素
const elementToRemove = document.getElementById('id');
elementToRemove.parentElement.removeChild(elementToRemove);

// 修改元素属性
element.setAttribute('attrname', 'attrvalue');

// 响应事件
element.addEventListener('eventname', eventHandler);

以上代码展示了常见的DOM操作，包括访问元素、添加元素、删除元素、修改元素属性以及响应事件等等。

总结

HTML和DOM主体对象是前端开发中不可或缺的两个概念。了解HTML和DOM的基本结构和操作方法，可以使开发者处理网页开发的各种问题更加得心应手。