一、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全家桶进阶之路5：DOM文档对象模型的更多相关文章

  1. 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  2. Javascript - DOM文档对象模型

    文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...

  3. xml.dom——文档对象模型API

    文档对象模型,或者“DOM”,是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建 ...

  4. JavaScript学习笔记7 之DOM文档对象模型

    一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...

  5. DOM 文档对象模型

    document 对象(作为对象),是 DOM 的核心作用:对内容,属性,样式等操作属性:title:设置/返回当前文档的标题url:返回当前文档的 urlinnerHTML:获取指定对象内的内容bg ...

  6. JavaScript学习总结（一）DOM文档对象模型

    一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...

  7. JS第二部分--DOM文档对象模型

    一.DOM的概念 二.DOM可以做什么 三.DOM对象的获取 四.事件的介绍 五.DOM节点标签样式属性的操作 六.DOM节点对象对值的操作 七.DOM节点-标签属性的操作(例如id class sr ...

  8. JavaScirpt(JS)——DOM文档对象模型

    一.HTML DOM介绍 HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM 定义了用于 HT ...

  9. js下 Day02、DOM文档对象模型

    一．DOM简介 Document Object Model 文档对象模型 DOM包含了所有HTML元素的属性和方法,以及访问他们的方式: #二．DOM节点 #1. 什么是节点? HTML中所有的元素都 ...

  10. DOM文档对象模型

随机推荐

  1. odoo ORM API学习总结兼orm学习教程

    环境 odoo-14.0.post20221212.tar ORM API学习总结/学习教程 模型(Model) Model字段被定义为model自身的属性 from odoo import mode ...

  2. Ocelot使用与设置路由Routing

    一.安装Ocelot 在程序包管理器控制台输入以下命令安装Ocelot Install-Package Ocelot 二.新建两个项目 我们新建两个.Net Core WebAPI项目如下:   直接 ...

  3. JUC源码学习笔记8——ConcurrentHashMap源码分析1 如何实现低粒度锁的插入，如何实现统计元素个数，如何实现并发扩容迁移

    源码基于jdk1.8 这一片主要讲述ConcurrentHashMap如何实现低粒度锁的插入,如何实现统计元素个数,如何实现并发扩容迁移 系列文章目录和关于我 一丶ConcurrentHashMap概 ...

  4. 前端性能精进之浏览器（五）——JavaScript

    JavaScript 是一种通过解释执行的高级编程语言,同时也是一门动态.弱类型的直译脚本语言,适合面向对象(基于原型)和函数式的编程风格. 直译语言可以直接在解释器中运行,而与直译语言相对应的编译语 ...

  5. 动态求前n个最小值(最大值)

    注: 由于最小值和最大值的分析过程完全相同,这里我们只讨论最小值的分析流程,最大值同理 问题描述 每次给定一个数值,询问此数值以及之前给定数值中最小的n个数 例如给定数值的顺序为:8 7 1 2 9 ...

  6. LinkedBlockingQueue出入队实现原理

    类图概述 由类图可以看出,L是单向链表实现的,有两个ReentrantLock实例用来控制元素入队和出队的原子性,takeLock用来控制只有一个线程可以从队头获取元素,putLock控制只有一个线程 ...

  7. Django笔记十二之defer、only指定返回字段

    本篇笔记为Django笔记系列之十二,首发于公号[Django笔记] 本篇笔记将介绍查询中的 defer 和 only 两个函数的用法,笔记目录如下: defer only 1.defer defer ...

  8. 统计模拟实验—R实现（蒲丰投针）

    统计模拟实验 统计模拟是数理统计.和计算机科学的结合,是一门综合性学科.在科学研究和生产实际的各个领域中,普遍存在着大量数据的分析处理工作.如何应用数理统计中的方法来解决实际问题,以及如何解决在应用中 ...

  9. 在Centos8中默认使用DNF没有使用YUM​

    1. 检查DNF版本 检查您的系统上安装的DNF版本. # dnf --version 2. 列出启用的DNF仓库 dnf命令中的'repolist'选项将显示您系统中所有启用的仓库. # dnf r ...

  10. GitLab 安装部署使用

    GitLab介绍 GitLab:是一个基于Git实现的在线代码仓库托管软件,你可以用gitlab自己搭建一个类似于Github一样的系统,一般用于在企业.学校等内部网络搭建git私服. 功能:Gitl ...