文章目录

• 一，什么是DOM？
• 二，DOM的具体用途及发展史？
• 1，操作元素
• 2，操作属性
• 3，操作文本

一，什么是DOM？

DOM：Document Object Model（文档对象模型）

BOM：Browser Object Model（浏览器对象模型）

• DOM与BOM的区别：
• DOM是文档对象模型，是对浏览器（可以看成一个容器）内的内容进行操作；
• BOM是浏览器对象模型，是对浏览器本身进行操作的（比如控制浏览器窗口的大小、管理浏览器访问的历史页面、查看浏览器的版本信息等等）；

二，DOM的具体用途及发展史？

简单的说：DOM就是封装了针对页面中标签的一系列操作（比如实现页面中的轮播图、定时器等等）

• DOM的发展史（各阶段提出的功能）

1. DOM 0 ：

定义的属性及方法有：

（1）docuement.write()

（2）document.body
（3）document.forms

（4）…

应用： 利用DOM 0 所提供的方法获取表单元素；
注意：
（1）form表单有特殊性，可以通过表单元素（input、textarea、select）的name属性，就可以获取form中的这些表单元素。而且它们共同构成了一个对象数组。用对象的方式来获取。
（2）document有一个forms的属性，表示的是该页面中所有的form标签组成集合；form标签中主要是放表单元素的，form是由各个表单元素组成的；

2. DOM 1 ：

使用两个标准的获取方法：
（1）getElementById （通过标签的id获取标签，相对效率、准确率高；但不能精准选择元素）
（2）getElementsByTagName （通过标签明获取标签，获取到的元素是一个集合，也就是获取的是一个伪数组，即使一个标签获取的也一样是个集合）

• 除了document用于上面两种方法，其他的节点也一样拥有这两种方法；

制定了两个子规范：

（1）DOM Core（核心部分）： 把xml文档设计为树形节点结构，并为这种结构的运行机制制订了一套规范化标准。同时定义了创建、编辑、操纵这些文档结构的属性和方法。（核心思想：树形节点结构、相关的属性与方法）

（2）DOM HTML： 针对HTML文档、标签集合，以及与个别HTML标签相关的元素定义了对象、属性和方法。

树形节点结构： 看下面代码，画属性结构图：

这份文件执行时，在浏览器内部会生成一份DOM节点树的结构：

DOM中的三大节点类型：

1. 元素节点
2. 属性节点
3. 文本节点
   三大节点如下图：
   

• 这些节点类型可以通过代码去判断的： 在JS中获取节点对象之后，在这个对象中会有一个属性叫：

  nodeType

  ，这个属性的返回值就决定了这个节点的类型（返回值为1，表示为元素节点；为2，表示属性节点；为3，表示文本节点）；
• 如下图：
  

各个节点之间的关系：

• 如下一段HTML代码：
  
• 他们的关系如下：
  

可以通过如下属性来获取元素：

1. parentNode：父节点
2. childNodes：得到的是一个数组，然后使用索引访问即可，
3. firstChild：第一个孩子节点
4. lastChild：最后一个孩子节点
5. nextSibling：下一个兄弟节点
6. previousSibling：上一个兄弟节点

为了防止不同浏览器在运行代码时出现的问题（比如有的浏览器会把空白字符解析成节点的）有以下解决方案：可以直接通过api：

firstElementChild lastElementChild

• 除了以上获取文档元素的方法之外还有其它的方法吗？

1. document.getElemetsByClassName（通过class名来获取）：选取复合class名的元素，组成一个集合，跟TagName的规则一样； 劣势：有的浏览器不支持，有兼容性问题；
2. document.getElementsByName（针对表单元素，通过name属性值来获取元素），跟TagName的规则也一样；劣势：兼容问题，局限性比较大；

3. DOM 2 ：

增加的功能如下：

（1）对样式表的操作
（2）事件绑定

• onmouseover 鼠标移上事件
• onmouseout 鼠标移出事件
• onmousemove 鼠标移动事件
• onmousedown 鼠标上的按钮被按下了
• onmouseup 鼠标按下后，松开时激发的事件

事件绑定如下图：（注意：鼠标移动事件，会触发很多次）

4. DOM 3 ：

增加的功能如下：

（1）验证功能

• DOM 2和DOM 3 在获取元素方面没有新的方法；

1，操作元素

（1）创建 createElement
（2）插入 appendChild，insertBefore
（3）复制 cloneNode
（4）删除 removeChild
（5）替换 replaceChild

• createElement 是一个方法，它是属于任何一个元素节点对象的；一般都是通过document去调用；代码格式：

  document.createElement(标签名);

  
  
  注意：创建好的元素，并没有添加进页面，也没有在DOM节点的结构中；

• appendChild 把元素追加到某个标签的最后边；具体是添加到哪个节点的最后边，取决于是谁掉用了这个方法； 代码格式：

  节点.appendChild(要被添加的一个节点);

  
  

