JavaScript中的document对象是浏览器提供的全局对象，它代表了整个HTML文档，通过操作document对象，我们可以获取和修改网页的内容、样式以及执行各种与文档相关的操作，下面将详细介绍document对象的属性及其作用。
1. document.all
document.all是一个只读属性，它返回一个包含当前文档中所有元素的集合，这个集合是一个动态集合，当文档内容发生变化时，集合中的元素也会相应地更新，要访问集合中的元素，可以使用索引或循环遍历的方式。
// 使用索引访问集合中的元素 var element = document.all[0]; // 获取集合中的第一个元素 // 使用循环遍历集合中的元素 var elements = document.all; for (var i = 0; i < elements.length; i++) { var element = elements[i]; // 对每个元素进行操作 }
需要注意的是，由于document.all是一个动态集合，所以在某些情况下可能会导致性能问题，在现代浏览器中，推荐使用document.querySelectorAll()方法来获取文档中的元素。
2. document.body
document.body是一个只读属性，它返回表示文档主体(即<body>标签)的节点对象，通过操作document.body,可以获取和修改文档主体的内容、样式以及添加/移除DOM元素等。
// 获取文档主体节点对象 var body = document.body; // 修改文档主体的内容 body.innerHTML = 'Hello, World!'; // 将文档主体的内容设置为"Hello, World!" // 修改文档主体的样式 body.style.backgroundColor = 'red'; // 将文档主体的背景颜色设置为红色
需要注意的是，如果页面中有多个<body>标签，那么document.body将返回第一个出现的<body>标签节点对象，如果需要选择特定的<body>标签，可以使用其他选择器方法，如document.getElementsByTagName('body')[0]。
3. document.createElement()
document.createElement()是一个常用的方法，用于创建新的DOM元素，可以通过传入元素的标签名作为参数来创建指定类型的元素。
// 创建一个新的<div>元素
var div = document.createElement('div');
除了标签名之外，还可以传入其他参数来指定元素的属性、样式等信息。
// 创建一个新的<div>元素并设置其文本内容和样式
var div = document.createElement('div');
div.textContent = 'Hello, World!'; // 设置文本内容为"Hello, World!"
div.style.color = 'red'; // 设置文本颜色为红色
创建的元素默认不会添加到文档中，需要将其添加到合适的位置才能显示在页面上，这可以通过调用元素的父节点的相应方法来实现，如父节点的.appendChild()方法。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/135366.html
微信扫一扫 