文章目录

一，什么是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
# javascript
Logo
向您推荐>>Eolink开发者社区

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

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生