JavaScript之DOM、DOM树

一 DOM

JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。

有这几个概念：文档、元素、节点

整个文档是一个文档节点

每个标签是一个元素节点

包含在元素中的文本是文本节点

每一个属性是一个属性节点

注释属于注释节点

二 DOM树：

DOM树是结构

所谓层级结构是指元素和元素之间的关系

父子，兄弟

解析器输出的树是由DOM元素和属性节点组成的

当我们说树中包含DOM节点时，意思就是这个树是由实现了DOM接口的元素组成。这些实现包含了其它一些浏览器内部所需的属性。

脱离文档流后层级结构关系还是没有变的

DOM 是 Document Object Model（文档对象模型）的缩写。提供给Javascript用来动态修改文档状态…

5个常用的DOM方法：

getElemenById、getElementsByTagName、getElementsByClassName、getAttribute和setAttribute

1. 文档：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的文档：
![](https://img2020.cnblogs.com/blog/1823155/202106/1823155-20210615151140448-355795390.png)

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;