课程名称：前端工程师2022版
课程章节：DOM
课程讲师： 慕课网
课程目标：掌握DOM的操作
课程内容：

第2章 DOM基本概念
第3章 节点操作
第4章 DOM事件
第5章 定时器和延时器
第6章 动画效果开发-拓展

一、 什么是Dom？

1.1 定义

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，计有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM（文档对象模型）是HTML和XML的应用程序接口（API）。DOM将把整个页面规划成由节点层级构成的文档。

所谓文档对象模型，其实就是对网页HTML中的各种元素的一种内部的表示，例如HTML中的头、段落、列表、风格、ID等，所有的元素都能通过DOM来访问 。

JavaScript最终是要操作Html页面，让Html变成DHtml，而操作Html页面就要用到DOM。DOM就是把Html页面模拟成一个对象，如果JavaScript只是执行一些计算、循环等操作，而不能操作Html也就失去了它存在的意义。

DOM就是Html页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。

1.2 图解

关于window

整个页面或者说窗口就是一个window对象---------------window是顶级对象

页面中定义的变量和方法都是window的

window.id

document.getElementById()

使用window对象的属性、方法的时候可以省略window。

比如：

window.alert(‘hello’);

可以省略成alert(‘hello’);

window.document可以直接写document

能不写window就不要写，这样可以减少js文件的字节数。

window.alert(‘大家好！’);//弹出警告对话框

window.confirm(‘确定要删除吗？’);//确定、取消对话框，返回true或false;

window.navigate(url);//将网页重新导航到url,支持IE、Opera11.6。并不推荐,有些浏览器不行,

建议使用window.location.href=‘url’;//支持大多数浏览器

二、动态操作DOM元素

1.获取DOM

getElementById(), （非常常用），根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围、

getElementsByName()，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组。

getElementsByTagName()，获得指定标签名称的元素数组，比如getElementsByTagName(“input”)可以获得所有的标签。*表示所有标签

2.添加、移除、替换

document.write只能在页面加载过程中才能动态创建。

可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//父元素对象.removeChild(子元素对象);删除元素。

createElement(‘element’);创建一个节点

appendChild(node); 追加一个节点

removeChild(node);移除一个节点

replaceChild(new,old);替换一个节点

insertBefore(new,参照);把节点加到前面（插到某个节点前面）

方法：

属性：

firstChild

lastChild

**3.**用innerHTML还是createElement()、appendChild()与removeChild()？

操作页面的元素的时候是用innerHTML的方式还是createElement()、appendChild()与removeChild()的方式？

1.对于大量进行节点操作时，使用innerHTML的方式性能要好于频繁的Dom操作(有专门用C或C++写的html解析器。)。先将页面的HTML代码写好，然后调用一次innerHTML,而不要反复调用innerHTML.

2.对于使用innerHTML=‘’的方式来删除节点，在某些情况下会存在内存问题。比如：div下面有很多其他元素，每个元素都绑定有事件处理程序。此时，innerHTML只是把当前元素从节点树上移除了，但是那些事件处理程序依然占用内存。

三、 js操作样式

修改元素的样式是className属性。

(class是JavaScript的一个保留字，属性不能用关键字、保留字所以就变成className了)网页开关灯的效果。

修改元素的样式不能this.style=“background-color:Red”。

单独修改样式的属性使用“style.属性名”。注意在css中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为JavaScript中-是不能做属性、类名的。

操作float样式的时候

IE:obj.style.styleFloat=‘right’;

其他浏览器：obj.style.cssFloat=‘right’;

四、Form对象

常用：click(),focus(),blur();//相当于通过程序来触发元素的单击、获得焦点以及失去焦点的事件。

form对象是表单的Dom对象。

方法：submit()提交表单，但是不会触发onsubmit事件。

实现autopost，也就是焦点离开控件以后页面立即提交，而不是只有提交submit按钮以后才提交，当光标离开的时候触发onblur事件，在onblur中调用form的submit方法。

在点击submit后form的onsubmit事件被触发，在onsubmit中可以进行数据校验，如果数据有问题，返回false即可取消提交.

课程总结：