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(模型)可以理解为网页文档的树形 ...
随机推荐
- 实现一个竖直的显示表头的表格(vue版本)
今天遇到一个问题,实现这样一个竖直的显示表头的表格,如下图.默认显示两列. vue实现代码如下: tableComponent.vue: <template> <table ...
- c# 逆波兰式实现计算器
语文不好,不太会组织语言,希望不要太在意. 如题,先简要介绍一下什么是逆波兰式 通常我们在写数学公式的时候 就是a+b+c这样,这种表达式称为中缀表达式,逆波兰式又称为后缀表达式,例如a+b 后缀 ...
- Intellij Idea 用Maven 创建Hibernate 项目
第一步:创建maven项目 2. 3. 4.第三步保存之后进行下一步 到此点击finish maven项目创建成功,点击完成后会进行一系列jar包的下载 maven 仓库的默认存储位置 第二步:连接数 ...
- 一个web应用的诞生(11)--在探首页
就要面对本章的一个难点了,说是难点可能仅仅对于我来说,毕竟我是一个js渣,既然首页打算使用动态加载的形式,那么与后台交互的方式就要进行选择,目前比较流行的为RESTful的形式,关于RESTful的文 ...
- 使用charles抓取htpps的方法
自己整理的步骤做个记录 1.下载证书,官方地址:http://www.charlesproxy.com/ssl.zip 可直接点击链接下载:http://charlesproxy.com/getssl ...
- 读书笔记 effective c++ Item 54 让你自己熟悉包括TR1在内的标准库
1. C++0x的历史渊源 C++标准——也就是定义语言的文档和程序库——在1998被批准.在2003年,一个小的“修复bug”版本被发布.然而标准委员会仍然在继续他们的工作,一个“2.0版本”的C+ ...
- Javascript使用克隆的原型模式
ECMAScript 5中提供了Object.create()方法. 使用这个方法很容易克隆一个一模一样的对象. var animal=function(){ this.blood=100; this ...
- ssh整合时报出的异常及解决办法
com.opensymphony.xwork2.inject.DependencyException: com.opensymphony.xwork2.inject.ContainerImpl$Mis ...
- Markdown - 语法简介
标题 在文字里书写不同数量的“#”可以完成不同的标题,如下: # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 列表 无序列表的使用,在 ...
- Codeforces Round #410 (Div. 2)C题
C. Mike and gcd problem time limit per test 2 seconds memory limit per test 256 megabytes input stan ...