参考资料

  1. HTML DOM 返回文档中表单数目
  2. HTML DOM 改变一个iframe的src
  3. HTML DOM 返回和设置链接的charset属性实例
  4. HTML DOM 改变链接的target属性实例
  5. HTML DOM 返回image的替代文本
  6. HTML DOM在下拉列表中选择多个选项
  7. HTML DOM 提交表单
  8. HTML DOM改变下拉列表中被选中的选项的文本

HTML DOM 根节点

HTML DOM 根节点格式化

根节点介绍

HTML文档的根节点是<html>元素，它是DOM树的最顶层节点，包含整个文档内容。

主要标签

  • <html>: 文档根元素

  • <head>: 包含元信息和引用

  • <body>: 包含可见内容

基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

功能特性

  1. 定义文档类型和语言

  2. 包含文档元信息

  3. 组织页面结构

  4. 提供CSS和JavaScript的作用域

CSS扩展

可以通过根选择器:root或html元素来设置全局CSS变量和样式：

:root {
    --main-color: #06c;
    --padding: 15px;
    font-size: 16px;
}

html {
    scroll-behavior: smooth;
}

示例说明

1. 基本结构示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
</body>
</html>

2. 使用CSS变量

<!DOCTYPE html>
<html>
<head>
    <style>
        :root {
            --primary-color: blue;
            --secondary-color: green;
        }
        
        .box {
            color: var(--primary-color);
            border: 1px solid var(--secondary-color);
        }
    </style>
</head>
<body>
    <div class="box">这是一个带样式的盒子</div>
</body>
</html>

3. JavaScript访问根节点

// 获取根元素
const rootElement = document.documentElement;

// 修改根元素属性
rootElement.lang = "en";

// 添加CSS类
rootElement.classList.add("dark-theme");

根节点格式化是HTML文档的基础，正确的结构有助于浏览器解析和渲染页面。

TAG：节点文档结构格式化元素内容信息基本页面示例