【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>

执行结果 :

相关推荐
susu10830189112 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾3 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking4 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu6 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym10 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫11 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫15 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat17 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app