文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 JavaScript 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。
这篇文章瑶琴带大家浏览器内置对象中非常重要的一个知识点：文档对象模型 document。document 对象是 window 对象的一个属性，代表了整个HTML页面，并且是DOM（文档对象模型）的入口点。通过 document 对象，你可以访问和操作页面中的所有元素。
以下是 document 对象的一些重要属性和方法，以及它们在前端开发中的用途：
1.属性
1.document.title - 获取或设置当前文档的标题。
2.document.URL - 获取当前文档的URL。
3.document.domain - 设置或获取当前文档的域名（仅限于同源策略）。
4.document.body - 获取文档的根元素，通常是 <html> 或 <body> 元素。
在平时的开发过程中，最常用的是document.title，比如在手机端打开一个网页时，上面显示title就是通过这个属性来设置的。
2.方法
document.getElementById(id) - 通过元素的ID获取该元素。
document.getElementsByTagName(tag) - 通过标签名获取一组元素。
document.getElementsByClassName(className) - 通过类名获取一组元素。
document.querySelector(selector) - 根据CSS选择器获取第一个匹配的元素。
document.querySelectorAll(selector) - 根据CSS选择器获取所有匹配的元素的集合。
document.createElement(tag) - 创建一个指定标签名的元素。
document.createTextNode(text) - 创建一个文本节点。
document.appendChild(child) - 将一个节点添加到另一个节点的子列表的末尾。
document.removeChild(child) - 从一个节点的子节点列表中移除一个子节点。
document.getElementById(id).innerHTML - 获取或设置一个元素内部的HTML内容。
document.write(content) - 向文档中写入内容。
下面，瑶琴给一些示例：
1.获取文档标题并输出到控制台：
const title = document.title;
console.log(`The document title is: ${title}`);2.使用 getElementById 获取元素并改变其内容：
const headerElement = document.getElementById('header');
headerElement.textContent = 'New Header Text';
3.使用 getElementsByTagName 获取所有段落元素并遍历它们：
const paragraphs = document.getElementsByTagName('p');
for (let p of paragraphs) {
p.style.color = 'blue'; // 将所有段落文本颜色设置为蓝色
}
4.使用 querySelector 和 querySelectorAll 获取元素：
// 获取第一个class为'highlight'的元素const firstHighlight =document.querySelector('.highlight');// 获取所有class为'highlight'的元素const highlights = document.querySelectorAll('.highlight'); highlights.forEach(el => {
el.style.backgroundColor = 'yellow'; // 将所有.highlight元素的背景色设置为黄色});5.创建新的元素并将其添加到文档中：
const newElement =document.createElement('div');newElement.textContent = 'This is a new div element';document.body.appendChild(newElement); // 将新元素添加到body中6.修改元素的HTML内容：
const contentDiv =document.getElementById('content');contentDiv.innerHTML = '<p>This paragraph is added via JavaScript.</p>';
7.使用 document.write 向文档中写入内容（不推荐，因为它会覆盖整个页面内容）：
document.write('<p>This is a written paragraph.</p>');document 对象是操作DOM的核心，通过它你可以构建动态的网页，响应用户交互，以及实现各种前端功能。
理解 document 对象及其方法对于成为一名前端开发者至关重要。随着你不断学习和实践，你将更加熟练地使用这些工具来创建复杂的网页和应用。
希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。
最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 前端必知必会：文档对象模型document
发表评论 取消回复