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

执行结果 :

相关推荐
EasyNTS40 分钟前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜2 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点2 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow2 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o2 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic3 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā3 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年4 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder5 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727575 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架