【Web APIs】DOM 文档对象模型 ⑤ ( 获取特殊元素 | 获取 html 元素 | 获取 body 元素 )

文章目录

本博客相关参考文档 :

一、获取特殊元素


HTML 网页的基本结构如下 :

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
</body>

</html>

在 HTML 标签结构中 ,

  • html 标签是最顶层的标签 , 所有的元素都在 html 标签内部 ,
  • body 标签是显示部分内容的 顶层标签 ;

通过 JavaScript 和 DOM 操作 可以获取上述两个 html 和 body 特殊标签 元素 ;

1、获取 html 元素

通过 document.documentElement 属性 , 可以获取文档中的 html 元素 , 该元素是 HTML 网页文档的最顶层元素 ;

代码示例 :

javascript 复制代码
const htmlElement = document.documentElement;
console.log(htmlElement); // 输出整个 <html> 元素的 DOM 对象

2、获取 body 元素

使用 document.body 属性 , 可以获取 body 元素 ;

代码示例 :

javascript 复制代码
const bodyElement = document.body;
console.log(bodyElement); // 输出整个 <body> 元素的 DOM 对象

3、完整代码示例

在下面的代码中 , 通过 document.body 获取 body 元素 , 将背景颜色设置为黄色 ;

通过 document.documentElement 获取 html 元素 , 将该标签下的所有字体大小设置为 30 像素 ;

代码示例 :

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
</head>

<body>
    <div class='box'>Hello</div>
    <div class='box'>Hello</div>
    <div>Hello</div>
    <div>Hello2</div>

    <div id="nav">
        <div>Hello2</div>
        <div class='box'>Hello2</div>
        <div class='box'>Hello2</div>
    </div>

    <script>
        // 注意 : HTML 文档加载顺序是从上到下加载 
        // 这里要先加载标签 , 然后加载 JavaScript 脚本

        // 设置 <body> 元素的背景颜色
        document.body.style.backgroundColor = 'yellow';

        // 设置 <html> 元素的字体大小
        document.documentElement.style.fontSize = '30px';

        // 获取 <body> 元素的子节点数量
        const bodyChildrenCount = document.body.children.length;
        console.log(`Body 元素的子节点数量: ${bodyChildrenCount}`);
    </script>
</body>

</html>

执行结果 :

相关推荐
attitude.x4 分钟前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java8 分钟前
CSS3核心技术
前端·css·css3
空山新雨(大队长)21 分钟前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术1 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫1 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓1 小时前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java1 小时前
CSS的文本样式
前端·css
前端小趴菜051 小时前
css - 滤镜
前端·css
祈祷苍天赐我java之术1 小时前
理解 CSS 浮动技术
前端·css