Javascript DOM （一）

最新推荐文章于 2022-10-27 21:36:15 发布

河北颜良

最新推荐文章于 2022-10-27 21:36:15 发布

阅读量442

点赞数

分类专栏：笔记基础入门文章标签： javascript dom

本文链接：https://blog.csdn.net/zhe06/article/details/107850872

版权

笔记同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

基础

11 篇文章 0 订阅

订阅专栏

入门

10 篇文章 0 订阅

订阅专栏

马上开始DOM篇章这是一个大坑，所以让我们慢慢解析。

认识DOM

DOM中的“D”是指document（文档），可以说没有文档就没有DOM。当创建了一个网页并把他加载到web浏览器中时，DOM就默默的将你写好的网页文档转化成了一个文档对象。

DOM中的"O"是指object（对象），对象是一组数据和功能的集合，是一种自足的数据集合。
JavaScript语言里的对象可以分为三种类型（此处为简略介绍，以后更新或许会涉及）：
1.用户定义对象：由程序猿自己创建的对象。
2.内建对象：内建在JavaScript语言里面的对象，如Array，Math和Data等。
3.宿主对象：浏览器提供。

DOM种的"M"是指model（模型），它的含义是指某种事物的表现形式。就像一张图纸代表着一座建筑（机械等，，这里就是个比喻），DOM代表着加载到浏览器窗口的当前网页。浏览器提供网页的图纸，我们通过JavaScript去读取这张图纸看懂并使用。

Document Object Model就是DOM。一套专门操作网页内容的对象、函数和属性的整体！

基础问题解达：
（JavaScript由ECMAScript、DOM、BOM三部分组成）
1.为什么要用DOM？
ECMAScript仅规定了js语言的核心语法（就是怎么写是可以运行的对的，怎么写不对的）。但是，ES标准没有规定如何使用js操作网页内容！所以只要操作网页内容，都必须使用DOM提供的对象、函数和属性。

扩展小知识：什么是ECMAScript...
ECMAscrip 来自 ECMA International，这是一家国际性会员制度的信息和电信标准组织。1997年该组织发布了MCMA-262的标准，该标准制定了MCMAscript语言规范。
ECMA-262标准定义了ECMAscript语言规范。这个这个标准也叫成为ECMAscript语言规范(ECMAScript Language Specification),简称ES规范。

2.DOM的缺点
1）因为ECMAScript标准不包括DOM的对象和函数。所以早期DOM没有标准，每种浏览器操作网页的方法各不相同！——严重的兼容性问题
解决：
W3C组织作为第三方机构又制定了一个DOM标准，规定了所有浏览器操作网页内容的标准方式——今后使用DOM标准操作网页，几乎所有浏览器100%兼容。
2）繁琐
后人在DOM提供的对象、函数和属性基础上，又封装了简化的jQuery和Vue。（慢慢来，现在学习DOM可以理解为是为了看的懂简化后的内容，还是非常有用的）

3. 学了DOM可以做哪些事儿？
增删改查+事件绑定

一.DOM树（重点内容，必须理解）

文档对象模型(DOM)是针对XML但经过扩展用于HTML的应用程序编程接口(API,Application Programming Interface)。DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。（简单来说，就是一个html网页中所有元素、内容和属性，在内存中都是被保存在一棵树形结构上！）看下面：
在这里插入图片描述

为什么说是树形结构：
因为HTML网页中的元素和内容都有明显的复杂的上下级包含关系，而树形结构是最直观的保存和反应上下级包含关系的结构`

当浏览器窗口加载了一个HTML网页文件后，浏览器都会扫描HTML文件的内容，并在内存中创建DOM树以及DOM树上的节点对象来保存HTML中每项内容。（结合上面的图理解）

    (1). 先在内存中创建一个唯一的树根节点对象: document
	(2). 浏览器扫描HTML文件内容
	(3). 每扫描到一项内容(元素、文本、属性)，浏览器就会在树根节点document下对应位置，创建一个节点对象，保存当前扫描到的一项内容
	(4). 当扫描整个HTML文件结束，内存中就形成了一棵属性结构

树形结构或网状结构中多条线交汇的点，就称为节点。文档是节点的集合，只不过此时的节点是文档树上的树枝和树叶。

DOM把一份文档表示为一棵树，，具体来说，DOM把文档表示为一棵家谱树。
家谱树的典型用法就是一个人类家族的从上到下每一代记录清楚。其本身就是一个模型。并使用parent(父),child(子),sibling(兄弟)等记号来表明家族成员之间的关系。家谱树可以把一些相当复杂的关系简明地表示出来**😕*

在这里插入图片描述让我们结合这个网页结构来分析， DOCTYPE之后，一个打开了的<html> 标签是整个文档的开始，网页里面的所有其他元素都包含在里面，可以说<html> 代表开始，它没有父亲（上一级），兄弟（同一级）。可以称它为这个文档的根。
再往下一层讲，<head> 和 <body> 在同一级且互相不包含，所以它们是兄弟关系。有一个相同的父级元素<html> ，也有各自的子元素（下一级）。
<head> 有两个子元素<title>和<meta>，他们是兄弟关系。
<body>元素又三个子元素<span>和<ul>和<script>，然后<ul>又有三个子元素<li>…
利用这种族谱关系记号，我们可以把个元素之间的关系简单明了的表达出来。用专业术语来说"节点树"更准确。