DOM文档

1.DOM是文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

DOM又称为文档树模型

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

节点：网页中所有的内容都是节点

元素：网页中的标签

属性：标签的属性

2.模拟文档树结构

 

3.DOM经常进行的操作

获取元素

动态创建元素

对元素进行操作

事件

4.为什么要获取页面元素

列如：我们想要操作页面上的某一部分，需要先获取到该部分对应的元素，才进行操作

根据id获取元素

根据标签名获取元素

根据name获取元素

根据类名获取元素

根据选择器获取元素

5.总结

getElementById()

getElementsByTagName()

getElementsByName()

getElementsByClassName()

querySelector()

querySelectorAll()

6.事件

事件：触发-响应机制

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

事件三要素：

事件源：触发事件的元素

事件类型：事件的触发方式

事件处理程序：事件触发后要执行的代码

7.属性操作

非表单元素的属性

Href、title、id、src、ClassName

表单元素属性

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

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

disabled 禁用属性

checked 复选框选中属性

selected 下拉菜单选中属性

getAttribute() 获取标签行内属性

setAttribute() 设置标签行内属性

removeAttribute() 移除标签行内属性

与element.属性的区别: 上述三个方法用于获取任意的行内属性。

8.创建元素的三种方式

Document.write()

InnerHTML

Document.createElement()

9.事件对象的属性和方法

event.type 获取事件类型

clientX/clientY 所有浏览器都支持，窗口位置

pageX/pageY IE8以前不支持，页面位置

event.target || event.srcElement 用于获取触发事件的元素

event.preventDefault() 取消默认行为

10.常用的鼠标和键盘事件

onmouseup 鼠标按键放开时触发

onmousedown 鼠标按键按下触发

onmousemove 鼠标移动触发

onkeyup 键盘按键按下触发

onkeydown 键盘按键抬起触发