js的BOM和DOM

JavaScript组成

JavaScript和ECMAScript通常都被人们用来表达相同的含义，但JavaScript的含义却比ECMA-262中规定的要多得多。

一个运行在的JavaScript实现应该由下列三个不同的部分组成:

核心( ECMAScript)：JavaScript语言的核心，包含基本语法、数据类型、关键字...

文档对象模型( DOM)：提供访问和操作网页内容的方法和接口，可操作HTML中的标签内容、样式、结构。

document.write(“你好”)，输出内容至网页，这就是DOM中方法。

浏览器对象模型( BOM)：提供与浏览器交互的方法和接口。可操作浏览器窗口，比如浏览器地址栏，浏览器访问历史等；

window.alert(“你好”);，浏览器弹出一个消息对话框，这就是BOM中的方法。

BOM简介

什么是BOM？

BOM(Browser Object Model)即浏览器对象模型使 JavaScript 有能力与浏览器“对话”。

BOM提供了访问浏览器各种功能部件的途径，例如浏览器窗口本身、浏览历史等；而DOM提供了访问浏览器中网页文档各元素的途径，包括页面中的超链接、表单等各种HTML元素及其内容。

BOM与DOM是独立于程序语言和平台的标准，W3C定义了一组标准接口，而这些接口在浏览器中以对象的形式实现。BOM与DOM均由一组对象组成，对象定义了属性和方法。

什么是window对象？

Window对象是BOM顶层对象，表示浏览器窗口或者网页中的框架。

Window对象是脚本中的全局对象，可以在任何地方调用，脚本中任何对象的使用最终都要追溯到对window对象的访问，所以在使用window对象的各种属性和方法时，window前缀可以省略。

访问window对象或子对象属性和方法，要按照层次关系，使用“.”运算符将它们连接起来。

window.alert(); 简写方式 alert();

window.document.write(); 简写方式 document.write()

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

//变量a就是全局变量，也是window对象上的属性

var a = 12;

//调用

console.log(window.a);//12

全局函数是 window 对象的方法。

//定义全局函数

function box(){

console.log("全局方法");

}

//调用

window.box();

甚至 HTML DOM 的 document 也是 window 对象的属性之一.

window对象的属性和方法

学习一个对象的使用无非就是学习里面的属性和方法

alert()	显示带有一段消息和一个确认按钮的警告框。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。
clearInterval()	取消由 setInterval() 设置的 timeID。
clearTimeout()	取消由 setTimeout() 方法设置的 timeID
scrollTo()	浏览器滚动到指定的位置

定时器函数

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

setInterval语法

setInterval(code,millisec);

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

setTimeout语法

setTimeout(code,millisec);

清除计时器

clearInterval(timeId) 取消由 setInterval() 设置的 timeId。

clearTimeout(timeId) 取消由 setTimeout() 方法设置的 timeId。

定时器一般用于制作动画效果，比如每隔一段时间就移动某个元素的位置

screen对象

availWidth	显示器屏幕可用宽度，除任务栏外
availHeight	显示器屏幕可用高度，除任务栏外
Width	实际宽
Height	实际高

history对象

该对象记录了浏览器的浏览历史，并提供一组方法访问曾经访问过的历史页面。

length	整数值，表示浏览器历史列表中的URL的个数
back()	返回到浏览器列表中当前页面之前的页面，与浏览器的“返回”功能相同
forward()	前进到浏览器中当前页面之后的页面，与浏览器的“前进”按钮功能相同
go(1)	访问浏览器列表中指定的页面，该方法接受一个参数。参数可正可负。

location对象

该对象存储了当前显示的文档的地址，包括完整的URL地址以及组成URL地址的各个部分。其中各个属性被重新赋值后，浏览器将自动刷新，载入新的URL地址。

属性	描述
hash	表示URL地址中的锚点部分，包括前导符“#”。可读可写
host	表示URL中的主机名和端口，即IP地址或者域名端口，可读可写
hostname	表示URL中的主机名部分。可读可写
href	表示当前页面完整的URL地址，可读可写。
pathname	表示URL中的页面路径部分，包含页面文件名称，可读可写
port	表示URL地址中的端口部分，可读可写
protocol	表示URL中的协议部分，包括尾部的“：”符号，可读可写。如http:
search	表示URL中的参数部分，可读可写。如：?name=mary

navigator对象

该对象提供有关浏览器的各种信息，所有浏览器都支持该对象

userAgent	返回由客户机发送服务器的 user-agent 头部的值。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。

DOM简介

什么是DOM？

DOM(文档对象模型)是一个使程序和脚本能够动态地访问和更新文档的内容、结构以及样式，并独立于平台和语言的接口。

W3C DOM提供了一套用于HTML和XML文档的标准对象，以及访问这些文档的标准接口(方法)。

DOM与具体的编程语言无关，可以在C、JavaScript、ActionScript、Java等语言中实现。

DOM分类

DOM可分为三个部分：

核心DOM：是用于XML与HTML的共用接口；（操作节点树，如创建，删除，查找等）

XML DOM：XML专用接口，其实就是DOM进行增强，加入了一些适用于自己的接口；

HTML DOM：HTML专用接口，其实就是DOM进行增强，加入了一些适用于自己的接口；(HTML DOM适合操作属性，如读取或修改属性的值)

DOM基本操作

获取HTML元素

getElementById()方法

功能：在文档中查找指定的id节点，如果找到则返回该节点

例如：var id_img=document.getElementById(“id_img”)

说明：所有浏览器都支持。

getElementsByTagName()

功能：返回带有指定标签名的对象的数组

例如：var list=ulObj.getElementsByTagName(“li”)

说明：节点列表length属性表示了节点列表中节点的个数

getElementsByName()

功能：返回带有指定名字（name）对象的数组

例如：var hobby=document.getElementsByName(“hobby”)

getElementsByClassName(类名)

功能：返回带有指定类名（className）对象的数组

例如：

var box = obj.getElementsByClassName(‘box’);

HTML5 选择器

document.querySelector(“选择器”);//返回页面中的第一个元素

比如:document.querySelector(“div”); //获取页面中的第一个div;

document.querySelector(“#username”);

//获取页面中id为username的元素

document.querySelectorAll(“选择器”);//返回页面中所有匹配的元素

比如：document.querySelectorAll(“div”);

//获取页面中所有的div，返回值是一个数组；

值操作

文本内容操作

innerHTML ：可以操作元素对象中的HTML代码（带有标签的文本）
获取文本	节点对象.innerHTML
设置文本	节点对象.innerHTML = 值
innerText ：可以操作元素对象中文本（不带标签的纯文本）
获取文本	节点对象.innerText
设置文本	节点对象.innerText = 值
textContent ：可以操作文本节点或元素节点中的文本（推荐使用）
获取文本	节点对象.textContent
设置文本	节点对象.textContent = 值