< p>JavaScript 是一种用于网页交互的语言，可以在网页上添加动态效果和交互功能。引用 body 是 JavaScript 中常用的一种技术，它可以改变页面中 body 元素的属性或内容，进而实现特定的交互效果。在本文中，我们将详细介绍如何使用 JavaScript 引用 body 元素，同时通过示例演示其具体应用。< p>在 JavaScript 中引用 body 元素的方法非常简单。我们可以使用 document.body 对象来获取 body 元素，并对其进行操作。例如，我们可以修改 body 的背景颜色、文本内容、样式等属性：< pre>document.body.style.backgroundColor = "yellow";
document.body.innerHTML = "Hello, World!";
document.body.style.color = "red";< p>上面的代码首先将 body 的背景颜色设置为黄色，然后将其文本内容修改为"Hello, World!"，最后将字体颜色设置为红色。当我们在浏览器中打开页面时，就能看到页面背景变成了黄色，文本内容变成了"Hello, World!"，字体颜色变成了红色。< p>除了修改 body 的属性之外，我们还可以通过引用 body 元素来添加或删除其它元素。例如，我们可以使用 createElement() 方法来创建新的元素，并将其添加到 body 中：< pre>var newDiv = document.createElement("div");
newDiv.innerHTML = "This is a new div.";
document.body.appendChild(newDiv);< p>上述代码通过 createElement() 方法创建了一个新的 div 元素，并将其内容设置为"This is a new div."，最后使用 appendChild() 方法将其添加到 body 中。当我们打开页面时，就能看到在页面中新增了一个带有"This is a new div." 文本内容的 div 元素。< p>在实际开发中，我们通常会使用 jQuery 库来简化 JavaScript 中操作 body 元素的代码。 jQuery 提供了大量的 DOM 操作方法，例如 $()、addClass()、hasClass()、html()、append() 等，这些方法能够便捷地实现对 body 元素的操作。例如，我们可以使用 jQuery 操作 body 元素来实现点击按钮时切换页面背景颜色的效果：< pre>$(document).ready(function() {
$("#btn").click(function() {
if($("body").hasClass("yellow")) {
$("body").removeClass("yellow").addClass("blue");
} else {
$("body").removeClass("blue").addClass("yellow");
}
});
});< p>上述代码首先使用 $() 方法获取页面加载完成后的文档对象，然后在点击按钮时切换 body 的类名，从而实现页面背景颜色的切换。当页面加载完成后，如果点击按钮则会将 body 的类名从"yellow"切换为"blue"，背景颜色也会随之切换。< p>JavaScript 引用 body 元素是开发中经常使用的技术之一，它能够实现各种交互效果和动态效果，让网页看起来更加生动和有趣。我们可以使用 document.body 对象或 jQuery 库来引用 body 元素，并根据实际需求进行灵活的操作。相信通过本文的介绍，你已经掌握了 JavaScript 中引用 body 元素的方法和应用。