DOM详解
一、浏览器工作的基本流程
1、浏览器开始解析 html 文档，构建 DOM树(DOM tree)，DOM 树的节点由文档的标签、属性、文本等组成；
2、解析外部 CSS 文件及 style 标签中的样式信息，这些样式信息将结合 DOM 树中可见的部分构建另一棵树——渲染树(render tree)，DOM 树和渲染树并不是一一对应的，例如DOM 树中的 head 节点以及 display 属性为 none 的节点就不会显示在渲染树中，但是 visibility 属性值为 hidden 的节点仍会显示；
3、渲染树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标；
4、然后就是绘制，即遍历渲染树，并使用 UI 后端层绘制每个节点；
二、DOM 节点类型
在 DOM 文档对象模型中，一共有12种节点类型，它们分别是元素节点、属性节点、文本节点 、CDATA节点 、实体引用名称节点、实体名称节点 、处理指令节点、注释节点、文档节点 、文档类型节点 、文档片段节点 、DTD声明节点
使用 nodeType 属性可以查看节点的常数值，这12种类型分别对应1到12的常数值；
使用 nodeName 属性可以查看节点的名称；
使用 nodeValue 属性可以查看或设置节点的值，格式为字符串；
例如：
//html
<div id="tt">测试文本</div>
//javascript
var tt = document.getElementById("tt");
var te = document.getElementById("tt").firstChild;
alert(tt);//HtmlDIVElement
alert(te);//Text
alert(tt.nodeType+","+tt.nodeName+","+tt.nodeValue);//1,DIV,null
alert(te.nodeType+","+te.nodeName+","+te.nodeValue);//3,#text,测试文本
下图列举出了部分节点之间的关系：
处于右边的节点继承了左边节点的属性和方法，至于每类节点拥有哪些属性和方法可以查参考手册。
例如：tt 是一个 HTMLDivElement 对象，它可以调用 HTMLElement 对象（父节点）的 innerHTML 属性，即 tt.innerHTML = "<p>123</p>"，它也可以调用 Element 对象（祖父节点）的 firstChild、lastChild 等属性，或者 getAttribute() 等方法，它还可以调用 Node 对象（祖先节点）的 nodeType、nodeName、nodeValue 等属性...
三、举例
<!DOCTYPE html>
<html>
<body>
<p>Hello DOM</p>
<div><img src="example.png" /></div>
</body>
</html>
将会被转换为下面的DOM树：
DOM详解的更多相关文章
- 虚拟DOM详解
虚拟DOM简介 Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树,其主要是通过vnode,实现一个无状态的组件,当组件状态发生更新时,然后触发Virtual Dom数据的变 ...
- Day04 dom详解及js事件
day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证 上次课内容回顾: JS中ECMAScript用法: JS定义变 ...
- 虚拟Dom详解 - (二)
第一篇文章中主要讲解了虚拟DOM基本实现,简单的回顾一下,虚拟DOM是使用json数据描述的一段虚拟Node节点树,通过render函数生成其真实DOM节点.并添加到其对应的元素容器中.在创建真实DO ...
- 虚拟Dom详解 - (一)
随着Vue和React的风声水起,伴随着诸多框架的成长,虚拟DOM渐渐成了我们经常议论和讨论的话题.什么是虚拟DOM,虚拟DOM是如何渲染的,那么Vue的虚拟Dom和React的虚拟DOM到底有什么区 ...
- JavaScript(2)---DOM详解
JavaScript(2)---DOM详解 一.DOM概念 什么是DOM DOM全称为文本对象模型(Document Object Model),它定义了所有HTML元素的对象和属性,以及访问他们的方 ...
- JavaScript进阶内容——DOM详解
JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...
- XML解析之DOM详解及与SAX解析方法的比较
XML解析(DOM) XML文件解析方法介绍 我们所用到的NSXMLParser是采用SAX方法解析 SAX(Simple API for XML) 只能读,不能修改,只能顺序访问,适合解析大型XML ...
- HTML,javaScript,DOM详解
HTML DOM 教程 DOM 教程 DOM 简介 HTML DOM 定义了访问和操作 HTML 文档的标准方法. DOM 将 HTML 文档表达为树结构. HTML DOM 树 HTML DOM 简 ...
- BOM和DOM详解
DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,M(模型)可以理解为网页文档的树形 ...
随机推荐
- 模拟退火算法（SA）求解TSP 问题（C语言实现）
这篇文章是之前写的智能算法(遗传算法(GA).粒子群算法(PSO))的补充.其实代码我老早之前就写完了,今天恰好重新翻到了,就拿出来给大家分享一下,也当是回顾与总结了. 首先介绍一下模拟退火算法(SA ...
- Oracle wm_concat（）函数
oracle wm_concat(column)函数使我们经常会使用到的,下面就教您如何使用oraclewm_concat(column)函数实现字段合并 如: shopping: ------- ...
- BS结构中，web如何将数据进行DES加密并写道IC卡中
在IC卡应用系统中,一般都要对IC卡数据进行DES加密,以保证数据的安全.友我科技RFID读写器云服务2.0充分考虑了这个需求,只需要软件工程师简单的配置即可实现数据的加解密并且写到数据块中.如下图所 ...
- ENetwork Basic Configuration PT Practice SBA
CCNA Exploration: 网络基础知识 (版本 4.0) A few things to keep in mind while completing this activity: 1 Do ...
- 利用 Forcing InnoDB Recovery 特性解决 MySQL 重启失败的问题
小明同学在本机上安装了 MySQL 5.7.17 配合项目进行开发,并且已经有了一部分重要数据.某天小明在开发的时候,需要出去一趟就直接把电脑关掉了,没有让 MySQL 正常关闭,重启 MySQL 的 ...
- 【Tomcat源码学习】-1.概述
Tomcat是用java语言开发的一个Web服务器,最近花了差不多两周时间对Tomcat 9.0源码进行了一遍学习,由于知识储备有限,也只是理解了一个大概,下面就由我来给大家分享一下我对Tomcat的 ...
- React的学习（上）
摘要 众所周知,前端三大框架Angular.React.Vue,所以为了跟上时代的步伐,最近开始着手学习React,这时候就发现个大问题,框架一直在更新,提倡的编写语法也在更新,网上有许多教程都是一两 ...
- 《Vue2.0 实践揭秘》终于出版啦！
不知不觉间在园子开博都两年多了,最近一些园友问最近去哪了为何都没有新的文章了.最近确实发生了很多的事,一是忙工作二就是忙着写书.这还得多些园子的小编,自两年前发表的"架构师修炼"系 ...
- 图解WebGL&Three.js工作原理
“哥,你又来啦?”“是啊,我随便逛逛.”“别介啊……给我20分钟,成不?”“5分钟吧,我很忙的.”“不行,20分钟,不然我真很难跟你讲清楚.”“好吧……”“行,那进来吧,咱好好聊聊” 一.我们讲什么? ...
- 玩转Eclipse--如何使用eclipse可以更好的提高我们的工作效率
工欲善其事必先利其器,更加了解我们的开发工具有利于提高开发效率,而合理使用快捷键可以使我们事半功倍,这里收集了eclipse中的几种常见设置,eclipse的优化以及非常全面的快捷键介绍,大家有用到的 ...