Dom入门

简述

　　DOM全称是Document Object Model，即文档对象模型，它是一套用于管理控制html文档的规则。

　　它的本质就是将标记文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。

Dom树

　　DOM 将 XML 文档和HTML文档作为一个树形结构，而树叶被定义为节点

　　

基本使用

获取对象

　　我们可以通过document.getElementById("id值")通过id来获取元素对象

操作Element对象

　　获取到Element对象后，我们可以通过查阅文档，得知我们想要操作的对象的属性值有哪些

　　例如我们现在获取的是img标签的对象，我们就可以操作它的src属性，来达到更换图片这一效果

　　再例如h1标签可以通过innerHTML属性修改标签里的文字内容

事件

　　事件就是某些组件被执行了某些操作后然后触发某些代码执行的一个过程。

事件的绑定

　　我们可以在html标签后直接绑定一个事件，比如我想绑定鼠标点击事件，绑定在一张img图片上，我就在img标签后加一个onclick标签，里面的参数写javascript代码，来实现点击图片后会触发什么事件

　　但一般我们不这么干，因为事件的代码很长的话，就会在标签里面写很多的东西

　　一般我们使用JavaScript的函数来实现，我们在html标签的onclick写我们定义的函数名，来实现事件

　　这样我们html标签和JavaScript就独立开，降低了程序的耦合度，但这样做依然在html的标签里新增了内容

　　我们还可以写成这样的形式

　　用document.getElementById获取Element对象，然后通过对象的onclick属性绑定函数，实现事件

　　我们发现这个fun1只服务于这个img标签，所以可以之间再简写成这样

　　这样子实现就更加地降低了html和JavaScript的耦合，看起来更加赏心悦目

　　现在我们就可以实现一个简单的小案例，用鼠标控制灯泡的暗灭，用鼠标的点击实现灯泡的开关

Dom的对象

　　Dom包含Document、Element、Attribute、Text、Comment这五个对象，还包括node这五个对象的父节点对象

Document对象

　　每个载入浏览器的 HTML 文档都会成为 Document 对象。

　　Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

　　Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

　　注意document可以通过window对象获取是在html文档的特点，如果是xml就不一样了

Document属性

Document方法

　　因为id值一般是唯一的，所以除了getElementById方法获取的element对象是唯一的，其余获取的element对象都可以是数组

　　除了这些方法，document对象还能创建其他Bom对象

createAttribute(name)	创建拥有指定名称的属性节点，并返回新的 Attr 对象。
createComment()	创建注释节点。
createTextNode()	创建文本节点。

Element对象

　　在 HTML DOM 中，Element 对象表示 HTML 元素。

　　Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

　　NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。

　　元素也可以拥有属性。

Element方法

　　element.setAttribute(属性名，属性值)方法可以设置获取elemen对象的属性

　　element.removeAttribute(属性名)方法可以从元素中移除指定属性

Node节点对象

　　Node节点对象是一个特殊的对象，它是其余五个对象的父对象

　　Node节点对象功能就是CRUDdom节点树

appendChild()	向节点的子节点列表的结尾添加新的子节点
removeChild()	删除（并返回）当前节点的指定子节点。
replaceChild()	用新节点替换一个子节点。

　　

　　

 　　

 

　　

DOM 将 XML 文档作为一个树形结构，而树叶被定义为节点