JavaScript里面的DOM和BOM

一、DOM和BOM是什么

JavaScript的组成

ECMAScript

js的基本语法

DOM

Document Object Model 文档对象模型

 

DOM就是指js当中用来操作HTML和XML的API

 

文档：就是指页面，在现阶段就指html文档

 

文档的组成：

节点：

标签(元素)节点、属性节点、文本节点、注释节点

BOM

Browser Object Model 浏览器对象模型

 

BOM就是指js当中用来操作浏览器部分功能的API

 

二、DOM可以做什么

1 可以向页面上添加元素（属性、文本）  --  增

2 可以动态的把页面上的元素删除 --  删

3 可以修改页面上的元素(属性、文本） --  改

4 可以查找到页面上的元素 --  查

 

操控页面元素、进行增删改查

三、DOM的相关概念

2.1  DOM级别

DOM0    DOM的初级阶段

js在浏览器中最初的获取页面元素的方式

例：

document.froms[0] 获取页面上的第一个from元素

document.images[0] 获取页面上的第一人图片元素

DOM1   中级阶段

w3c为了统一标准，规定了节点类型，使不同的浏览器使用相同的方法，当前用的最多

例：

document.getElementById() 根据元素的id属性获元素

DOM2和DOM3

各自在之前标准的基础上新增一些新的内容，但是当前浏览器对DOM2和DOM3的支持还不够完善，知道有这么个东西就行

 

2.2 文档树

树

 

 

树形结构里面，每一个元素，都称之为一个节点

2.3节点（node）

 

节点：

树形结构里面的成员，都称之为节点

节点的类型：

标签(元素)节点 ---    页面上的元素 ---    1

属性节点 ---    标签的属性 ---    2

文本节点(空格、回车、文本)  -- 文本节点 ---    3

注释节点 ---    就是页面中被注释掉的内容 ---    8

四、获取页面上的元素

4.1 根据元素的Id属性获取元素

document.getElementById(目标元素的id)

 

4.2 根据元素的标签名获取元素

document.getElementsByTagName(目标元素的标签名)

 

 

这个方式获取到的是一个类似数组的东西，如果要注册事件，必须把里面的元素对象取出来才能注册

4.3 根据元素的类名获取元素

document.getElementsByClassName(类名);

 

 

得到的也是多个元素对象的集合

 

存在兼容问题：

ie9以下不支持

五、DOM对象的属性

5.1 一般

一般来说，访问每一个标签对象的属性，是和在html中的标签的属性名是一样

比如：id，href，width，height

5.2 特殊

有一些比较特殊：比如class，在es5里是保留字，为了区别开来，使用className来带替html中class属性

再比如：

表单控件里的那些只有两个情况的属性：checked、selected这些都是使用布尔类型来设置选中与否

六、事件(Event)

6.1 什么是事件

所谓事件，其实就是浏览器当中所发生的的特定交互瞬间 ---  点击某个元素、鼠标移动到某个元素上面

 

事件分为

触发

就是用户或者浏览器去触发一个事件

响应

就是执行某个函数

6.2 事件三要素

谁 事件源 页面的元素

 

做了什么 事件名称 交互的名称

 

怎么做的 处理函数(程序) 一段代码

6.3 注册(绑定)事件

行内式

写在标签的特定属性里

 

内嵌式

on的方式

事件源.on+事件名称 = 函数

 

addEventListener的方式

事件源.addEventListener(事件名称，事件处理程序，false)

 

兼容：

早期的火狐和ie6,7,8不支持

attachEvent的用法

事件源.attachEvent(on+事件名称,事件的处理程序)

 

兼容

早期的火狐和ie6,7,8支持

外联式

把写在script标签里的代码，转移到js文件中

 

6.4 常用的事件

onclick	鼠标单击
ondblclick	鼠标双击
onkeydown	按下键盘上的一个按键时触发
onkeyup	松开键盘上的一个按键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点，表示文本框等获得鼠标光标
onblur	失去焦点，表示文本框等失去鼠标光标
onmouseover	鼠标悬停
onmouseout	鼠标移出
onload	文档加载完成
onunload	关闭网页时触发
onsubmit	表单提交事件