说到学习JavaScript，已经学习2~3周的时间了，并且JavaScript也告一段落了！学习之后，那么就写点东西记录一下自己学习JavaScript的过程吧！
学习一样事物的时候，首先我们要带着疑问去学习；
1> 什么是JavaScript？
首先我们要知道它是什么？JavaScript是一门专门用来对网页进行编程的脚本语言；因为我是学习Java之后再来学习JavaScript的，所以我的第一疑问JavaScript是不是和Java有关系呢？其实并没有，虽然叫JavaScript，是因为NetScape公司借用Java这个时髦的名字而已，但是JavaScript借用了Java语法，其基础语法与java有很多类似的之处；
2> JavaScript能做些什么呢？
主要对网页进行编程的脚本语言：
✍ 给程序员一种全面控制HTML网页中所有元素的能力。有了JavaScript这个网页编程工具，我们就可以对网页所有HTML元素进行编程控制，包括增加、删除、修改元素以及元素属性能力；
✍ 可以在HTML网页中放入动态文本；
✍ 响应用户在使用网页时产生的时间；
✍ 用于校验用户输入的数据；
✍ 检查访问者的浏览器；
✍ 用于创建cookies；
3> JavaScript包含的五大技术体系
✍ JavaScript核心语言定义；
✍ 原声对象和内置对象；
✍ 浏览器对象模型BOM；
✍ 文档对象模型DOM；
✍ 事件处理模型；
4> 如何将JavaScript添加到(X)HTML网页文档中呢？
✍ 使用script元素在(X)HTML文档中直接嵌入JavaScript语句；
<script>
<pre name="code" class="javascript">//JavaScript的代码
</script>
✍ 将JavaScript源文件通过<script>元素的src属性链接到(X)HTML文档；
<script src="JavaScript文件的路径"></script>
✍ 脚本包含在(X)HTML事件处理程序属性中；
<p onclick="要执行的函数或者自定义内容">绑定onclick点击事件</p>
5> 定义JavaScript变量
JavaScript中变量是用var运算符(variable的缩写)加变量名定义的；由于JavaScript是弱类型，定义变量时无需明确数据类型声明，并且变量并一定要初始化；
例如：
var test = 0;
var test = 'helloWorld';
var test = 9.9;
var test;
都是正确的，都能通过编译器编译，并且在网页中正常执行；
6> JavaScript的数据类型
✍ 原始数据类型值：
JavaScript有5中原始数据类型,通过调用typeof运算符返回值查看变量类型：
➣Undefined ➔ 'undefined'；
Undefined(未定义)类型只有一个值，即undefined。当声明的变量未初始化时，该变量的默认值是undefined。
➣Boolean ➔ 'boolean'；
Boolean(布尔)类型是JavaScript中最常用的类型之一。它有两个值true和false；
➣Number ➔ 'number'；
JavaScript中定义最特殊的类型是Number型，这种类型既可以表示32位整型，也可以表示64位浮点数。直接输入的（而不是从另一个变量访问的）任何数字都被看做Number字面量。
➣String ➔ 'string'；
String类型的独特之处在于它是唯一没有固定大小的原始类型。可以用字符串存储0或更多的Unicode字符，由16位整数表示（Unicode是一种国际字符集）。
➣Null ➔ 'object'(引用类型返回的也是object)；
只有一个专用值unll，即它的字面量。值undefined实际上是从值null派生来的，因此JavaScript把它们定义为相等的；
null == undefined //返回true
❋ JavaScript中实现数据类型转换
转化为字符串值：JavaScript定义所有对象都有toString()方法，无论它是伪对象，还是真的对象。使用toString()方法对数据进行类型转换的结果由变量的值决定。
例如：
var test = false; //test的字面量是Boolean类型，值为false
test.toString(); //返回的值为'false'
var numInt = 10; //numInt是Number类型，值为10
var numfloat = 10.0; //numfloat是Number类型，值为10.0
numInt.toString(); //返回的值为'10'
numfloat.toString(); //返回的值为'10';如果numfloat的字面量是10.1，那么返回的值为'10.1'
对于非数字的原始值，JavaScript提供了两种转换成数字的方法，即parseInt()和parseFloat(),前者把值转换成整型，后者把值转换成浮点数。只有对String类型调用这些方法，它们才能正确运行。对其他类型返回的都是NaN。
var iNum1 = parseInt('1234blasd'); //返回1234
var iNum2 = parseInt('22.5'); //返回22
var iNum3 = parseInt('0xA'); //返回10
var fNum1 = parseFloat('1234absa');//返回1234.0
var fNum2 = vaparseFloat('22.3214');//返回22.3214
var fNum3 = paeseFloat('0xA'); //返回NaN
也可以强制转换：
➣ Boolean(value)——把给定的值转化为Boolean型；
➣ Number(value)——把给定的值转换成字符串；
➣ String(value)——把给定的值转换成字符串；
用这三个函数之一转换值，将创建一个新值，存放由原始值直接转换成的值。
❋ Boolean型转换：
方法 |
结果 |
备注 |
Boolean("") |
false |
空字符串 |
Boolean('hi') |
true |
非空字符串 |
Boolean(100) |
true |
非0数字 |
Boolean(null) |
false |
null |
Boolean(0) |
false |
0 |
Boolean(new Object()) |
true |
对象 |
❋ Boolean型转换：
方法 |
结果 |
Number(false) |
0 |
Number(true) |
1 |
Number(undefined) |
NaN |
Number(null) |
0 |
Number('2.2.5') |
NaN |
Number('1.5') |
1.5 |
Number(new Object()) |
NaN |
❋ String型转换：
可以把任何值转换成字符串；
✍ 引用数据类型值
JavaScript库中提供了大量封装好的对象给我们使用，同时我们还可以创建自定义对象。可以分为三种类型：
➣ 原生对象：
是由JavaScript所提供的、独立于宿主环境（即浏览器）的对象。简单点说，就是在ECMA-262标准中定义的对象；
➣ 内置对象：
内置对象JavaScript中提供的、独立于宿主环境的对象，这些对象在JavaScript程序执行时就已经存在。内置对象实际上也是原生对象的一种，但是与原生对象不同的是，内置对象不需要显式地初始化，因为它已经初始化了，ECMA-262标准中只定义了两个内置对象：Global和Math；
➣ 宿主对象：
宿主对象指与宿主环境(即浏览器)有关的对象。所有的BOM和DOM对象都是宿主对象。
我们可以用下面的表来记忆JS的基本数据类型和Java中数据类型的关系：
Java类型 |
对应JS类型 |
说明 |
byte |
number |
Java包装器：Byte，父类：Number |
short |
Java包装器：Short，父类：Number |
|
int |
Java包装器：Integer，父类：Number |
|
long |
Java包装器：Long，父类：Number |
|
float |
Java包装器：Float，父类：Number |
|
double |
Java包装器：Double，父类：Number |
|
char |
string |
Java包装器：Charset，父类：Object |
string |
Java中string不是基本类型，父类：Object |
|
boolean |
boolean |
Java包装器：Boolean，父类：Object |
✍ Object类:
JavaScript中的所有类都是由Object类来继承的，Object类中的属性和方法都会出现在其他对象中。
➣ Object类具有的属性：
Constructor——对创建对象的函数的引用（指针）。对于Object类，该指针指向原始的object()函数。
➣ Object类具有的方法：
hasOwnProperty(property)——判断对象是否具有某个特定的属性。必须用字符串指定该属性。
isPrototypeOf(object)——判断该对象是否为另一个对象的原型。
propertyIsEnumerable(property)——判断给定的属性是否可以为for..in语句进行枚举。
toString()——返回对象的原始字符串表示，对于Object类，ECMA-262标准没有定义这个值，所以不同的JavaScript实现具有不同的值。
valueOf()——返回最适合该对象的原始值。对于许多类，该方法返回的值都与toString()的返回值形同。
✍ 原始数据类型包装器类：
JavaScript中的Boolean、Number和String类分别是JavaScript原始数据类型Boolean、Number和String的包装类。这些对象在JavaScript实际编程中很少使用，所以我们最好还是使用原始值。Boolean、Number和String的所有属性和方法都可以应用在原始值上，因为他们是伪对象。
✍ Array类
可以创建数组！创建的几种方式如下
var iArray1 = new Array();
iArray1[0] = 'a'; //给数组的下标0的内存空间赋值为'a'
iArray1[1] = 'b'; //给数组的下标1的内存空间赋值为'b'
iArray1[2] = 'c'; //给数组的下标2的内存空间赋值为'c'
var iArray2 = new Array(20); //该数组长度为20
var iArray3 = new Array('a','b','c') //数组共三个值，按顺序分别是'a','b','c'；
✍ Date类
Date 对象用于处理日期和时间。
创建Date对象语法：
var myDate = new Date();//Date对象会自动把当前日期和时间保存为其初始值
属性 |
描述 |
constructor |
返回对创建此对象的 Date 函数的引用 |
prototype |
使您有能力向对象添加属性和方法 |
✍ Global类：
Global类是JavaScript中最特别的对象，它不需要声明和初始化。
✍ instanceof运算符：
在使用typeof运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，他都会返回”object”;instanceof是由ECMAscript引入java运算符；instanceof运算符与typeof运算符相识，用于识别正在处理的对象的类型。与typeof方法不同的是，instanceof方法要求开发者明确地确认对象为某特定类型。
7> 如何执行代码语句？
使用函数，函数是一组可以随时随地运行的语句，它们是JavaScript的核心。函数是由关键字function、函数名加一组参数以及置于括号中要执行的代码声明的。语法如下：
Function 函数名(参数1，参数2){
语句;
return 返回值;
// 可有返回值，也可以没有返回值！
// 没有返回值或者没有return语句，接收的值为undefined；
// 不执行return语句后面的代码；
}
8> JavaScript和(X)HTML是如何进行交互的？
JavaScript与(X)HTML的交互是通过当用户或者浏览器操作网页时发生的事件来处理的。
✍ 事件冒泡：
➣ 什么是事件冒泡？
在一个对象上触发某类事件，如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理 程序或者事件返回true，那么这个事件会向这个对象的祖先级对象传播，一层一层向上传播，直至它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
➣ 如果想阻止冒泡事件该怎么做？
事件对象提供了一个.stopPropagation()方法，该方法可以完全阻止事件冒泡。
jquery中对冒泡和默认行为的阻止方法同样也可以改写，改写后能够达到同样的效果
event.preventDefault(); 改写为： return false;
event.stopPropagation(); 改写为： return false;
（事件冒泡为默认，只是想阻止冒泡则需要执行命令行即可）
✍ 事件捕获：
事件捕获与冒泡正好相反，它的事件触发顺序是从最外层的对象(document对象)到最里层的对象。事件捕获也可以window级事件，但是需要开发者显式指定。(有人也将这个事件称为下降事件模型，因为它是从DOM层次的顶部下降到底部。)
✍ DOM事件流：
DOM同时支持事件捕获和时间冒泡，但是时间捕获先发生。两个事件流可以遍历DOM中的所有的对象，起点和结束为document对象（很多标准兼容的浏览器可以一直捕获/冒泡到window对象）。
✍ 事件句柄：
HTML4.0的新特性之一是有能力使HTML事件触发浏览器中的动作（action），比如当用户点击某个HTML元素时启动一段JavaScript。下面是一个属性列表，这些属性可插入HTML标签来定义事件动作。JavaScript中有哪些具体的事件呢？具体如下表（摘自W3Cschool手册）：
属性 |
当以下情况发生时，出现此事件 |
onabort |
图像加载被中断 |
onblur |
元素失去焦点 |
onchange |
用户改变域的内容 |
onclick |
鼠标点击某个对象 |
ondblclick |
鼠标双击某个对象 |
onerror |
当加载文档或图像时发生某个错误 |
onfocus |
元素获得焦点 |
onkeydown |
某个键盘的键被按下 |
onkeypress |
某个键盘的键被按下或按住 |
onkeyup |
某个键盘的键被松开 |
onload |
某个页面或图像被完成加载 |
onmousedown |
某个鼠标按键被按下 |
onmousemove |
鼠标被移动 |
onmouseout |
鼠标从某元素移开 |
onmouseover |
鼠标被移到某元素之上 |
onmouseup |
某个鼠标按键被松开 |
onreset |
重置按钮被点击 |
onresize |
窗口或框架被调整尺寸 |
onselect |
文本被选定 |
onsubmit |
提交按钮被点击 |
onunload |
用户退出页面 |
✍ 事件处理程序/监听器：
事件是被用户或者浏览器执行的某种行为。这些事件被命名为click、load和mouseover等等。为响应一个事件，而被调用的函数称为事件处理程序（DOM中叫做事件监听器）。响应click事件的函数称为onclick事件处理程序。事件处理程序的指派方式有两种方式：
➣ 传统事件处理程序指派方法：
这种方法可以为一个事件指派一个事件处理程序，它被所有的现代浏览器所支持；
➣ 现代事件处理程序指派方法：
这种方法可以为一个事件指派多个事件处理程序，只被现代的浏览器支持，而且存在浏览器兼容问题；
✍ 传统事件处理程序指派方法：
传统的事件处理程序指派方法采用两种方式之一将事件处理指派给事件：在JavaScript中或者HTML中；
✍ 现代事件处理程序指派方法：
IE和DOM中提供了更高级的方法，可以为每个事件指派多个事件处理程序。
➣ IE浏览器：
在IE中，每个元素和window对象有两个方法attachEvent()和detachEvent()。attachEvent()用于将一个事件处理程序绑定到一个事件，而 detachEvent()用于解除事件处理程序的绑定。这两个方法都有两个参数：要指派的事件处理的程序的名称、函数名称。
➣ DOM：
DOM中使用addEventListener()和removeEventListener()方法完成事件处理程序指派和删除的任务。这两个方法有三个参数，分别是事件的名称、要指派的函数、是否处理程序要用在冒泡或捕获阶段（如果处理程序要用在捕获阶段，值为true；如果要用在冒泡阶段，值为false）。
➣ 兼容性问题：
因为IE和DOM下对于现代事件处理程序指派的方式不同，为了保证我们编写的代码在IE和DOM浏览器系列下都能用，我们就要在操作时判断该浏览器是IE还是DOM，之后在执行对应的操作。例如：
if(document.addEventListener){
//执行DOM的事件指派或删除
}else if(document.attachEvent){
//执行IE的事件指派或删除
}
✍ 事件处理程序的返回值：
事件处理程序 |
返回false的效果 |
|
click |
单选按钮/复选框按钮 |
取消设置 |
sumbit按钮 |
表单提交被取消 |
|
reset按钮 |
表单不被重置 |
|
链接 |
不装载连接目标 |
|
dragdrop |
取消拖拽 |
|
keydown |
在用户按住下键时，取消随后的keypress事件 |
|
keypress |
取消keypress事件 |
|
mouseover |
导致对window的status或defaultStatus属性的改变被浏览器忽略 |
|
mousedown |
取消默认行为（拖的开始，现在的开始，接触连接） |
|
✍ Event对象：
➣ 什么是Event对象？
Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！
➣ 获取Event对象：
function(event){
// 传入参数event对象；
// 如果是IE浏览器是则获得window.evetn;
// 如果是DOM浏览器是则获得传入的参数event对象；
var e = window.event||event;
}
➣ 2 级 DOM 事件标准定义的属性：。
属性 |
描述 |
bubbles |
返回布尔值，指示事件是否是起泡事件类型 |
cancelable |
返回布尔值，指示事件是否可拥可取消的默认动作 |
currentTarget |
返回其事件监听器触发该事件的元素 |
eventPhase |
返回事件传播的当前阶段 |
target |
返回触发此事件的元素（事件的目标节点） |
timeStamp |
返回事件生成的日期和时间 |
type |
返回当前 Event 对象表示的事件的名称 |
➣ 不同点（详情请查看W3Cschool，版本不同兼容不同）：
不同点 |
IE |
DOM |
获取目标 |
.srcElement |
.target |
获取字符码 |
.keyCode |
.charCode以及.keyCode |
阻止事件的默认行为 |
.returnValue = false |
.preventDefault() |
中止事件传播(冒泡) |
.cancelBubble = true |
.stopPropagation() |
✍ 事件类型：
根据触发事件的对象以及事件触发的行为，浏览器中发生的事件可以分组成几个特定的类型，DOM规范中定义了如下几个事件组：
➣ 鼠标事件——用户使用鼠标执行某个任务时触发鼠标事件。
➣ 键盘事件——用户使用键盘触发键盘事件。
➣ HTML事件——当浏览器窗口或特定的客户机服务器交互发生改变事触发HTML事件。
✍ 鼠标事件:
➣ 鼠标事件是web上最常用的事件组。它包括：
click |
用户点击鼠标左键，以及当焦点在一个按钮上，用户按Enter键时，发生click事件 |
dblclick |
当用户双击鼠标左键时，发生dblclick事件 |
mousedown |
当用户按下任何鼠标按钮时，发生mousedown事件 |
mouseout |
当光标在一个元素上，并且用户将其移除元素边界时，发生mouseout事件 |
mouseover |
当光标在一个元素之外，并且用户将其移动到该元素上时，发生mouseover事件 |
mouseup |
放用户释放任何鼠标按钮时，发生mouseup事件 |
mousemove |
当光标在一个元素上移动时，重复发生mousemove事件 |
➣ 事件属性：
获取鼠标坐标：clientX和clientY；
type属性：获取鼠标事件；
button属性：获取鼠标按键；
✍ 键盘事件：
键盘事件在用户使用键盘时发生。它包括：
keydown |
当用户在键盘上按下一个键时发生；按住不放则重复发生 |
keypress |
当用户在键盘上按下一个字符键（不包括shift和alt键）时发生；按住不放则重复发生 |
keyup |
当用户释放一个按下的键时发生 |
✍ HTML事件：
load |
在窗口中，当页面被全部加载时，触发load事件 |
在框架集中，当所有的框架被全部装载时，触发load事件； |
|
在img元素中，当图片被全部加载时，触发load事件 |
|
在object元素中，当对象被全部加载时，触发load事件 |
|
unload |
在窗口中，当页面被全部卸载时，触发unload事件 |
在框架集中，当所有的框架被全部卸载时，触发unload事件 |
|
在object元素中，当对象被全部卸载时，触发unload事件 |
|
abort |
在object元素中，当用户中止装载进程之前，如果它还没有被完全加载，触发abort事件 |
error |
在窗口中，当一个JavaScript错误发生时，触发error事件 |
在img元素中，如果指定的图形不能被装载，触发error事件 |
|
在object元素中，如果对象不能被装载，触发error事件 |
|
在框架集中，如果一到多个框架不能被装载，触发error事件 |
|
select |
在一个文本框（input和textarea元素）中，当用户选择一到多个字符时，触发select事件 |
change |
在一个文本框（input和textarea元素）中，当它失去焦点，并且其值被改变，触发change事件 |
在select元素中，当他它的值改变时，触发change事件 |
|
submit |
当表单的提交按钮被点击时，触发submit事件 |
reset |
当表单的重置按钮被点击时，触发reset事件 |
resize |
当窗口或者框架尺寸被调整时，触发resize事件 |
scroll |
当有用户滚动有滚动条的任何元素时，触发scroll事件 |
focus |
当任何元素或者窗口获得焦点时，触发focus事件 |
blur |
当任何元素或者窗口失去焦点时，触发blur事件 |
9> 详解BOM（浏览器对象模型(Browser Object Model)）
✍ Window对象方法
方法 |
描述 |
alert() |
显示带有一段消息和一个确认按钮的警告框 |
blur() |
把键盘焦点从顶层窗口移开 |
close() |
关闭浏览器窗口 |
confirm() |
显示带有一段消息以及确认按钮和取消按钮的对话框 |
createPopup() |
创建一个pop-up窗口 |
focus() |
把键盘焦点给予一个窗口 |
open() |
打开一个新的浏览器窗口或查找一个已命名的窗口 |
print() |
打印当前窗口的内容 |
prompt() |
显示可提示用户输入的对话框 |
moveBy() |
可相对窗口的当前坐标把它移动指定的像素 |
moveTo() |
把窗口的左上角移动到一个指定的坐标 |
resizeBy() |
按照指定的像素调整窗口的大小 |
resizeTo() |
把窗口的大小调整到指定的宽度和高度 |
scrollBy() |
按照指定的像素值来滚动内容 |
scrollTo() |
把内容滚动到指定的坐标 |
setInterval() |
按照指定的周期（以毫秒计）来调用函数或计算表达式 |
setTimeout() |
在指定的毫秒数后调用函数或计算表达式 |
clearInterval() |
取消由setInterval()设置的timeout |
clearTimeout() |
取消由setTimeout()方法设置的timeout |
✍ history对象
➣ History对象属性：
属性 |
描述 |
length |
返回浏览器历史列表中的URL数量 |
➣ History对象方法：
方法 |
描述 |
back() |
加载history列表中的前一个URL |
forward() |
加载history列表中的下一个URL |
go() |
加载history列表中的某个具体页面 |
✍ Document对象
➣ Document对象属性：
属性 |
描述 |
cookie |
设置或返回与当前文档有关的所有cookie |
domain |
返回当前文档的域名 |
lastModified |
返回文档被最后修改的日期和时间 |
referrer |
返回载入当前文档的文档的URL |
title |
返回当前文档的标题 |
URL |
返回当前文档的URL |
➣ Document对象方法：
方法 |
描述 |
close() |
关闭用document.open()方法打开的输出流，并显示选定的数据 |
getElementById() |
返回对拥有指定id的第一个对象的引用 |
getElementsByName() |
返回带有指定名称的所有元素的节点列表 |
getElementsByTagName() |
返回带有指定标签名的所有元素的节点列表 |
getElementsByClassName() |
返回带有指定类名的所有元素的节点列表 |
open() |
打开一个流，以收集来自任何document.write()或document.writeln()方法的输出 |
write() |
向文档写HTML表达式或JavaScript代码 |
writeln() |
等同于write()方法，不同的是在每个表达式之后写一个换行符 |
（write()方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容）
✍ Location对象
➣ Location对象属性：
属性 |
描述 |
hash |
设置或返回从井号(#)开始的URL（锚） |
host |
设置或返回主机名和当前URL的端口号 |
hostname |
设置或返回当前URL的主机名 |
href |
设置或返回完整的URL |
pathname |
设置或返回当前URL的路径部分 |
port |
设置或返回当前URL的端口号 |
protocol |
设置或返回当前URL的协议 |
search |
设置或返回从问号(?)开始的URL（查询部分） |
➣ Location对象方法：
属性 |
描述 |
assign() |
加载新的文档 |
reload() |
重新加载当前文档 |
replace() |
用新的文档替换当前文档 |
✍ Screen对象属性
属性 |
描述 |
availHeight |
返回显示屏幕的高度 (除 Windows 任务栏之外) |
availWidth |
返回显示屏幕的宽度 (除 Windows 任务栏之外) |
height |
返回显示屏幕的高度 |
width |
返回显示器屏幕的宽度 |
✍ Navigator对象
➣ Navigator对象属性：
属性 |
描述 |
appCodeName |
返回浏览器的代码名 |
appMinorVersion |
返回浏览器的次级版本 |
appName |
返回浏览器的名称 |
appVersion |
返回浏览器的平台和版本信息 |
browserLanguage |
返回当前浏览器的语言 |
cookieEnabled |
返回指明浏览器中是否启用cookie的布尔值 |
cpuClass |
返回浏览器系统的CPU等级 |
onLine |
返回指明系统是否处于脱机模式的布尔值 |
platform |
返回运行浏览器的操作系统平台 |
systemLanguage |
返回OS使用的默认语言 |
userAgent |
返回由客户机发送服务器的user-agent头部的值 |
userLanguage |
返回OS的自然语言设置 |
➣ Navigator对象方法：
方法 |
描述 |
javaEnabled() |
规定浏览器是否启用Java |
taintEnabled() |
规定浏览器是否启用数据污点(data tainting) |
10> 详解DOM（文档对象模型(Docment Object Model)）
✍ DOM中定义了许多节点类型来表示节点的多个方面：
文档节点Document |
最顶层的节点(跟节点)，代表整个HTML文档，所有的其它节点都是附属它的。每个web文档都有一个文档节点 |
文档类型节点DocumentType |
<!DOCTYPE>元素用于声明一个页面的文档类型定义(Document Type Declaration,即DTD)。此元素声明位于文档中的最前面的位置，处于<html>标签之前。通过确认页面的DTD，可以同时确定页面使用哪种W3C规范(比如HTML或XHTML规范)。☒ |
文档片段节点DocumentFragment |
程序员可以使用DocumentFragment将一批子元素添加到任何类似node的父节点上，对这批子元素的操作不需要一个真正的根节点 |
元素节点Element |
在HTML DOM中，Element对象表示HTML元素。可以拥有类型为元素节点、文本节点、注释节点的子节点。 |
文本节点Text |
代表XHTML文档中元素的起始标记和结束标记之间，或者CDataSection内包含的普通文本。☒ |
属性节点Attr |
代表元素节点开始标记内指定的属性。☒ |
CDataSection节点 |
CDataSection接口是Text接口的子接口，没有定义任何自己的属性和方法。通过从 Node接口继承nodeValue属性，或通过从 CharacterData接口继承data属性，可以访问CDataSection的文本内容。☒ |
注释节点Comment |
代表注释。☒ |
（PS:☒表示该节点类型不能包含子节点）
✍ 节点含有的方法
方法 |
描述 |
appendChild() |
把新的子节点添加到指定节点 |
removeChild() |
删除子节点 |
replaceChild() |
替换子节点 |
insertBefore() |
在指定的子节点前面插入新的子节点 |
createAttribute() |
创建属性节点 |
createElement() |
创建元素节点 |
createTextNode() |
创建文本节点 |
getAttribute() |
返回指定的属性值 |
setAttribute() |
把指定属性设置或修改为指定的值 |
✍ 节点含有的属性
属性 |
描述 |
InnerHTML |
获取元素内容的最简单方法是使用innerHTML属性 |
NodeName |
属性规定的节点名称。 ➣ nodeName是只读的 ➣ 元素节点的nodeName与标签名相同 ➣ 属性节点的nodeName与属性名相同 ➣ 文本节点的nodeName始终是#text ➣ 文档节点的nodeName始终是#document |
nodeValue |
nodeValue 属性规定节点的值。 ➣ 元素节点的nodeValue是undefined或null ➣ 文本节点的nodeValue是文本本身 ➣ 属性节点的nodeValue是属性值 |
nodeType |
nodeType 属性返回节点的类型。 ➣ nodeType 是只读的 |
previousSibling |
指向前一个兄弟节点；该节点为第一个节点时返回null |
nextSibling |
指向后一个兄弟节点；该节点为最后一个节点时返回null |
firstChild |
指向在childNodes列表中的第一个子节点 |
lastChild |
指向在childNodes列表中的最后一个子节点 |
ownerDocument |
指向这个节点所属的文档 |
✍ 如何处理元素属性？
即便节点对象已经具有attributes方法，且已被所有类型的节点继承，然而，只有元素节点才能有特性。元素节点的attributes属性其实是NamedNodeMap，它提供一些用于访问和处理其内容的方法，包括：
➣ getNamedItem(name)——返回nodeName属性值等于name的节点；
➣ removeNamedItem(name)——删除nodeName属性值等于name的节点；
➣ setNamedItem(node)——讲node添加到列表中，按其nodeName属性进行索引；
➣ item(pos)——像NodeList一样，返回在位置pos的节点；
（PS：这些方法都是返回一个Attr节点，而非特性值。）
✍ 怎么实现对节点的创建和操作？
➣ 对节点的创建
createElement(tagName)——创建标记名为tagName的元素；
var div = doucment.createElement('div');//这样就创建了一个div元素
createTextNode(text)——创建包含文本的text的文本节点；
var text = doucment.createTextNode('Hello World');//这样就创建了一个文本节点
➣ 对节点的添加
appendChild(node)——把节点node添加到元素中；
div.appendChild(text)//text文本节点被添加到div元素尾;
insertBefore(newNode,oldNode)——在元素中的oldNode节点前添加新的newNode节点；
div.insertBefore(newNode,oldNode)//在div元素中的oldNode节点前添加新的newNode节点
➣ 对节点的删除
removeChild(node)——删除元素中的node子节点；
div.removeChild(text);//删除div元素中的text子节点
➣ 对节点的替换
replaceChild(newNode,oldNode)——在元素中的oldNode节点替换为新的newNode节点;
div.replaceChild(newNode,oldNode);//在div元素中的oldNode节点替换为了newNode节点
➣ 创建文档碎片
createDocumentFragment()——每一次添加节点都会对页面进行渲染一次，这样进程就上，然后再一次性的添加到元素中；
➣ 节点克隆
cloneNode(deep)——复制指定节点，deep默认值为false，如果deep值为false，则克隆节点本身，如果值为true，则克隆该节点本身及其后代所有子节点。
➣ innerHTML
设置或返回行的开始标签和结束标签之间的 HTML。
✍ 对文本节点进行操作
DOM中定义的方法对文本节点进行操作
➣ appendData(String)——将字符串添加在文本节点的文本尾部；
➣ deleteData(offset,count)——删除文本节点中从指定位置开始的指定数量的字符；
➣ insertData(offset,string)——将指定字符串插入到文本节点指定的位置中；
➣ replaceData(offset,count,string)——用给定的字符串代替文本节点指定位置指定数量的文本数据；
➣ splitText(offset)——将指定位置的文本节点分成两个部分，将右边的部分返回为一个新的文本节点，将左边的部分留在元素位置；
<p id="txt">这是前面这是后面</p>
<script>
var txt = document.getElementById("txt").childNodes[0];
var y = txt.splitText(4);
document.write("新文本节点:"+txt.nodeValue+"====");
document.write("原文本节点:"+y.nodeValue);
</script>
//输出结果为:新文本节点:这是前面====原文本节点:这是后面
➣ substringData(offset,count)——从文本节点的文本数据中返回指定位置指定数目的字符串；
✍ 对table对象进行操作
➣ Table 对象集合
集合 |
描述 |
cells[] |
返回包含表格中所有单元格的一个数组 |
rows[] |
返回包含表格中所有行的一个数组 |
tBodies[] |
返回包含表格中所有tbody的一个数组 |
➣ Table 对象属性
属性 |
描述 |
border |
设置或返回表格边框的宽度 |
caption |
对表格的<caption>元素的引用 |
cellPadding |
设置或返回单元格内容和单元格边框之间的空白量 |
cellSpacing |
设置或返回在表格中的单元格之间的空白量 |
frame |
设置或返回表格的外部边框 |
id |
设置或返回表格的id |
rules |
设置或返回表格的内部边框（行线） |
summary |
设置或返回对表格的描述（概述） |
tFoot |
返回表格的TFoot对象。如果不存在该元素，则为null |
tHead |
返回表格的THead对象。如果不存在该元素，则为null |
width |
设置或返回表格的宽度 |
➣ 标准属性
属性 |
描述 |
className |
设置或返回元素的class属性 |
dir |
设置或返回文本的方向 |
lang |
设置或返回元素的语言代码 |
title |
设置或返回元素的title属性 |
➣ Table 对象方法
方法 |
描述 |
createCaption() |
用于在表格中获取或创建<caption>元素 |
createTFoot() |
用于在表格中获取或创建<tfoot>元素 |
createTHead() |
用于在表格中获取或创建<tHead>元素 |
deleteCaption() |
从表格删除caption元素以及其内容 |
deleteRow() |
用于从表格删除指定位置的行 |
deleteTFoot() |
从表格删除tFoot元素及其内容 |
deleteTHead() |
从表格删除tHead元素及其内容 |
insertRow() |
用于在表格中的指定位置插入一个新行 |
11> 使用DOM操纵样式表
✍ 操纵元素的Style样式属性（所有的均对于CSS的内联式）
对于每个CSS样式，Style对象都包含了一个相对应的属性，只需要用到style属性即可；
Div.style.color= "red";//给div元素设置字体颜色为红色
对于两个词的样式，在JavaScript样式属性的格式去驼峰命名法；
Div.style.backgroundColor= "#000";//给div元素设置背景色为黑色
DOM为style对象提供了方法用来与CSS样式定义的单个部分交互
➣ getPropertyValue(propertyName)——返回CSS属性的属性值的字符串。这个propertyName必须是CSS样式中指定的格式；
➣ getPropertyPriority()——如果再CSS属性规则中指定了"!important"，则返回字符串"!important"，否则返回一个空的字符串；
➣ item(index)——返回指定索引的CSS属性名称;
➣ removeProperty(propertyName)——从CSS定义中删除propertyName。
➣ setProperty(propertyName,value,prioriry)——设置CSS属性propertyName为value以及给定的优先级("important"或者一根空字符串);
✍ 操纵外部样式表以及style元素中的样式
使用document.styleSheets集合,该集合包含了在一个网页所有样式表的应用,也包括所有的style属性。
➣ disabled——表示样式表是否被禁用的布尔值。这个属性是可读/写的，将这个值设置为true可以禁用样式表；
➣ href——如果样式表是通过<link>包含的，则是样式表的URL；否则，是null；
➣ media——当前样式表支持的所有媒体类型的集合。与所有DOM集合一样，这个集合也有一个length属性和一个item()方法。也可以使用方括号语法取得结合中 特定的项。如果集合是空列表项，表示样式表适用于所有媒体。在IE中，media是一个反映<link>和<style>元素 media特性的字符串；
➣ ownerNode——指定样式表的DOM节点(<link/>或者<style/>元素)。如果当前样式表是其它样式表通过@import导入的，则这个属性值为null。IE不支持这个属性；
➣ parentStyleSheet——如果样式表被包含在CSS@import语句中，本属性指向语句发现的样式；
➣ title——ownerNode中的title属性的值；
➣ type——样式表的mine类型。对CSS样式表而言，通常是“type/css”；
（PS：一条规则上的style对象不是只读的，我们可以更改它。但是更改一条CSS规则会影响页面上所有使用规则的元素）
✍ 操纵最终样式
一个元素可能有多个样式作用于其上，最终在屏幕上显示的样式，我们称为最终样式。最终样式由所有的样式信息（包含内联样式和CSS规则）组成，用来真实指示元素在屏幕是如何显示的（存在兼容性问题，IE和DOM有不同的实现方式）；
➣ IE中的最终样式
IE在每个元素上提供了一个currentStyle对象，该对象包含了从元素背景色到任何相关CSS规则的style对象的所有属性。currentStyle对象与style工作方式相同，有同样的属性和方法。
➣ DOM中的最终样式
DOM对于给定的元素提供了一个方法getComputedStyle()来创建一个类似style的对象，例如:hover或者:first-letter（如果不需要，第二个参数可为空）。该方法接收两个参数，一个是要获取样式的元素，一个是伪元素，我们可以从document.defaultView对象访问该方法（IE和Safari浏览器不支持document.defaultView）。
➣ 获取IE和DOM的最终样式(已解决兼容性问题)
var obj = document.getElementById("test");
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle(obj, null); // DOM
} else {
style = obj.currentStyle; // IE
}
12> JavaScript表单编程
表单是Web上与用户进行交互的主要界面。则我们需要掌握如何访问用户输入的表单数据，校验用户输入的正确性显得至关重要。
♞ 对Form元素进行脚本编写
✍ 获取表单的应用
➣ 使用DOM树中定位一个元素的方法——getElementById()方法，并将表单的ID作为方法的参数；
var objForm = document.getElementById("form");
➣ 使用文档的表单集合，并且通过表单在forms集合中的位置或者通过其name属性；
var objForm = document.forms[0]; //不用下标就是获得表单集合
var objForm = document.forms["name"];//得到名为name的表单
✍ 获取表单的字段
每个表单字段都包含在表单的elements集合中，我们可以通过使用表单元素的name属性或者它在集合的位置，访问集合中的不同字段；
➣ 通过它在集合的位置访问集合中字段；
var temp=oform.elements[0];//得到表单第一个字段。
➣ 使用表单元素的name属性访问集合中字段；
对该方法传入name属性的字符串；
var temp=oform.elements["text"];//得到名为text1的字段。
每个表单字段称为表单本事的一个属性，可以直接通过其名称访；
var temp=oform.textbox1;//得到名为textbox1的字段。
如果名称中间有空格，可以用中括号代替；
var temp=oform["text box 1"];//得到名为text box 1的字段。
✍ 表单字段元素对象
➣ form表单字段元素对象的方法
方法 |
描述 |
blur() |
让表单字段元素失去焦点，当前焦点移到后台 |
focus() |
让表单字段元素获得焦点 |
click() |
模仿用户鼠标单击该元素的过程 |
setCapture() |
在某个表单字段元素对象上捕获当前网页文档上的鼠标事件 |
releaseCapture() |
取消某个表单字段元素对象对当前网页文档鼠标事件的捕获设置 |
add() |
为列表框（select）增加一个选择项(option) |
➣ form表单字段元素对象的属性
属性 |
描述 |
defaultValue |
设置或返回表单字段元素的默认值（初始值） |
disabled |
设置或返回文本输入框的disabled状态；该属性用于指示一个表单控件是否可用，一个disable控件不允许用户输入 |
form |
返回表单字段元素所属于form表单对象 |
readOnly |
设置或返回文本输入框的readonly状态 |
title |
设置或返回表单字段元素title属性 |
value |
设置或返回表单字段元素的当前取值 |
checked |
设置或返回单选按钮、复选按钮的选中状态 |
➣ form表单字段元素对象的事件
事件 |
描述 |
onChange |
当焦点离开文本输入框且文本输入框中的值改变时，或者改变列表框的选择结果后，产生该事件 |
onSelect |
当单行或多行文本输入框中的文字被选择加亮后，产生该事件 |
onFocus |
当表单字段获得焦点时，产生该事件 |
onBlur |
当表单字段元素失去焦点时，产生该事件 |
✍ 表单的提交和重置
➣ 使用一个提交按钮或者模拟提交按钮的图形来提交/重置表单
<input type="submit" value="Submit"/>//submit按钮提交表单
<input type="image" value="submit.gif"/>//image按钮提交表单
<button type="submit">Submit</button>//submit按钮提交表单
<input type="reset" value="Reset"/>//reset按钮重置表单
<button type="reset">Reset</button>//reset按钮重置表单
➣ 使用submit()方法或者reset()方法提交/重置表单
得到表单引用后，直接调用submit()方法或者reset()方法
oForm.submit();//oForm表单提交
oForm.reset();//oForm表单重置
♞ 对文本框元素进行脚本编写
✍ 获取/更改文本框的值
对于标签<input/>和<textarea/>都支持同样的属性value，以获取文本框中的文本；使用value属性返回String类型的文本内容；
✍ 选择文本
两种类型的文本框都支持select()方法，该方法用于选择文本框中的所有文本。为使该方法起作用，文本框必须获得焦点。为确保文本框获得焦点，我们必须在调用select()方法之前，调用另外一个方法focus();
✍ 文本框事件
两种文本框都支持blur、focus、change和select事件。
➣ change事件——在用户改变文本框的值之后，当文本框失去焦点时触发该事件。
（PS：通过设置value属性改变文本框的值时，不触发该事件）
➣ select事件——在一个或者多个字符被选中时触发事件；不管是手动选中还是使用select()方法。
➣ blur事件——当文本框失去焦点时触发事件；
（PS：blur事件和change事件都是在文本框失去焦点后触发，但是change事件是在文本框的值被改变的情况下才会触发，如果没有改变时只触发blur事件；改变时则先触发change事件，随后再执行blur事件）；
➣ focus事件——当文本框获得焦点时触发事件；
♞ 对列表框和组合框进行脚本编写
✍ 访问选项
HTML DOM将select元素中的每一项定义到一个options集合中，该集合中列出select控件中的所有option元素。
属性 |
描述 |
id |
设置或返回选项的 id。 |
index |
返回下拉列表中某个选项的索引位置。 |
label |
设置或返回选项的标记 （仅用于选项组）。 |
selected |
设置或返回 selected 属性的值。 |
text |
设置或返回某个选项的纯文本值。 |
value |
设置或返回被送往服务器的值。 |
✍ 添加选项
很多时候，列表框或者组合的选项数据，是来自于后台数据服务器或者其它数据文件，那么我们就不能在XHTML中指定选项，必须使用JavaScript编码动态地将数据项添加到select元素中，按照以下步骤将选项动态添加到select元素中：
Ⅰ 定义一个带三个参数的方法，这三个参数分别是要添加选项的列表值、要添加的选项的名称以及要添加的选项的值；
Ⅱ 使用DOM方法创建一个option元素，然后创建一个文本节点分配给选项的名称；
Ⅲ 设置option元素的value属性；
Ⅳ 通过appendChild()方法，将新选项添加到select元素中;
ListUtil.add = function(oList, sName, sValue){
var option = document.creatElement("option");
option.appendChild(document.creatTextNode(sName));
if(arguments.length == 3){
option.setAttribute("value",sValue);
}
oList.appendChild(potion);
}
✍ 删除选项
删除选项的方法有两种，一种是使用DOM提供的功能，一种是使用HTML DOM提供的功能
➣ BOM：使用options集合，将要移除的选项设置为null；
oList.options[0] = null;
➣ HTML DOM:使用select元素的remove()方法，将要删除的选项的索引传递给remove()方法；
oList.remove(0);
✍ 移动选项
使用DOM的appendChild()方法，可以从第一个列表框中把元素移动选项到第二个列表框中。如果我们传递一个文档中的一个元素到appendChild()方法，该元素就会从它的父元素中移除，并且放在指定位置。
♞ 对复选框和单选框进行脚本编写
属性/方法 |
描述 |
checked |
布尔值，指示控件状态 |
defaultChecked |
布尔值，指示页面加载时控件是否被选中 |
click() |
模仿按钮点击，改变控件状态，对应的事件onclick |
13> 表单验证
表单验证是JavaScript最常用、最有用的功能之一。在表单内容提交之前进行验证，可以降低服务器处理器的压力，缩短用户等待的时间。表单校验中第一个要考虑的问题是：什么时候捕获表单的录入错误？在错误发生之前、在错误发生时、在错误发生之后；
♞ 使用submit事件在错误发生之后捕获错误
表单数据输入完毕后，通过点击提交按钮和submit()方法把数据发送到由表单的action属性指定的表单处理程序进行处理。为了防止无效数据进入服务器端，我们有在submit事件发送之后，表单数据提交到表单处理程序之前，验证表单中输入的数据的有效性，即把校验代码写在submit()事件的事件处理程序中。如果一个控件包含了无效数据，就显示一条信息，并且通过处理程序返回false值来取消提交，如果数据有效，处理程序返回true值，正常提交表单数据。
♞ 使用change事件在错误发生时捕获错误
可以在用户输完每项数据后，马上进行校验；当修改一个控件，并失去焦点时，会触发change事件，我们就可以在change事件处理程序中，写入校验码，如果数据无效，显示一条信息提醒用户，并且通过处理程序返回false值来阻止表单的提交。
♞ 使用keypress事件在错误发生之前捕获错误
如何在开始就阻止错误的发生？可以通过在键入数据的时候，即keypress事件发生时，限制数据的类型来实现，这样就可以在错误发生时捕获并阻止。
✍ 表单校验最佳实践
➣ 必须对用户有帮助——客户端校验必须用于帮助用户正确输入数据，因此，它必须以有帮助的方式与用户交互。例如用户输入一个无效数据，可以在错误信息中包含正确的数据格式。同样可以使用脚本来纠正一般的错误，例如：使用JavaScript自动格式化；
➣ 不要让人讨厌——我们使用alert()来提示用户输入无效是为了演示，但是在用户可以校验数据之前，alert()窗口必须关闭，因为用户也许会忘记到底是哪个控件出错。所以最好考虑在页面本身的某个地方显示错误信息；
➣ 只要有可能，就用HTML功能代替JavaScript——比如说使用控件的maxlength属性校验控件长度，比使用JavaScript校验好；提供一个可能的日期的下拉列表以避免无效输入，来替代日期检查等等；
➣ 早点捕获错误——一直等到提交不是捕获错误的最佳事件，可以选择在错误发生时或者发生之前对错误进行捕获。如果要使用blur和focus触发器，必须管理事件，包括消除事件冒泡；
➣ 如果拿不准，就不要太严格——JavaScript表单校验是用于帮助用户发现错误的，而不是一种强制政策；