一、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. sqli-labs搭建

    今天使用 phpstudy 搭建了 sqli-labs 练习 SQL 注入平台,其中遇到了两个问题. phpstudy phpstudy 中集成了 Apache.Nginx.PHP.Mysql.php ...

  2. 火山引擎 DataLeap：一家企业，数据体系要怎么搭建？

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 导读:经过十多年的发展,数据治理在传统行业以及新兴互联网公司都已经产生落地实践.字节跳动也在探索一种分布式的数据治 ...

  3. JMM知识点总结

    JMM知识点总结 一.什么是JMM? 不知道大家在学习的过程有没有思考过这两个问题 为什么说java是跨平台语言 导致并发问题的原因是什么 第一个问题,我是这么理解的,代码运行本质上是将我们写的语言转 ...

  4. Three.js 进阶之旅：全景漫游-初阶移动相机版

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 摘要 3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式.数 ...

  5. selenuim文件的下载

    文件下载:谷歌浏览器则会自动实现下载,不会弹出框提示,会直接下载谷歌的默认路径:火狐浏览器下载会弹出提示框,此时火狐需要添加浏览器的配置参数信息: 火狐的相关浏览器配置参数可以通过about:conf ...

  6. .NET周报 【4月第1期 2023-04-02】

    国内文章 探索 SK 示例 -- GitHub 存储库中的机器人 https://www.cnblogs.com/shanyou/p/17280627.html 微软 3月22日 一篇文章" ...

  7. 技术分享：Proxy-Pool代理池搭建IP代理

    技术分享:Proxy-Pool代理池搭建IP代理 前言本章内容仅供参考,不涉及实际使用,主要使用Python环境和Redis数据库进行环境搭建,工具网盘存储如下,有问题可以私聊我.网址:https:/ ...

  8. pysimplegui之系统托盘图标创建

    在 PySimpleGUI(tkinter 版本)上运行时,系统托盘图标为 PNG 和 GIF 格式.PNG.GIF 和 ICO 格式适用于 Wx 和 Qt 端口. 指定"图标"时 ...

  9. [数据库/Linux]CentOS7安装MySQL Percona版(RPM方式)

    OS: CentOS7 (x86_64) MySQL: MySQL Percona 5.7.31-34 0 前置条件 已配置完成YUM源 已卸载先前可能安装的MySQL rpm -qa | grep ...

  10. golang 必会之 pprof 监控系列(5) —— cpu 占用率 统计原理

    golang pprof 监控系列(5) -- cpu 占用率 统计原理 大家好,我是蓝胖子. 经过前面的几节对pprof的介绍,对pprof统计的原理算是掌握了七八十了,我们对memory,bloc ...