onclick:鼠标单击事件
onmouseover:鼠标经过事件
onmouseout:鼠标移开事件
onchange:文本框内容改变事件
onselect:文本框内容被选中事件
onfocus:光标聚集
onblur:光标离开
onload:网页导入
onunload:关闭网页
对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；
Date 日期对象
访问方法语法：“<日期对象>.<方法>”
Date对象中处理时间和日期的常用方法：
get/setDate() 返回，设置日期
get/setFullYear() 返回，设置年份，用四位数表示
get/setYear() 返回，设置年份
get/setHours 返回，设置小时 24小时
get/setMouth ()返回，设置月份 0-11月 所以加一
get/setMinutes ()返回，设置分钟
get/setTime() 返回，设置时间，毫秒为单位
返回/设置年份方法:get/setFullYear() 返回/设置年份，用四位数表示。
var mydate=new Date();//当前时间2014年3月6日
document.write(mydate+"<br>");//输出当前时间
document.write(mydate.getFullYear()+"<br>");//输出当前年份
mydate.setFullYear(81); //设置年份
document.write(mydate+"<br>"); //输出年份被设定为 0081年。
结果：Thu Mar 06 2014 10:57:47 GMT+0800 2014
Thu Mar 06 0081 10:57:47 GMT+0800
返回星期方法: getDay() 返回星期，返回的是0-6的数字
返回/设置时间方法: get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的
日期的毫秒数。
字符串:
返回指定位置的字符: stringObject.charAt(index)
字符串分割split(): stringObject.split(separator,limit)
提取字符串substring(): stringObject.substring(startPos,stopPos)
提取指定数目的字符substr(): stringObject.substr(startPos,length)
向上取整ceil()： Math.ceil(x)
向下取整floor()： Math.floor(x)
四舍五入round()： Math.round(x)
随机数 random()： Math.random() 注：random() 方法可返回介于 0 ~ 1之间的一个随机数。
数组定义的方法：
1. 定义了一个空数组:
var 数组名= new Array();
2. 定义时指定有n个空元素的数组：
var 数组名 =new Array(n);
3.定义数组的时候，直接初始化数据：
var 数组名 = [<元素1>, <元素2>, <元素3>...];
我们定义myArray数组，并赋值，代码如下：
var myArray = [2, 8, 6];
说明：定义了一个数组 myArray，里边的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。
数组元素使用：
数组名[下标] = 值;
注意: 数组的下标用方括号括起来，从0开始。
数组连接concat()：arrayObject.concat(array1,array2,...,arrayN)
指定分隔符连接数组元素join(): arrayObject.join(分隔符) 注：使用.join("")可以进行紧密连接。""内无空格
颠倒数组元素顺序reverse()： arrayObject.reverse()
选定元素slice()： arrayObject.slice(start,end) 注：从已有的数组中返回选定的元素。
数组排序sort()： arrayObject.sort(方法函数) 注：sort()方法使数组中的元素按照一定的顺序排列。
window对象: window对象是BOM的核心，window对象指当前的浏览器窗口。
window对象方法:
alert():：显示带有一段消息和一个确认按钮的警告框
prompt()： 显示可提示用户输入的对话框
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
open()：打开一个新的浏览器窗口或查找一个已命名的窗口
close()：关闭浏览器窗口
print()：打印当前窗口的内容
focus()：把键盘焦点给与一个窗口
blur()：把键盘焦点从顶层窗口移开
moveBy()：可相对窗口的当前坐标把它移动指定的像素
moveTo()：把窗口的左上角移动到一个指定的坐标
resizeTo()：把窗口的大小调整到指定的宽高
scrollTo()：把内容滚动到指定的坐标
setInterval()：每隔指定的时间执行代码
setTimeout()：在指定的延迟时间之后来执行代码
clearInterval()：取消setInterval()的设置
clearTimeout()取消setTimeout()测设置
History 对象：history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
window.history.[属性|方法]
返回前一个浏览的页面：window.history.back(); 等价于 window.history.go(-1);
返回下一个浏览的页面： window.history.forward(); 等价于 window.history.go(1);
返回浏览历史中的其他页面：window.history.go(number);
注：浏览器中，返回当前页面之前浏览过的第二个历史页面，代码如下：
window.history.go(-2);
注意：和在浏览器中单击两次后退按钮操作一样。
同理，返回当前页面之后浏览过的第三个历史页面，代码如下：window.history.go(3);
Location对象：location.[属性|方法] location用于获取或设置窗体的URL，并且可以用于解析URL。
Navigator对象：Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
对象属性：appCodeName：浏览器代码名的字符串表示
appName：返回浏览器的名称
appVersion：返回浏览器的平台和版本信息
platform：返回运行浏览器的操作系统平台
userAgent：返回由客户机发送服务器的user-agent头部的值
screen对象: window.screen.属性 screen对象用于获取用户的屏幕信息。
availHeight：窗口可以使用的屏幕高度，单位像素；
availWidth：窗口可以使用的屏幕宽度，单位像素；
colorDepth：用户浏览器表示的颜色位数，通常为32位（每像素的位数）；
pixelDepth：用户浏览器表示的颜色位数，通常为32位（每像素的位数）（IE不支持此属性）；
height：屏幕的高度，单位像素；
width：屏幕的宽度，单位像素；
屏幕分辨率的高和宽: window.screen 对象包含有关用户屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
注意:
1.单位以像素计。
2. window.screen 对象在编写时可以不使用 window 这个前缀。
屏幕可用高和宽度:
1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。
注意:
不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、
属性和文本的树结构（节点树）。
HTML文档可以说由节点构成的集合，DOM节点有:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
节点属性：
nodeName：返回一个字符串，起内容是给定节点的名字
nodeType：返回一个整数，这个数值代表给定节点的类型
nodeValue：返回给定节点的当前值
遍历节点树：
childNodes：返回一个数组，这个数组由给定元素节点的子节点构成
firstChild：返回第一个子节点
lastChild：返回最后一个子节点
parentNode：返回一个给定节点的父节点
nestSibling：返回给定节点的下一个子节点
previousSibling：返回给定节点的上一个子节点
DOM操作：
createElement(element)：创建一个新的元素节点
createTextNode()：创建一个包含给定文本的新文本节点
appendChild()：指定节点的最后一个子节点列表之后添加一个新的子节点
insertBefore()：将一个给定节点插入到一个给定元素节点的给定子节点的前面
removeChild()：从一个给定元素中删除一个节点
replaceChild()：把一个给定父元素里的一个子节点替换为另外一个节点
注：前两个是document方法
document.getElementsByName(name) 返回带有指定名称的节点对象的集合。
document.getElementsByTagName(Tagname) 返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中
的顺序。
注：1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
3. TagName可看似某类，getElementsByTagName获取相同类的人集合。
如获取小孩这类人，getElementsByTagName("小孩")。
elementNode.getAttribute(name) 通过元素节点的属性名称获取属性的值。
elementNode.setAttribute(name,value) setAttribute() 方法增加一个指定名称和值的新属性，或者把一个
现有的属性设定为指定的值。
节点属性：
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
1. nodeName : 节点的名称
2. nodeValue ：节点的值
3. nodeType ：节点的类型
一、nodeName 属性: 节点的名称，是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
访问子节点childNodes：elementNode.childNodes 访问选定元素节点下的所有子节点的列表，返回的值可以看作是
一个数组，他具有length属性。
访问子节点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
访问父节点parentNode：elementNode.parentNode 获取指定节点的父节点 注意:父节点只能有一个。
访问兄弟节点：
1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：
nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：
nodeObject.previousSibling
说明：如果无此节点，则该属性返回 null。
注意: 两个属性获取的是节点。IE 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
解决问题方法:
判断节点nodeType是否为1, 如是为元素节点，跳过。
插入节点appendChild()：appendChild(newnode) 在指定节点的最后一个子节点列表之后添加一个新的子节点。
插入节点insertBefore()：insertBefore(newnode,node); insertBefore() 方法可在已有的子节点前插入一个
新的子节点。
删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法：nodeObject.removeChild(node)
参数node ：必需，指定需要删除的节点。
替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法：node.replaceChild (newnode,oldnew )
参数：newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。
注意:
1. 当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
2. newnode 必须先被建立。
创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：document.createElement(tagName)
参数: tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：document.createTextNode(data)
参数：data : 字符串值，可规定此节点的文本。
浏览器窗口可视区域大小：
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
二、对于 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
或者
Document对象的body属性对应HTML文档的<body>标签
• document.body.clientHeight
• document.body.clientWidth
在不同浏览器都实用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
网页尺寸scrollHeight：
scrollHeight和scrollWidth，获取网页内容高度和宽度。
一、针对IE、Opera:
scrollHeight 是网页内容实际高度，可以小于 clientHeight。
二、针对NS、FF:
scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。
三、浏览器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
注意:区分大小写
scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。
网页尺寸offsetHeight：
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
一、值
offsetHeight = clientHeight + 滚动条 + 边框。
二、浏览器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
innerHTML 属性：
innerHTML 属性用于获取或替换 HTML 元素的内容。
语法：Object.innerHTML
注意:
1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。
2.注意书写，innerHTML区分大小写。
改变 HTML 样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？
语法：Object.style.property=new style;
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
显示和隐藏（display属性）：
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
语法：Object.style.display = value
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
控制类名（className 属性）
className 属性设置或返回元素的class 属性。
语法：object.className = classname
作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观
网友评论