Html文档流和文档对象模型DOM理解
前言
在理解浮动和定位时,触碰到文档流概念。为了更好理解浮动和定位,学习了文档流和DOM(文档对象模型)。
正文
DOM(文档对象模型)简单理解就是编写的html页面所有内容构成的树形结构。例如:

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
- 整个文档是一个文档节点。
- 每个 HTML 元素是元素节点。
- HTML 元素内的文本是文本节点。
- 每个 HTML 属性是属性节点。
- 注释是注释节点。
文档流是另一个概念,流实际上就是浏览器在页面上摆放Html元素所用的方法,大多数元素默认在文档流中。浏览器从Html文件最上面开始,从上到下沿着元素流逐个显示所遇到的各个元素。即:元素按HTML中编写的先后顺序,上下左右堆叠排列。其中块级元素前后换行,内联元素前后不换行。
这篇文章会持续更新,等我对文档流和DOM有了新的理解。
Html文档流和文档对象模型DOM理解的更多相关文章
- IE文档版本和文档流模式
使用X-UA-Compatible来设置IE浏览器兼容模式 文件兼容性用于定义让IE如何编译你的网页.此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式. < ...
- engineercms支持文档协作和文档流程,基于flow
我们用于管理文件的系统,比如网盘云盘等,并不具备流程功能,所谓流程,本质是修改文档状态,比如,从初始状态,不同权限的人登录,查看这个文件,具有修改这个文档状态的权限,比如将初始状态修改为已审查状态. ...
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS文档流与块级元素和内联元素(文档)
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- CSS文档流、块级元素、内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- 关于css浮动框是否脱离文档流的分析
在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...
- 文档对象模型DOM通俗讲解
转自:http://www.jb51.net/article/42671.htm 在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍.加深 ...
- JavaScript编程:文档对象模型DOM
5.文档对象模型DOM JS里的DOM和XML里的DOM不同,但是解析方式是一样的. document.getElementByID("id")根据ID获得元素节点. 创建和操作节 ...
- 文档对象模型DOM
文档对象模型 DOM 1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 提供给用户操作document obj 的标准接口 文档对象模型 是表示和操作 H ...
随机推荐
- Levenshtein Distance算法(编辑距离算法)
编辑距离 编辑距离(Edit Distance),又称Levenshtein距离,是指两个字串之间,由一个转成另一个所需的最少编辑操作次数.许可的编辑操作包括将一个字符替换成另一个字符,插入一个字符, ...
- python基础学习笔记2
词典 词典(dictionary)与列表相似,也可以存储多个元素.存储多个元素的对象称为容器(container); 常见的创建词典的方法: >>>dic = {'tom':11 ...
- android视频播放器
RTSP(Real Time Streaming Protocol),RFC2326,实时流传输协议,是TCP/IP协议体系中的一个应用层协议,由哥伦比亚大学.网景和RealNetworks公司提交的 ...
- 【工业串口和网络软件通讯平台(SuperIO)教程】九.重写通讯接口函数,实现特殊通讯方式
SuperIO相关资料下载:http://pan.baidu.com/s/1pJ7lZWf 1.1 统一的IO接口 开发一套设备驱动同时具备串口和网络通讯能力,通讯接口在逻辑上是统一的,在此基础 ...
- 原生HTML5 input type=file按钮UI自定义
原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...
- 关于移动端meta设置
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initi ...
- Menu创建菜单
菜单是用户界面中最常见的元素之一,使用非常频繁,在Android中,菜单被分为如下三种,选项菜单(OptionsMenu).上下文菜单(ContextMenu)和子菜单(SubMenu),今天这讲是O ...
- Genymotion 解决虚拟镜像下载速度特别慢的问题
Genymotion号称Android模拟器中运行最快的,但是服务器在国外,Android镜像下载起来那个速度就不想说了. Add new device后下载速度太慢了,容易失败 解决方法如下: ...
- XIB 上的控件不显示怎么办
原文:http://www.cnblogs.com/sandyzhang/p/5660061.html 午休时间遇到有人求助:说是XIB 上内容都有的,但是看不到,demo 运行的话控件都存在的. ...
- iOS -[PFPASIDataCompressor compressBytes:length:error:shouldFinish:] in PFPGZIPInvocationCompressor.o
添加动态库报错 "_deflate", referenced from: -[PFPASIDataCompressor compressBytes:length:error:sho ...