DOM

1 DOM概念

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

DOM又称为文档树模型

文档：一个网页可以称为文档

节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

元素：网页中的标签

属性：标签(元素)的属性

2 获取元素的方式

1. 通过id获取元素

document.getElementById()

2. 通过类名获取元素

document.getElementsByClassName()

3. 通过标签名获取元素

document.getElementsByTagName()

4. 通过name名获取元素

document.getElementsByName()

5. 通过选择器的querySelector获取元素

document.querySelector()

6. 通过选择器的querySelectorAll获取元素

document.querySelectorAll()

3 事件初识

事件：触发-响应机制

Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

（1）事件三要素

事件源:触发(被)事件的元素

事件类型:事件的触发方式(例如鼠标点击或键盘点击)

事件处理程序:事件触发后要执行的代码(函数形式)

（2）事件的基本使用

鼠标单击事件：onclick    浏览器加载完成事件：onload

（3）事件触发的多种写法

HTML内部书写所有

HTML行内触发方法

HTML外部书写

补充：绑定事件的是事件对象

      触发事件的是事件源对象

4 非表单元素的属性操作

1. 添加src属性值显示图片

变量.src="./";

2.改变图片大小

变量.width=500;

变量.height=500;

3. 通过style改变宽高

变量.style.width=500+"px";

变量.style.height=500+"px";

4. 通过类名改变宽度

变量.className="什么";

5. 隐藏元素

（1）src=""

（2）display=none; 不占位置的

（3）visibility="hidden"

6. this的指向问题

    1 普通函数中，this指向window
    2   构造函数中，this指向实例化对象
    3   对象函数中，this指向当前的对象
    4  事件函数中，this指向事件源

5 表单元素属性操作

value 用于大部分表单元素的内容获取(option除外)

type 可以获取input标签的类型(输入框或复选框等)

disabled 禁用属性checked 复选框选中属性

selected 下拉菜单选中属性

checked 

6 InnerText

（1）返回被选元素的文本内容

console.log(变量.InnerText)

（2）设置被选元素的文本内容

变量.InnerText="什么"