首页 > 其他分享 >vue全家桶进阶之路5:DOM文档对象模型

vue全家桶进阶之路5:DOM文档对象模型

时间:2023-03-24 16:55:06浏览次数:48  
标签:vue 进阶 DOM 对象 元素 文档 节点 就是

  一、DOM对象


  DOM,全称“DocumentObjectModel(文档对象模型)”,它是由W3C组织定义的一个标准。

  在前端开发时,我们往往需要在页面某个地方添加一个元素或者删除元素,这种添加元素、删除元素的操作就是通过DOM来实现的。

  说白了,DOM就是一个接口,我们可以通过DOM来操作页面中各种元素,例如添加元素、删除元素、替换元素等。这下大家就懂了吧。记住,DOM就是文档对象模型,文档对象模型就是DOM,很多人在学习DOM的时候看到“文档对象模型”还不知道是什么?

  二、DOM结构

  DOM采用树形结构作为分层结构,以树节点形式表示页面中各种元素或内容。

  举例:

  <html>

  <head>

  <title><title>

  <body>

  <h1></h1>

  <p></p>

  </body>

  </html>

  在DOM中,每一个元素看成一个节点,而每一个节点就是一个“对象”。也就是我们在操作元素时,把每一个元素节点看成一个对象,然后使用这个对象的属性和方法进行相关操作。(这句话对理解DOM操作太重要了)。

  下面我们介绍几个关于节点的概念。

  1、根节点

  在HTML文档中,html就是根节点。

  2、父节点

  一个节点之上的节点就是该节点的父节点,例如h1的父节点就是body,body的父节点就是html。

  3、子节点

  一个节点之下的节点就是该节点的子节点,例如h1就是body的子节点。

  4、兄弟节点

  如果多个节点在同一层次,并拥有相同的父节点,那么这几个节点就是兄弟节点。

  例如h1和p就是兄弟节点,因为他们拥有相同的父节点body。

标签:vue,进阶,DOM,对象,元素,文档,节点,就是
From: https://www.cnblogs.com/beichengshiqiao/p/17252663.html

相关文章

  • vue全家桶进阶之路4:NPM包
    NPM(NodePackageManager)是Node.js的包管理工具,用来安装各种Node.js的扩展。NPM是JavaScript的包管理工具,也是世界上最大的软件注册表。有超过60万个Jav......
  • 一文详解vue-cli2.0与vue-cli3.0之间的区别
    我们之所以介绍vue-cli2和vue-cli3的使用和区别,是因为VUE脚手架工具从vue-cli3版本开始,在项目结构等诸多方面开始与vue-cli2版本相比,有较大的优化与调整。因此,在学习和工......
  • SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图
    场景若依前后端分离版本地搭建开发环境并运行项目的教程:若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-在上面搭建架构的基础上,实现使用Ele......
  • SpringBoot+Vue+Echarts实现双柱体柱状图
    场景 若依前后端分离版本地搭建开发环境并运行项目的教程:若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-在上面搭建架构的基础上,实现使用E......
  • SpringBoot+Vue+OpenOffice实现文档管理(文档上传、下载、在线预览)
    场景SpringBoot集成OpenOffice实现doc文档转html:SpringBoot集成OpenOffice实现doc文档转html_BADAO_LIUMANG_QIZHI的博客-在上面初步使用了OpenOffice之后,怎样实现文档管理,......
  • Vue+Openlayer使用Draw实现交互式绘制多边形并获取面积
    场景Vue+Openlayer使用Draw实现交互式绘制线段:Vue+Openlayer使用Draw实现交互式绘制线段_BADAO_LIUMANG_QIZHI的博客-在上面的基础上实现的交互式绘制线段,还可以实现绘制多......
  • Vue3+vite项目中如何动态导入并创建多个全局组件
    背景实际开发项目中,有些时候我们需要通过全局注册多个自定义组件,但是每个组件都导入一次,将会导致代码很冗余。实现方案customComponents/index.jsconstfiles=impor......
  • 【开发小记】vuex存储用户信息
    今天开发的过程中,遵循前人的经验对用户信息进行了存储。实现这个功能之后,我突然想到vuex本质是什么呢?它为什么要存在,以及它和浏览器的缓存的区别又是什么呢?(第三小节会给出......
  • Vue2响应式原理
    Vue.js基本上遵循MVVM(Model–View–ViewModel)架构模式,数据模型仅仅是普通的JavaScript对象。而当你修改它们时,视图会进行更新。本文讲解一下Vue响应式系统的底层细......
  • vue全家桶进阶之路2:JavaScript
    JavaScript(简称“JS”)是当前最流行、应用最广泛的客户端脚本语言,用来在网页中添加一些动态效果与交互功能,在Web开发领域有着举足轻重的地位。JavaScript与HTML和CSS......