HTML DOM body 属性 | HTML DOM Document 对象

返回到:DOM 对象:HTML DOM Document 对象

定义与用法

body 属性用于设置或返回文档体。

如果是返回, 该属性返回当前文档的 <body> 元素。

如果是设置, 该属性会覆盖所有在 <body> 元素中的子元素, 并用新的内容来替换它。

提示: 与 document.documentElement 属性不同的是, document.body 属性返回 <body> 元素, document.documentElement 属性返回 <html> 元素。

浏览器支持:

主流浏览器都支持。

语法

返回 body 属性:

document.body

设置 body 属性:

document.body = newContent

属性

描述
newContent指定 <body> 的新内容

技术细节

DOM 版本:Core Level 1 Document Object
返回值:Body 对象的引用,表示 <body> 元素

实例

修改当前文档的背景颜色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
</head>
<body>

<p>点击按钮修改当前文档的背景颜色。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    document.body.style.backgroundColor = "yellow";
}
</script>

</body>
</html>

获取当前文档的 HTML 你内容:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
</head>
<body>

<p>点击按钮显示文档的 HTML 的内容。</p>

<button onclick="myFunction()">点我</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.body.innerHTML;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

修改当前文档的 HTML 内容:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
</head>
<body>

<p>点击按钮修改文档的 HTML 的内容。</p>

<button onclick="myFunction()">点我</button>

<p id="demo"></p>

<script>
function myFunction() {
    document.body.innerHTML = "新的内容...";
}
</script>

</body>
</html>

创建 <p> 元素,并将其添加在文档中:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
</head>
<body>

<p>点击按钮创建 p 元素及其内容,并将其添加在文档中。</p>

<button onclick="myFunction()">点我</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.createElement("P");
    var t = document.createTextNode("这是新增的段落。");
    x.appendChild(t);
    document.body.appendChild(x);
}
</script>

</body>
</html>

作者:terry,如若转载,请注明出处:https://www.web176.com/javascriptbook/domtips/4579.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年12月14日 下午3:31
下一篇 2021年12月14日 下午3:40

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注