参考资料

  1. HTML DOM 返回图像映射某个区域的坐标实例
  2. HTML DOM 返回一个iframe中的longdesc属性的值
  3. HTML DOM 返回image的name
  4. HTML DOM改变表格的cellpadding和cellspacing
  5. HTML DOM 根节点childNodes 和 nodeValue
  6. HTML DOM 元素
  7. HTML DOM 返回表单中的enctype属性的值
  8. HTML DOM 返回加载的当前文档的URL实例

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：节点文档结构格式化元素内容信息基本页面示例