document.body 对象通常用于访问和操作页面主体的内容，例如：
属性和方法：
1. innerHTML：
- 获取或设置 <body> 元素内部的 HTML 内容。
2. innerText 或 textContent：
- 获取或设置 <body> 元素内部的文本内容。
3. style：
- 获取或设置 <body> 元素的样式属性，允许动态更改外观。
4. appendChild() 和 removeChild()：
- 向 <body> 元素添加子节点或从中移除子节点。
5. addEventListener() 和 removeEventListener()：
- 添加或移除事件监听器，允许在页面加载、鼠标点击等事件发生时执行相应的操作。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Body Object Example</title>
</head>
<body>
<p id="demo">This is a paragraph.</p>
<script>
// 获取 body 对象
var bodyElement = document.body;
// 获取和设置 innerHTML
var currentInnerHTML = bodyElement.innerHTML;
console.log("Current innerHTML: " + currentInnerHTML);
bodyElement.innerHTML = "<h1>New Content</h1>";
// 获取和设置文本内容
var currentTextContent = bodyElement.textContent || bodyElement.innerText;
console.log("Current text content: " + currentTextContent);
bodyElement.textContent = "New Text Content";
// 设置样式
bodyElement.style.backgroundColor = "#f0f0f0";
bodyElement.style.color = "blue";
// 添加事件监听器
function handleClick() {
alert("Body Clicked!");
}
bodyElement.addEventListener("click", handleClick);
// 移除事件监听器
// bodyElement.removeEventListener("click", handleClick);
</script>
</body>
</html>
上述示例演示了如何通过 JavaScript 访问和操作 <body> 元素的对象。请注意，innerHTML 和 textContent 的用法可能因浏览器而异，因此在实际应用中可能需要谨慎使用。同样，样式和事件监听器的设置也是常见的操作，以动态地改变页面的外观和行为。
转载请注明出处：http://www.zyzy.cn/article/detail/4383/HTML