JS获取body|极客笔记

JS获取body

在网页开发中，经常需要通过JavaScript来获取DOM元素的信息和操作DOM元素。其中，获取body元素是非常常见的操作，可以用来对整个页面进行操作。

在JavaScript中，可以通过document对象的body属性来获取页面中的body元素。下面我们就来详细讲解如何通过JS获取body元素。

通过document对象获取body元素

在JavaScript中，document对象代表整个HTML文档，通过document对象可以访问文档中的所有元素。要获取页面中的body元素，只需要使用document对象的body属性即可。

var body = document.body;
console.log(body);

上面的代码通过document.body来获取页面中的body元素，并将结果打印到控制台。通过这种方式我们就可以获取到页面中的body元素。

示例

下面我们通过一个简单的示例来演示如何使用JavaScript来获取页面中的body元素，并对其进行操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS获取body</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
    <button onclick="changeColor()">改变背景颜色</button>

    <script>
        function changeColor() {
            var body = document.body;
            body.style.backgroundColor = 'lightblue';
        }
    </script>
</body>
</html>

在上面的示例中，我们通过JavaScript获取到了页面的body元素，并定义了一个函数changeColor()，当点击按钮时会调用该函数，并将body元素的背景颜色改变为浅蓝色。