JavaScript Document对象的常用属性
Document对象是JavaScript中的一个内置对象，它代表了整个HTML文档，通过操作Document对象，我们可以访问和修改网页中的各种元素，以下是一些常用的Document对象属性：
1、document.all
document.all是一个用于遍历所有HTML元素的集合，它返回一个包含页面上所有元素的动态集合，包括内联元素、嵌套框架和图片，由于这个集合会随着页面的刷新而不断变化，所以在现代浏览器中，这个属性已经被废弃，建议使用document.getElementsByTagName或querySelectorAll来替代。
2、document.body
document.body表示HTML文档的<body>元素，可以通过它来访问和修改页面中的主体内容，可以通过设置document.body.style.backgroundColor来改变页面背景颜色。
3、document.cookie
document.cookie表示当前页面的所有cookie，cookie是一种存储在用户本地终端上的数据，用于记录用户的一些信息，通过操作document.cookie,我们可以读取、设置和删除cookie，可以通过设置document.cookie = "name=value"来创建一个新的cookie,通过document.cookie获取当前页面的所有cookie等。
4、document.createElement()
document.createElement()是一个用于创建新HTML元素的方法，它接受一个参数，即要创建的元素的标签名，然后返回一个表示该元素的新对象，可以通过调用document.createElement("div")来创建一个新的<div>元素。
5、document.createTextNode()
document.createTextNode()是一个用于创建文本节点的方法，它接受一个参数，即要创建的文本内容，然后返回一个表示该文本节点的新对象，可以通过调用document.createTextNode("Hello, World!")来创建一个包含文本"Hello, World!"的文本节点。
6、document.getElementById()
document.getElementById()是一个用于根据元素的ID获取元素的方法，它接受一个参数，即元素的ID,然后返回一个表示该元素的对象，如果找不到对应的元素，则返回null，可以通过调用document.getElementById("myElement")来获取ID为"myElement"的元素。
7、document.getElementsByClassName() / querySelectorAll()
document.getElementsByClassName()和querySelectorAll()是两个用于根据类名获取元素的方法，前者只返回具有指定类名的第一个元素，后者返回所有具有指定类名的元素，这两个方法都接受一个参数，即类名，然后返回一个表示这些元素的对象集合，可以通过调用document.getElementsByClassName("myClass")或document.querySelectorAll(".myClass")来获取所有具有类名"myClass"的元素。
8、document.head
document.head表示HTML文档的<head>元素，可以通过它来访问和修改页面中的<head>部分的内容，可以通过设置document.head.style.backgroundColor来改变页面标题栏的背景颜色。
9、document.title
document.title表示当前页面的标题(即<title>标签的内容)，可以通过它来访问和修改页面的标题，可以通过设置document.title = "New Title"来更改页面标题为"New Title"。
10、document.write() / innerHTML
document.write()是一个用于向页面写入内容的方法，它接受一个参数，即要写入的内容，然后将内容插入到当前文档流的末尾，需要注意的是，使用document.write()可能会导致性能问题，因为它会重写整个文档内容，相反，可以使用innerHTML属性来修改页面的内容，可以通过调用document.write("<p>Hello, World!</p>")或设置元素的innerHTML属性来插入一段新的HTML代码。
相关问题与解答
1、如何获取网页中所有的链接？
答：可以使用document.getElementsByTagName("a")方法来获取网页中所有的链接(<a>标签)，这将返回一个包含所有链接元素的集合，可以遍历这个集合，通过访问每个链接元素的href属性来获取链接地址，示例代码如下：
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
console.log(links[i].href); // 输出链接地址
}
2、如何实现点击按钮时弹出提示框的功能？
答：可以使用JavaScript为按钮添加点击事件监听器，当点击按钮时执行相应的函数来弹出提示框，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击按钮弹出提示框</title>
<script>
function showAlert() {
alert("你点击了按钮！");
}
</script>
</head>
<body>
<button onclick="showAlert()">点击我</button>
</body>
</html>
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/214305.html
微信扫一扫 