DOM对象

基本概念

DOM

DOM Document Object Model 文档对象模型

就是把HTML文档模型化，当作对象来处理

DOM提供的一系列属性和方法可以视作一个工具箱，极大地方便了我们对文档的处理。

内容概念

文档(Document)：就是指HTML或者XML文件

节点(Node)：HTML文档中的所有内容都可以称之为节点，常见的节点有

元素节点属性节点文本节点注释节点

元素(Element)：HTML文档中的标签可以称为元素

结构概念

父节点当前节点的父级

子节点当前节点的子级

兄弟节点和当前节点同属一个父级的节点

获取元素

getElementById

通过id寻找一个元素（找到的是一个元素对象）该方法只能被document对象调用（同一个文档中id不能重复）

getElementsByTagName

通过标签名寻找一类元素（找到的是由元素对象组成的伪数组）

即可以被document调用，又可以被元素对象调用，被元素对象调用时表示在该元素对象内部执行查找

设置属性

元素对象.属性名 = “属性值”;

等价于

<标签属性名=”属性值”>

绑定事件

事件三要素

事件源.事件 = function(){ 事件处理程序 }

等价于

<标签事件=”事件处理程序”>

和对象方法一样，this指的还是调用该方法的对象

常用属性

常用标签属性

DOM对象的属性和HTML的标签属性几乎是一致的，常用的有src、title、className、href和style

其中className对应就是标签的class属性，但是由于class在JS中是关键字，所以变成了className

内部文本属性

innerHTML

获取和设置标签中的内容，设置的内容会当作节点对象被解析到DOM树上

innerText

获取和设置标签中的内容，设置的内容会被当作普通文本（有兼容性问题）

innerContent