• insertBefore 把元素添加到指定元素的前边，由一个节点去调用这个方法，那么就表示在这个节点之内，会把新添加的元素放在指定元素的前边；代码格式：

  父节点.insertBefort(新添加的元素，指定的元素);

  
  

• cloneNode 复制一个节点，是由要被复制的节点去调用的；会返回被拷贝的结果；（拷贝会有浅copy和深copy）
  
• 注意： 这个方法接受一个布尔类型的参数，默认是false，表示的是浅拷贝，只复制这个节点本身，参数是true表示的是深拷贝，会复制这个节点包括节点内的所有的内容；代码格式：

  要拷贝的节点.cloneNode(false为浅拷贝，true为深拷贝，默认为false)；

• removeChild 这个方法也是由父节点调用，表示的是要删除父节点中的某个元素，要删除哪个元素取决于该方法接受的参数；代码格式：

  父节点.removeChild(要删除的节点);

  
  

• replaceChild 这个方法由父节点调用，表示要用一个新的节点替换现有的某个节点，这两个节点都会将参数给传递进来，代码格式：

  父节点.replace(新的节点，老的节点);

  
  

2，操作属性

对于属性的操作我们有两种方式：
（1）直接使用对象.属性这种方式这是DOM 0 级提出的，只对html中定义的属性起作用；
（2）使用DOM 提供的一个方法getAttribute()和setAttribute()，这个是DOM 1 级提出的;

• DOM 0 级对属性的操作： 可以获取HTML中的属性，也可以修改HTML的属性；
• DOM 1 级对属性的操作： 添加了两个方法：
  （1）getAttribute 获取属性： 由一个元素节点去调用，应该给它传递一个属性的名字，从而获得这个属性的值；代码格式：

  元素节点.getAttribute(属性名);

  
  （2）setAttribute 设置属性： 由一个元素节点调用，应该传递要设置的属性名和属性值；代码格式：

  元素节点.setAttribute(属性名，属性值);

3，操作文本

使用一个非常强大的innerHTML属性；

• 使用innerHTML时，要注意的问题：
  （1）注意如果给innerHTML赋值，它会把标签中原来的内容都删除掉；代码格式：

  元素节点.innerHTML="要输入的文本";

  
  
  （2）如果只是添加内容，怎么办？只要用+=这个运算符就可以了；
  （3）innerHTML这个属性不止可以字符串，也可以把标签字符串添加进去，形成dom节点；

三，JS操作盒子模型需要的13个api

主要分为三大系列：

1. client系列
2. offset系列
3. scroll系列

client系列:

1. clientWidth: 获取box的内容区域width+左右padding （可视区域width的大小）
2. clientHeight：获取box的内容区域height+上下padding （可视区域height的大小）
3. clientTop：获取盒子的上边框大小
4. clientLeft：获取盒子的左边框大小

获取当前页面一屏的宽度（可视区）：

1）document.body.clientWidth
2）document.documentElement.clientWidth

获取当前页面一屏的高度（可视区）：

1）document.body.clientHeight
2）document.documentElement.clientHeight
注意：

1. 因为不同浏览器有兼容性问题，所以两种方式选择合适的
2. 获取的值，是一个数字，并没有单位
3. client系列只能获取值，而不能设置值
4. client系列所得到的不管内容是否溢出，得到的都是盒子的可视区域

offset系列：

1. offsetWidth: box.offsetWidth 在clientWidth的基础上加了border
2. offsetHeight: box.offsetHeight 在clientHeight的基础上加了border
3. offsetTop: 获取一个绝对定位元素相对于参考点上面的距离
4. offsetLeft: 获取一个绝对定位元素相对于参考点左面的距离
5. offsetParent: 获取一个绝对定位元素的参考点

scroll系列:

1. scrollWidth:
   在没有内容溢出的情况下：scrollWidth = clientWidth
   在内容溢出的情况下：scrollWidth的值约等于真实内容的宽度，
   注意： 不同浏览器中得到的值可能不一样
   overflow属性会影响scrollWidth。
   只能获取值，不能设置值

2. scrollHeight:
   在没有内容溢出的情况下：scrollHeight = clientHeight
   在内容溢出的情况下：scrollHeight的值约等于真实内容的高度，
   注意： 不同浏览器中得到的值可能不一样
   overflow属性会影响scrollHeight。
   只能获取值，不能设置值

获取当前页面真实内容的高度:

1）document.body.scrollHeight
2）document.documentElement.scrollHeight

scrollTop:
获取垂直滚动条滚动的距离（获取垂直滚动条卷去的高度）
注意： 该属性可以自行设置数值（可读可写）

scrollLeft:
获取水平滚动条滚动的距离；
注意： 该属性可以自行设置数值（可读可写)

获取当前页面卷上去高度:
1）document.body.scrollTop
2）document.documentElement.scrollTop

一张网页卷上去最大高度是多少？

• scrollHeight - clientHeight