一、浏览器工作的基本流程

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详解的更多相关文章

  1. 虚拟DOM详解

    虚拟DOM简介 Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树,其主要是通过vnode,实现一个无状态的组件,当组件状态发生更新时,然后触发Virtual Dom数据的变 ...

  2. Day04 dom详解及js事件

    day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证   上次课内容回顾: JS中ECMAScript用法: JS定义变 ...

  3. 虚拟Dom详解 - (二)

    第一篇文章中主要讲解了虚拟DOM基本实现,简单的回顾一下,虚拟DOM是使用json数据描述的一段虚拟Node节点树,通过render函数生成其真实DOM节点.并添加到其对应的元素容器中.在创建真实DO ...

  4. 虚拟Dom详解 - (一)

    随着Vue和React的风声水起,伴随着诸多框架的成长,虚拟DOM渐渐成了我们经常议论和讨论的话题.什么是虚拟DOM,虚拟DOM是如何渲染的,那么Vue的虚拟Dom和React的虚拟DOM到底有什么区 ...

  5. JavaScript(2)---DOM详解

    JavaScript(2)---DOM详解 一.DOM概念 什么是DOM DOM全称为文本对象模型(Document Object Model),它定义了所有HTML元素的对象和属性,以及访问他们的方 ...

  6. JavaScript进阶内容——DOM详解

    JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...

  7. XML解析之DOM详解及与SAX解析方法的比较

    XML解析(DOM) XML文件解析方法介绍 我们所用到的NSXMLParser是采用SAX方法解析 SAX(Simple API for XML) 只能读,不能修改,只能顺序访问,适合解析大型XML ...

  8. HTML,javaScript,DOM详解

    HTML DOM 教程 DOM 教程 DOM 简介 HTML DOM 定义了访问和操作 HTML 文档的标准方法. DOM 将 HTML 文档表达为树结构. HTML DOM 树 HTML DOM 简 ...

  9. BOM和DOM详解

    DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,M(模型)可以理解为网页文档的树形 ...

随机推荐

  1. Python JavaScript概述

    一.如何编写? 1.JavaScript代码存在形式 <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  2. 理解C++中的头文件和源文件的作用【转】

    一.C++编译模式通常,在一个C++程序中,只包含两类文件--.cpp文件和.h文件.其中,.cpp文件被称作C++源文件,里面放的都是C++的源代码:而.h文件则被称作C++头文件,里面放的也是C+ ...

  3. CTR预估中的贝叶斯平滑方法(二)参数估计和代码实现

    1. 前言 前面博客介绍了CTR预估中的贝叶斯平滑方法的原理http://www.cnblogs.com/bentuwuying/p/6389222.html. 这篇博客主要是介绍如何对贝叶斯平滑的参 ...

  4. Spring配置数据源的几种方法

    一:数据源的配置1.通过JNDI配置数据源    1.在tomcat context.xml中配置数据源        <Resource name="jdbc/ds" au ...

  5. 从Chrome源码看JS Array的实现

    .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } .crayon-line spa ...

  6. html5表单元素详解

    表单是Html中获取用户输入的手段.此文对表单的元素进行了详细整理. 表单基本元素 form input button form元素 html4中,form元素相当于表单的外包装,其他都要在里面.ht ...

  7. Python实现二叉树的四种遍历

    对于一个没学过数据结构这门课程的编程菜鸟来说,自己能理解数据结构中的相关概念,但是自己动手通过Python,C++来实现它们却总感觉有些吃力.递归,指针,类这些知识点感觉自己应用的不够灵活,这是自己以 ...

  8. 如何在 ASP.NET Core 中发送邮件

    前言 我们知道目前 .NET Core 还不支持 SMTP 协议,当我么在使用到发送邮件功能的时候,需要借助于一些第三方组件来达到目的,今天给大家介绍两款开源的邮件发送组件,它们分别是 MailKit ...

  9. 【算法系列学习】Dijkstra求最短路 [kuangbin带你飞]专题四 最短路练习 D - Silver Cow Party

    https://vjudge.net/contest/66569#problem/D trick:1~N各点到X可以通过转置变为X到1~N各点 #include<iostream> #in ...

  10. 搭建本地git仓库

    使用工具:git|码云 步骤: 注册码云账号,创建项目名称等. 本地git配置 本地文件目录:git init(初始化创建分支master) 基础配置:git config --global user ...