理解DOM:前端开发的基础

news/2024/11/20 14:45:29/

理解DOM

前端开发中,DOM(文档对象模型)是一个至关重要的概念。它不仅定义了如何通过编程方式访问和修改网页内容,还为我们提供了一种结构化的方式来与页面交互。本文将带你了解DOM的基本概念、不同节点的操作以及何时可以进行更新。

什么是DOM?

DOM(Document Object Model)是一个编程接口,它将HTML和XML文档表示为一个树状结构。这个树的每个部分都称为一个“节点”,代表文档的不同部分,例如元素、属性和文本。开发者可以使用JavaScript等编程语言来操作这些节点,从而实现动态网页的效果。

DOM的基本结构

在DOM中,每个节点都有一个类型,主要包括以下几种:

  1. 元素节点(Element Node):代表HTML或XML文档中的元素。例如,一个<div><p><button>标签都是元素节点。

  2. 属性节点(Attribute Node):代表元素的属性。例如,<a href="https://example.com">中的href就是一个属性节点。

  3. 文本节点(Text Node):代表元素中的文本内容。例如,<p>Hello, World!</p>中的Hello, World!是一个文本节点。

  4. 文档节点(Document Node):代表整个文档本身,是所有其他节点的根节点。

操作DOM节点

通过JavaScript,可以对DOM节点进行多种操作,包括:

  • 创建节点:使用document.createElement()方法创建新的元素节点。例如:

    javascript">const newDiv = document.createElement('div');
    
  • 添加节点:使用appendChild()insertBefore()方法将新节点添加到现有节点中。例如:

    javascript">const parent = document.getElementById('parentDiv');
    parent.appendChild(newDiv);
    
  • 修改节点:可以修改节点的属性、样式和内容。例如:

    javascript">newDiv.textContent = '这是新添加的内容';
    newDiv.setAttribute('class', 'new-class');
    
  • 删除节点:使用removeChild()方法删除特定节点。例如:

    javascript">parent.removeChild(newDiv);
    

何时可以进行DOM更新?

在操作DOM时,了解何时可以进行更新是非常重要的。以下是可以安全进行更新的时机:

  1. 在事件处理程序中:当用户与页面交互时(如点击按钮、输入文本等),可以安全地更新DOM。例如:

    javascript">document.getElementById('myButton').addEventListener('click', () => {const newDiv = document.createElement('div');newDiv.textContent = '按钮被点击了!';document.body.appendChild(newDiv);
    });
    
  2. 在AJAX请求完成后:当数据通过AJAX请求成功返回时,可以使用返回的数据更新DOM。例如:

    javascript">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更新?

  1. 在异步操作中未完成时:如果您试图在异步操作(如AJAX请求)完成之前更新DOM,可能会得到未定义或旧数据。例如:

    javascript">let data;
    fetch('https://api.example.com/data').then(response => response.json()).then(json => {data = json;});
    // 这里尝试访问data可能会得到undefined
    
  2. 在未加载完的文档上:在页面完全加载之前,尝试访问或修改DOM节点可能会导致错误。确保在DOMContentLoaded事件中执行DOM操作,或者在<body>标签的底部引入脚本。

    javascript">document.addEventListener('DOMContentLoaded', () => {const newDiv = document.createElement('div');newDiv.textContent = '页面已加载!';document.body.appendChild(newDiv);
    });
    

举个例子:

     if (res && Array.isArray(res.resultset)) {this.navList = [];let temList = [];  // 初始化 temListfor (let i = 0; i < res.resultset.length; i += 9) {temList.push(res.resultset.slice(i, i + 9));}// 使用 $nextTick 确保 DOM 更新后执行操作this.$nextTick(() => {// 将 temList 赋值给 navListthis.navList = temList;});} else {this.navList = []; // 结果集无效时清空}

如果不使用this.$nextTick就会报错,比如“正在尝试将一个节点插入到一个并不是其父节点的节点之前”之类的插入操作报错:
它说明您正在尝试将一个节点插入到一个并不是其父节点的节点之前
如果是在 Vue.js 的上下文中,确保在 DOM 更新后再执行相关操作。使用 $nextTick 方法,可以让你确保操作在 DOM 更新后进行。

### 总结

DOM是前端开发的核心,它为我们提供了操作网页内容和结构的能力。
了解DOM的不同节点以及何时可以安全地进行更新是开发动态和交互式网页的基础。


http://www.ppmy.cn/news/1548507.html

相关文章

Python3.11.9+selenium,获取图片验证码以及输入验证码数字

Python3.11.9+selenium,获取图片验证码以及输入验证码数字 1、遇到问题:登录或修改密码需要验证码 2、解决办法: 2.1、安装ddddocr pip install ddddocr 2.2、解析验证码函数 import ddddocr def get_capcha_text():#获取验证码图片ele_pic = driver.find_element(By.XPAT…

前端访问后端实现跨域

背景&#xff1a;前端在抖音里做了一个插件然后访问我们的后端。显然在抖音访问其他域名肯定会跨域。 解决办法&#xff1a; 1、使用比较简单的jsonp JSONP 优点&#xff1a;JSONP 是通过动态创建 <script> 标签的方式加载外部数据&#xff0c;属于跨域数据请求的一种…

1065 A+B and C (64bit) (20)

Given three integers A, B and C in (−2^63,2^63), you are supposed to tell whether AB>C. Input Specification: The first line of the input gives the positive number of test cases, T (≤10). Then T test cases follow, each consists of a single line conta…

JavaScript实现Promise

第一步&#xff1a;编写constructor构造方法 const PENDING pending; const FULFILLED fulfilled; const REJECTED rejected;class MyPromise {#state PENDING;#result undefined;constructor(executor) {const resolve (data) > {this.#changeState(FULFILLED, data…

Qt添加外部库:静态库和动态库,批量添加头文件

Qt添加外部库需要知道库文件的位置才能正确链接&#xff0c;如果是静态库&#xff0c;要确保LIBS变量中包含正确的库文件路径和库文件名;如果是动态库&#xff0c;除了库路径外&#xff0c;还需要考虑动态库的加载路径。在 Windows 下&#xff0c;可以将动态库所在路径添加到系…

#lwIP 的 Raw API 使用指南

1. 简介 lwIP&#xff08;Lightweight IP&#xff09;是一个为嵌入式系统设计的开源轻量级 TCP/IP 协议栈。它旨在提供尽可能小的内存占用和高效的性能&#xff0c;适用于资源受限的设备&#xff0c;如物联网设备、路由器和工业控制系统。lwIP 支持多种协议&#xff0c;包括 I…

OAI-5G开源通信平台实践(一)

OAI-5G开源通信平台实践 文章目录 OAI-5G开源通信平台实践前言安装发行版适配(仅针对centos平台)安装依赖并编译(ubuntu)使用包管理工具安装RF simulator基本测试phy-testSA模式-nos1ping test(NSA nos1 )前言 OAI (Open Air Interface) 是目前开源5G/4G项目中最完善、最成熟…

2024实时股票api接口分享

股票实时api接口有什么用? 实时股票API接口&#xff08;www.biyingapi.com&#xff09;是应用程序编程接口的一种&#xff0c;它允许开发者通过编程方式访问股票市场的实时数据。这种接口通常提供了股票市场的实时价格、成交量、买卖盘口、市场动态以及专业数据分析工具等功能…