理解DOM：前端开发的基础
理解DOM
在前端开发中，DOM（文档对象模型）是一个至关重要的概念。它不仅定义了如何通过编程方式访问和修改网页内容，还为我们提供了一种结构化的方式来与页面交互。本文将带你了解DOM的基本概念、不同节点的操作以及何时可以进行更新。
什么是DOM？
DOM（Document Object Model）是一个编程接口，它将HTML和XML文档表示为一个树状结构。这个树的每个部分都称为一个“节点”，代表文档的不同部分，例如元素、属性和文本。开发者可以使用JavaScript等编程语言来操作这些节点，从而实现动态网页的效果。
DOM的基本结构
在DOM中，每个节点都有一个类型，主要包括以下几种：
-
元素节点（Element Node）：代表HTML或XML文档中的元素。例如，一个
<div>、<p>或<button>标签都是元素节点。 -
属性节点（Attribute Node）：代表元素的属性。例如，
<a href="https://example.com">中的href就是一个属性节点。 -
文本节点（Text Node）：代表元素中的文本内容。例如，
<p>Hello, World!</p>中的Hello, World!是一个文本节点。 -
文档节点（Document Node）：代表整个文档本身，是所有其他节点的根节点。
操作DOM节点
通过JavaScript，可以对DOM节点进行多种操作，包括：
-
创建节点：使用
document.createElement()方法创建新的元素节点。例如：const newDiv = document.createElement('div'); -
添加节点：使用
appendChild()或insertBefore()方法将新节点添加到现有节点中。例如：const parent = document.getElementById('parentDiv'); parent.appendChild(newDiv); -
修改节点：可以修改节点的属性、样式和内容。例如：
newDiv.textContent = '这是新添加的内容'; newDiv.setAttribute('class', 'new-class'); -
删除节点：使用
removeChild()方法删除特定节点。例如：parent.removeChild(newDiv);
何时可以进行DOM更新？
在操作DOM时，了解何时可以进行更新是非常重要的。以下是可以安全进行更新的时机：
-
在事件处理程序中：当用户与页面交互时（如点击按钮、输入文本等），可以安全地更新DOM。例如：
document.getElementById('myButton').addEventListener('click', () => { const newDiv = document.createElement('div'); newDiv.textContent = '按钮被点击了！'; document.body.appendChild(newDiv); }); -
在AJAX请求完成后：当数据通过AJAX请求成功返回时，可以使用返回的数据更新DOM。例如：
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { const item = document.createElement('div'); item.textContent = data.message; document.body.appendChild(item); });
何时不能进行DOM更新？
-
在异步操作中未完成时：如果您试图在异步操作（如AJAX请求）完成之前更新DOM，可能会得到未定义或旧数据。例如：
let data; fetch('https://api.example.com/data') .then(response => response.json()) .then(json => { data = json; }); // 这里尝试访问data可能会得到undefined -
在未加载完的文档上：在页面完全加载之前，尝试访问或修改DOM节点可能会导致错误。确保在
DOMContentLoaded事件中执行DOM操作，或者在<body>标签的底部引入脚本。document.addEventListener('DOMContentLoaded', () => { const newDiv = document.createElement('div'); newDiv.textContent = '页面已加载！'; document.body.appendChild(newDiv); });
举个例子：
if (res && Array.isArray(res.resultset)) {
this.navList = [];
let temList = []; // 初始化 temList
for (let i = 0; i < res.resultset.length; i += 9) {
temList.push(res.resultset.slice(i, i + 9));
}
// 使用 $nextTick 确保 DOM 更新后执行操作
this.$nextTick(() => {
// 将 temList 赋值给 navList
this.navList = temList;
});
} else {
this.navList = []; // 结果集无效时清空
}
如果不使用this.$nextTick就会报错，比如“正在尝试将一个节点插入到一个并不是其父节点的节点之前”之类的插入操作报错：
如果是在 Vue.js 的上下文中，确保在 DOM 更新后再执行相关操作。使用 $nextTick 方法，可以让你确保操作在 DOM 更新后进行。
### 总结
DOM是前端开发的核心，它为我们提供了操作网页内容和结构的能力。
了解DOM的不同节点以及何时可以安全地进行更新是开发动态和交互式网页的基础。
原文地址：https://blog.csdn.net/m0_47905795/article/details/143890155
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！