一、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. 对利用jsp模板编写登录、注册界面的方法言

    使用模板的相关操作步骤详解 1.可以在相关的网站上面找相关的css或者js文件,下载到一个特定的文件夹里面,以备使用 2.然后,将存有相关代码的文件夹直接复制粘贴到web文件下,就会直接保存,可以根据 ...

  2. 初识Node和内置模块

    初识Node与内置模块 概述:了解Node.js,熟悉内置模块:fs模块.path模块.http模块 初识Node.js 浏览器中的JavaScript运行环境 运行环境是指代码正常运行所需的必要环境 ...

  3. JAVA数据类型以及什么是字节

    强类型语言:要求变量的使用要严格符合规定,所有变量都必须先定义才能使用(安全性高) java的数据类型分为两大类 基本类型(primitive type) 引用类型(reference type) / ...

  4. Three.js 进阶之旅：物理效果-3D乒乓球小游戏 🏓

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 摘要 本文在专栏上一篇内容<Three.js 进阶之旅:物理效果-碰撞和声 ...

  5. 如何快速体验ChatGPT-4模型

    OpenAI免费版基于Gpt3.5,无法使用最新发布的 GPT-4 模型,必须开通 ChatGPT Plus.但是 OpenAI 不但屏蔽了中国的 IP 地址,连国内的 Visa 信用卡也一同屏蔽,即 ...

  6. CPU内部的奥秘：代码是如何被执行的？

    我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品.我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值. 本文作者:景明 我们以一段 C 代码为例,来看一下代码被编译成二进制 ...

  7. 蓝桥杯十一届JavaA组-C++解题

    本人随便乱写,目前正确性未知 C.本质上升序列 #include<bits/stdc++.h> using namespace std; bool access[4][4]; int df ...

  8. MQ(消息队列）常见问题梳理

    MQ 中 broker 的作用,有无broker有什么差异? MQ(Message Queue)中的broker是消息队列的核心组件之一,它的作用是接收.存储.分发和传递消息.具体来说,broker主 ...

  9. Three.js 进阶之旅：全景漫游-高阶版在线看房 🏡

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 摘要 专栏上篇文章<Three.js 进阶之旅:全景漫游-初阶移动相机版& ...

  10. 和我一起学 Three.js【初级篇】：1. 搭建 3D 场景

    欢迎关注「前端乱步」公众号,我会在此分享 Web 开发技术,前沿科技与互联网资讯. 0. 系列文章合集 本系列第 6,7 章节支持微信公众号内付费观看,将在全系列文章点赞数+评论数 >= 500 ...