一 DOM
JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。
有这几个概念：文档、元素、节点
整个文档是一个文档节点
每个标签是一个元素节点
包含在元素中的文本是文本节点
每一个属性是一个属性节点
注释属于注释节点
二 DOM树：
DOM树是结构
所谓层级结构是指元素和元素之间的关系
父子，兄弟
解析器输出的树是由DOM元素和属性节点组成的
当我们说树中包含DOM节点时，意思就是这个树是由实现了DOM接口的元素组成。这些实现包含了其它一些浏览器内部所需的属性。
脱离文档流后层级结构关系还是没有变的
DOM 是 Document Object Model（文档对象模型）的缩写。提供给Javascript用来动态修改文档状态…
5个常用的DOM方法：
getElemenById、getElementsByTagName、getElementsByClassName、getAttribute和setAttribute
-
文档：DOM中的"D"
如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生了。它把你编写的网页文档转换成为一个文档对象。
2.对象：DOM中的"O"
对象（object）是一种非常重要的数据类型。对象是自包含的数据集合，包含在对象里的数据可以通过两种形式访问——属性和方法。
2.1 属性是隶属于某个特定对象的变量；
2.2 方法是只有某个特定对象才能调用的函数
对象就是由一些属性和方法组合在一起而构成的一个数据实体。在javaScript中，属性(property)和方法(method)都使用“点”语法来访问：
2.3 object.propertyobject.method()
JavaScript语言里面的对象可以分为三种类型。
1. 用户定义对象：由程序员自行创建的对象。
2. 內建对象：內建在JavaScript语言里的对象，如Array、Math和Date等。
3. 宿主对象：由浏览器提供的对象。
即使是在JavaScript的最初版本里，对编写脚本来说非常重要的一些宿主对象就已经可用了，他们当中最基础的对象是window（浏览器窗口）对象。
4.模型：DOM中的"M"
DOM中的“M”代表着“Model”（模型），它的含义是某种事物的表现形式，DOM代表着加载到浏览器窗口的当前网页。浏览器提供了网页的模型，而我们可以通过JavaScript去读取这张地图。
利用JS操作 DOM 可以让你更改网页的交互方式。所有网页的交互都依赖这种 DOM 技术。DOM 是一颗树，树枝和树叶都做了编号，通过脚本的函数去寻找哪一个枝干的哪一个叶子，对这个叶子做什么改变。例如
5.image
形如一颗倒长的树。一颗家谱树，而家谱树本身就是一种模型，其典型用法是表示表示人类家族谱系。
它很容易表明家族成员之间的关系，把复杂的关系简明地表示出来，因此这种模型非常适合表示一份html的文档：
image
清除浮动弊端的方法
* 1.父元素也浮动 margin:0 auto 失效
* 2.父级 dispaly:inline-block 同上
* 3.父级加高
* 4.br标签
`<br clear = "all">`
* 5.在浮动的元素后面加 div设置样式
`
.class{
clear:both/left/right/none;
}`
* 6.伪类清除浮动
`.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }`
* 7.父级加 overflow:hidden;
一般常用第6种方法，其他方法都有局限性或者违反了结构样式分离的标准。
但是第6种只能解决高度塌陷，无法解决同级浮动元素遮盖的效果。
可以用第7种来解决，overflow:hidden;