js中DOM和BOM

1. javascript是由哪几部分组成？

ECMAScript:（ES5.0）变量数据类型运算符流程控制语句数组对象函数...
DOM : 文档对象模型
注意：不是一个具体对象
很多对象组成的集合
提供很多的属性和方法操作网页（标签、属性、内容）
document对象是DOM中最顶层对象
BOM : 浏览器对象模型
操作浏览器

什么是DOM

概念：文档对象模型
注意：
1. 不是一个具体对象,是很多对象组成的集合
2. 这些对象提供了很多的属性和方法，操作网页文档
3. 操作html：标签标签属性标签内容、css样式属性
4. DOM独立于平台和语言的一个对象： c js Java

DOM可分为三个部分

核心DOM：是用于XML与HTML的共用接口(增删改查)

XML DOM：操作xml --- 了解

HTML DOM：操作html(操作属性、操作文本、操作css样式) --- 重点

浏览器为什么可以解析js?

浏览器中包含了js的解析器(js引擎)

节点树

整个文档看作一个文档节点(对象) ： document
所有的元素都是元素节点 : element
标签中所有的属性都是属性节点：attribute
标签中所有的文本都是文本节点(空格和换行符) ：text
一切都是节点(对象)

BOM是由哪些对象组成？

window : BOM中最顶层对象
screen ：屏幕对象
location：地址栏对象
history：历史记录对象
navigator：导航对象
document ：文档对象
frames :框架集

window 对象

访问属性：对象.属性名
访问方法：对象.方法名()

注意：
1. window对象是BOM中的最顶层对象(全局对象),
2. 全局对象window在使用的时候可以省略
3. 使用var在函数外部定义的变量其实就是window对象上的一个属性(全局属性)
3. 定义的函数其实就window对象上的一个方法(全局方法)

方法：
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
确定： true
取消： false
项目中：增加用户体验
案例：删除邮件提醒

screen对象

是window中的一个属性

访问语法： window.screen 或者 screen
访问screen对象属性
对象.属性名
screen.availHeight : 除了任务栏外的高度
screen.height : 包含了任务栏的高度
注意：只有全局对象才能省略，其他对象调用时不能省略

history对象

语法： window.history 或者 history
属性

history.length ：访问历史记录个数
history.back() ：返回到上一个记录
history.forward() ：返回到下一个记录
history.go(数字) ：跳转到当前记录上几个或下几个记录
go(1) ：下一个记录
go(2) ：下2个记录
go(-1)：上一个记录
go(-2)：上两个记录

location

语法： window.location 或者 location

全球统一资源定位符：url
http://www.jd.com:80/xxx/abc/index.html?name=张三&age=34#run

协议(protocol)：http:// https:// ftp://
域名(hostname)：www.jd.com
80(port)：端口
页面路径(pathname)：xxx/abc/index.html
参数（search） ?键=值&键=值&键=值 -- name=张三&age=34
锚点(hash) : #锚点 -- #run
- 获取协议：
  location.protocol
- 获取锚点：
  location.hash

重点属性
- 获取URL地址
  location.href
- 设置URL地址：
  location.href = 值

为什么要学习BOM

通过BOM对象完成以下内容:

弹出新的浏览器窗口、移动、关闭浏览器窗口及调整窗口大小； --- window对象

提供WEB浏览器详细信息的导航对象；---navigator对象

提供装载到浏览器中页面的详细信息的定位对象；---location对象

提供用户屏幕分辩率详细信息的屏幕对象；--- screen对象

对cookie的支持。等等

对历史记录进行操作 -- history对象

总结：
1. window对象是BOM中的最顶层对象
2. navigator,location..以上对象都是window对象中的属性，这是属性又是一个对象

DOM是由哪些对象组成？

document ：DOM顶层对象
元素节点
属性节点
文本节点
注释节点(了解)

DOM中如何获取元素(标签)？

通过id

document.getElementById()

通过标签名：

document.getElementsByTagName() //数组
元素对象.getElementsByTagName() //数组

通过类名：

document.getElementsByClassName() //数组
元素对象.getElementsByClassName() //数组

通过html5选择器访问
单个元素获取

document.querySelector(选择器)
元素对象.querySelector(选择器)

多个元素获取

document.querySelectorAll(选择器)
元素对象.querySelectorAll(选择器)

计时器

间歇调用 : 重复调用
开启计时器：setInterval(函数或代码快,时间);
清除计时器：clearInterval(计时器id号);
超时调用 : 只调用一次
开启计时器：setTimeout(函数或代码快,时间);
清除计时器：clearTimeout(计时器id号);

计时器：

超时调用：多少毫秒后调用一次函数或者代码快，只调用一次
语法： setTimeout(函数或代码块,时间);
语法案例：

            a. setTimeout(function(){},2000);
            b. setTimeout(box,2000);
               function box(){}

清除计时器：clearTimeout(超时调用Id);
间歇调用：多少毫秒后调用一次函数或者代码块，会一直调用
语法： setInterval(函数或代码块,时间);
语法案例：

            a. setInterval(function(){},2000);
            b. setInterval(box,2000);
               function box(){}

清除计时器：clearInterval(间歇调用Id);