一,什么是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标签相关的元素定义了对象、属性和方法。


树形节点结构: 看下面代码,画属性结构图:

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
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