20150728 JavaScript进阶学习笔记（下）
2015-07-31 16:47
507 查看
对象
JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。
对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；
JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象： var objectName =new Array();//使用new关键字定义对象
或者 var objectName =[];
访问对象属性的语法:objectName.propertyName
访问对象的方法：objectName.methodName()
Date 日期对象
日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。
定义一个时间对象 :var Udate=new Date();
注意:使用关键字new，Date()的首字母必须大写。
使 Udate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)。
如果要自定义初始值，可以用以下方法：
var d = new Date(2012, 10, 1); //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日
我们
4000
最好使用下面介绍的“方法”来严格定义时间。
访问方法语法：“<日期对象>.<方法>”
Date对象中处理时间和日期的常用方法：
get/setDate() 返回、设置日期
get/setFullYear() 返回、设置年份，用四位数表示
get/setYear() 返回、设置年份
get/setMonth() 返回、设置月份 0：一月...11：十二月
get/setHours() 返回、设置小时，24小时制
get/setMinutes() 返回、设置分钟数
get/setSeconds() 返回、设置秒钟数
get/setTime() 返回、设置时间（毫秒为单位）
返回/设置年份方法
get/setFullYear() 返回/设置年份，用四位数表示。
var mydate=new Date();//当前时间2015年7月28日
document.write(mydate+"<br>");//输出当前时间
document.write(mydate.getFullYear()+"<br>");//输出当前年份
mydate.setFullYear(81); //设置年份
document.write(mydate+"<br>"); //输出年份被设定为 0081年。
注意:
1.不同浏览器， mydate.setFullYear(81)结果不同，年份被设定为 0081或81两种情况。
2.结果格式依次为：星期、月、日、年、时、分、秒、时区。(火狐浏览器)
3.不同浏览器，时间格式有差异。
返回星期方法
getDay() 返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”，通过数组完成，代码如下:
<script type="text/javascript">
var mydate=new Date();//定义日期对象
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定义数组对象,给每个数组项赋值
var mynum=mydate.getDay();//返回值存储在变量mynum中
document.write(mydate.getDay());//输出getDay()获取值
document.write("今天是："+ weekday[mynum]);//输出星期几
</script>
返回/设置时间方法
get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。
如果将目前日期对象的时间推迟1小时，代码如下:
<script type="text/javascript">
var mydate=new Date();
document.write("当前时间："+mydate+"<br>");
mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
document.write("推迟一小时时间：" + mydate);
</script>
结果:
当前时间：Thu Mar 6 11:46:27 UTC+0800 2014
推迟一小时时间：Thu Mar 6 12:46:27 UTC+0800 2014
注意:1. 一小时 60 分，一分 60 秒，一秒 1000 毫秒
2. 时间推迟 1 小时,就是: “x.setTime(x.getTime() + 60 * 60 * 1000);”
String 字符串对象
在之前的学习中已经使用字符串对象了，定义字符串的方法就是直接赋值。比如：
var mystr = "I love JavaScript!"
定义mystr字符串后，我们就可以访问它的属性和方法。
访问字符串对象的属性length:
stringObject.length; 返回该字符串的长度。
var mystr="Hello World!";
var myl=mystr.length;
以上代码执行后，myl 的值将是：12
访问字符串对象的方法：
使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写：
var mystr="Hello world!";
var mynum=mystr.toUpperCase();
以上代码执行后，mynum 的值是：HELLO WORLD!
返回指定位置的字符
charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
语法:stringObject.charAt(index)
参数说明：index 必需。表示字符串中某个位置的数字，即字符在字符串中的下标。
注意：1.字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。
2.如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。
返回指定的字符串首次出现的位置
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
语法
stringObject.indexOf(substring, startpos)
参数说明：
substring 必需，规定需检索的字符串值
statpos 可选的整数参数，规定在字符串中开始检索的位置，它的合法取值是0到stringObject.length-1。如省略该参数，则将从字符串的首字符开始检索。
说明：
1.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。
2.可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。
3.如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
注意：1.indexOf() 方法区分大小写。
2.如果要检索的字符串值没有出现，则该方法返回 -1。
使用indexOf()方法，检索第二个字符ｏ出现的位置：document.write(mystr.indexOf("o",mystr.indexOf("o")+1));
字符串分割split()
知识讲解：
split() 方法将字符串分割为字符串数组，并返回此数组。
语法：stringObject.split(separator,limit)
参数说明:
separator 必需，从该参数指定的地方分割stringObject。
limit 可选参数，分割的次数，如设置该参数，返回的子串不会多于这个参数指定的数组，如果无此参数为不限制次数。
注意：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
提取字符串substring()
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
语法:stringObject.substring(starPos,stopPos)
参数说明:
startPos 必需，一个非负的整数，开始位置
stopPos 可选，一个非负的证书，结束位置，如果省略该参数，那么返回的子串会一直到字符串对象的结尾。
注意：
1. 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
2. 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
3. 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
提取指定数目的字符substr()
substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。
语法:stringObject.substr(startPos,length)
参数说明:
startPos 必需。要提取的子串的起始位置必须是数值
length 可选，提取字符串的长度。如果省略，返回从stringObject的开始startPos到stringObject的结尾的字符。
注意：如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
如果startPos为负数且绝对值大于字符串长度，startPos为0。
变大写：toUpperCase()
变小写：toLowerCase()
指定位置：charAt()
检索：indexOf()
分割：split()
提取：substring()
提取指定数目：substr()
Math对象
Math对象，提供对数据的数学计算。
注意：Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。
Math 对象属性
E 返回算数常量e，即自然对数的底数（约等于2.718)。
LN2 返回2的自然对数（约等于0.693）
LN10 返回10的自然对数（约等于2.302)
LOG2E 返回以2为底的e的对数（约等于1.442)
LOG10E 返回以10为底的e的对数（约等于0.434)
PI 返回圆周率（约等于3.1415926)
SQRT1_2 返回2的平方根的倒数（约等于0.707)
SQRT2 返回2的平方根（约等于1.414)
Math 对象方法
abs(x) 绝对值
acos(x) 反余弦值
asin(x) 反正弦值
atan(x) 反正切值
atant2(y,x) 由x轴到点（x,y)的角度（以弧度为单位）
ceil(x) 对数进行上舍入，向上取整
cos(x) 数的余弦
exp(x) e的指数
floor(x) 对数进行下舍入，向下取整
log(x) 数的自然对数（底为e）
max(x,y) 返回最高值
min(x,y) 返回最低值
pow(x,y) x的y次幂
random() 0-1的随机数 random()*n+m m-n的随机数
round(x) 四舍五入为最接近的整数
sin(x) 数的正弦
sqrt(x) 数的平方根
tan(x) 角的正切
toSource() 对象的源代码
valueOf() Math对象的原始值
Array 数组对象
数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的
数组定义的方法：
1. 定义了一个空数组:
var 数组名= new Array();
2. 定义时指定有n个空元素的数组：
var 数组名 =new Array(n);
3.定义数组的时候，直接初始化数据：
var 数组名 = [<元素1>, <元素2>, <元素3>...];
数组属性：
length 用法：<数组对象>.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。
数组方法
concat()连接两个或更多的数组，并返回结果 arrayObject.concat(array1,array2,...,arrayN)
join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分割 arrayObject.join(分隔符)
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多元素，并返回新的长度
reverse()颠倒数组中元素的顺序
shift()删除并返回数组的第一个元素
slice()从某个已有的数组返回选定的元素 arrayObject.slice(start,end)
1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
2. 该方法并不会修改数组，而是返回一个子数组。
注意：
1. 可使用负值从数组的尾部选取元素。
2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
3. String.slice() 与 Array.slice() 相似。
sort()对数组的元素进行排序 arrayObject.sort(方法函数)
1.如果不指定<方法函数>，则按unicode码顺序排列。
document.write(myarr.sort());
2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。
myArray.sort(sortMethod);
注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。
function sortNum(a,b) {
return b-a;
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr.sort(sortNum));
splice()删除元素，并向数组添加新元素
toSource()返回该对象的源代码
toString()把数组转换为字符串，并返回结果
toLocaleString()把数组转换为本地数组，并返回结果
unshift()向数组的开头添加一个或更多元素，并返回新的长度
valueOf()返回数组对象的原始值
window对象
window对象是BOM的核心，window对象指当前的浏览器窗口。
window对象方法:
alert()显示带有一段消息和一个确认按钮的警告框
prompt()显示可提示用户输入的对话框
confirm()先是带有一段消息以及确认和取消按钮的对话框
open()打开一个新的浏览器窗口或查找一个已命名的窗口
close()关闭浏览器窗口
print()打印当前窗口的内容
focus()把键盘焦点给予一个窗口
blur()把键盘焦点从顶层窗口移开
moveBy()可相对窗口的当前坐标把它移动指定的像素
moveTo()把窗口的左上角移动到一个指定的坐标
resizeBy()按照指定的像素调整窗口的大小
resizeTo()把窗口的大小调整到指定的宽度和高度
scrollBy()按照指定的像素值来滚动内容
scrollTo()把内容滚动到指定的坐标
setInterval()每隔指定的时间执行代码 setInterval(代码,交互时间);
setTimeout()在指定的延迟时间之后来执行代码
clearInterval()取消setInterval()的设置
clearTimeout()取消setTimeout()的设置
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器setInterval()
在执行时,从载入页面后每隔指定的时间执行代码。
语法:
setInterval(代码,交互时间);
参数说明：
1. 代码：要调用的函数或要执行的代码串。
2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
返回值:
一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。
调用函数格式(假设有一个clock()函数):
setInterval("clock()",1000)
或
setInterval(clock,1000)
取消计时器clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的交互时间。
语法：clearInterval(id_of_setInterval)
参数说明:id_of_setInterval：由 setInterval() 返回的 ID 值。
计时器setTimeout()
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:setTimeout(代码,延迟时间);
参数说明：
1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
<script type="text/javascript">
var num=0;
function startCount() {
document.getElementById('count').value=num;
num=num+1;
setTimeout("startCount()",1000);
}
setTimeout("startCount()",1000);
</script>
取消计时器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止计时器。
语法:clearTimeout(id_of_setTimeout)
参数说明:id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
History 对象
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
语法：
window.history.[属性|方法]
注意：window可以省略。
History 对象属性
length返回浏览器历史列表中的URL数量
History 对象方法
back()加载history列表中的前一个URL
forward()加载history列表中的下一个URL
go()加载history列表中的某个具体的页面
使用length属性，当前窗口的浏览历史总长度，代码如下：
<script type="text/javascript">
var HL = window.history.length;
document.write(HL);
</script>
方法的使用同上。
Location对象
location用于获取或设置窗体的URL，并且可以用于解析URL。
语法:
location.[属性|方法]
location对象属性图示:
location 对象属性：
hash设置或返回从#开始的URLmediaid118
host设置或返回主机名和当前URL的端口号www.imooc.com:8080
hostname设置或返回当前URL的主机名www.imooc.com
href设置或返回完整的URLhttp://www.imooc.com:8080/list.php?courseid=8&chapterid=86#mediaid118
pathname设置或返回当前URL的路径部分list.php
port设置或返回当前URL的端口号8080
protocol设置或返回当前URL的协议http
search设置或返回从？开始的URL（查询部分）courseid=8&chapterid=86
location 对象方法:
assign()加载新的文档
reload()重新加载当前文档
replace()用新的文档替换当前文档
Navigator对象
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
对象属性:
appCodeName浏览器代码名的字符串表示
appName返回浏览器的名称
appVersion返回浏览器的平台和版本信息
platform返回运行浏览器的操作系统平台
userAgent返回由客户机发送服务器的user-agent头部的值
userAgent返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
语法navigator.userAgent
几种浏览的user_agent.，像360的兼容模式用的是IE、极速模式用的是chrom的内核。
chrome Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36
firefox Mozilla/5.0 (Windows NT 6.1; WOW64;rv:24.0)Gecko/20100101k Firefox/24.0
IE 8 Mozilla/4.0 (compatible;MSIE 8.0;Windows NT 6.1; WOW64;Trident/4.0;SLCC2;NET CLR 2.0.50727;.NET CLR 3.5.30729;.NET CLR 3.0.30729;.NET4.0C)
screen对象
screen对象用于获取用户的屏幕信息。
语法：
window.screen.属性
availHeight窗口可以使用的屏幕高度，单位像素
availWidth窗口可以使用的屏幕宽度，单位像素
colorDepth用户浏览器表示的颜色位数，通常为32位（每像素的位数）
pixelDepth用户浏览器表示的颜色位数，通常为32位（每像素的位数）IE不支持此属性
height屏幕的高度，单位像素
width屏幕的宽度，单位像素
屏幕分辨率的高和宽
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
屏幕可用高和宽度
1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。
注意:
不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。
认识DOM
文档对象模型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返回一个给定节点的父节点
nextSibling返回给定节点的下一个子节点
previousSibling返回给定节点的上一个子节点
DOM操作：方法及说明
creatElement(element)创建一个新的元素节点
createTextNode()创建一个包含着给定文本的新文本节点
appendChild()指定节点的最后一个子节点列表之后添加一个新的子节点
insertBefore()将一个给定节点插入到一个给定元素节点的给定子节点的前面
removeChild()从一个给定元素中删除一个子节点
replaceChild()把一个给定父元素里的一个子节点替换为另外一个节点
getElementsByName()方法
返回带有指定名称的节点对象的集合。
语法：
document.getElementsByName(name)
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
注意:
1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
getElementsByTagName(Tagname)
说明:
1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
区别getElementByID,getElementsByName,getElementsByTagName
以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。
把上面的例子转换到HTML中，如下:
<input type="checkbox" name="hobby" id="hobby1"> 音乐
input标签就像人的类别。
name属性就像人的姓名。
id属性就像人的身份证。
方法总结如下:
getElementById 通过指定id获得元素 一个
getElementsByName 通过元素名称name属性获得元素 一组
getElementsByTagName 通过标签名称获得元素 一组
注意：方法区分大小写
getAttribute()方法
通过元素节点的属性名称获取属性的值。
语法：elementNode.getAttribute(name)
说明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字
setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：elementNode.setAttribute(name,value)
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，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
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：elementNode.childNodes
注意：
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
注意:
1. IE全系列、firefox、chrome、opera、safari兼容问题
2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7即解析空白节点
访问子结点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
注意: 上一节中，我们知道Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。
访问父节点parentNode
获取指定节点的父节点
语法：elementNode.parentNode
注意:父节点只能有一个。
访问祖节点:elementNode.parentNode.parentNode
注意: 浏览器兼容问题，chrome、firefox等浏览器标签之间的空白也算是一个文本节点。
访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：nodeObject.previousSibling
说明：如果无此节点，则该属性返回 null。
注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:appendChild(newnode)
参数:newnode：指定追加的节点。
插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:insertBefore(newnode,node);
参数:
newnode: 要插入的新节点。
node: 指定此节点前插入节点。
删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法:nodeObject.removeChild(node)
参数:node ：必需，指定需要删除的节点。
注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。
如果要完全删除对象，给 x 赋 null 值，代码如下:
var otest=document.getElementById("div1");
var x=otest.removeChild(otest.childNodes[0]);
x=null;
替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法：node.replaceChild (newnode,oldnew )
参数：
newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。
创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：document.createElement(tagName)
参数:tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
var main = document.body;
//创建链接
function createa(url,text)
{
var a=document.createElement("a");
a.setAttribute("href",url);
a.style.color="red";
a.innerHTML=text;
return a;
}
// 调用函数创建链接
main.appendChild(createa("http://www.imooc.com","慕课网"));
创建文本节点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;
网页卷去的距离与偏移量
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。
注意:
1. 区分大小写
2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。
JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。
对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；
JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象： var objectName =new Array();//使用new关键字定义对象
或者 var objectName =[];
访问对象属性的语法:objectName.propertyName
访问对象的方法：objectName.methodName()
Date 日期对象
日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。
定义一个时间对象 :var Udate=new Date();
注意:使用关键字new，Date()的首字母必须大写。
使 Udate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)。
如果要自定义初始值，可以用以下方法：
var d = new Date(2012, 10, 1); //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日
我们
4000
最好使用下面介绍的“方法”来严格定义时间。
访问方法语法：“<日期对象>.<方法>”
Date对象中处理时间和日期的常用方法：
get/setDate() 返回、设置日期
get/setFullYear() 返回、设置年份，用四位数表示
get/setYear() 返回、设置年份
get/setMonth() 返回、设置月份 0：一月...11：十二月
get/setHours() 返回、设置小时，24小时制
get/setMinutes() 返回、设置分钟数
get/setSeconds() 返回、设置秒钟数
get/setTime() 返回、设置时间（毫秒为单位）
返回/设置年份方法
get/setFullYear() 返回/设置年份，用四位数表示。
var mydate=new Date();//当前时间2015年7月28日
document.write(mydate+"<br>");//输出当前时间
document.write(mydate.getFullYear()+"<br>");//输出当前年份
mydate.setFullYear(81); //设置年份
document.write(mydate+"<br>"); //输出年份被设定为 0081年。
注意:
1.不同浏览器， mydate.setFullYear(81)结果不同，年份被设定为 0081或81两种情况。
2.结果格式依次为：星期、月、日、年、时、分、秒、时区。(火狐浏览器)
3.不同浏览器，时间格式有差异。
返回星期方法
getDay() 返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”，通过数组完成，代码如下:
<script type="text/javascript">
var mydate=new Date();//定义日期对象
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定义数组对象,给每个数组项赋值
var mynum=mydate.getDay();//返回值存储在变量mynum中
document.write(mydate.getDay());//输出getDay()获取值
document.write("今天是："+ weekday[mynum]);//输出星期几
</script>
返回/设置时间方法
get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。
如果将目前日期对象的时间推迟1小时，代码如下:
<script type="text/javascript">
var mydate=new Date();
document.write("当前时间："+mydate+"<br>");
mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
document.write("推迟一小时时间：" + mydate);
</script>
结果:
当前时间：Thu Mar 6 11:46:27 UTC+0800 2014
推迟一小时时间：Thu Mar 6 12:46:27 UTC+0800 2014
注意:1. 一小时 60 分，一分 60 秒，一秒 1000 毫秒
2. 时间推迟 1 小时,就是: “x.setTime(x.getTime() + 60 * 60 * 1000);”
String 字符串对象
在之前的学习中已经使用字符串对象了，定义字符串的方法就是直接赋值。比如：
var mystr = "I love JavaScript!"
定义mystr字符串后，我们就可以访问它的属性和方法。
访问字符串对象的属性length:
stringObject.length; 返回该字符串的长度。
var mystr="Hello World!";
var myl=mystr.length;
以上代码执行后，myl 的值将是：12
访问字符串对象的方法：
使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写：
var mystr="Hello world!";
var mynum=mystr.toUpperCase();
以上代码执行后，mynum 的值是：HELLO WORLD!
返回指定位置的字符
charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
语法:stringObject.charAt(index)
参数说明：index 必需。表示字符串中某个位置的数字，即字符在字符串中的下标。
注意：1.字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。
2.如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。
返回指定的字符串首次出现的位置
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
语法
stringObject.indexOf(substring, startpos)
参数说明：
substring 必需，规定需检索的字符串值
statpos 可选的整数参数，规定在字符串中开始检索的位置，它的合法取值是0到stringObject.length-1。如省略该参数，则将从字符串的首字符开始检索。
说明：
1.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。
2.可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。
3.如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
注意：1.indexOf() 方法区分大小写。
2.如果要检索的字符串值没有出现，则该方法返回 -1。
使用indexOf()方法，检索第二个字符ｏ出现的位置：document.write(mystr.indexOf("o",mystr.indexOf("o")+1));
字符串分割split()
知识讲解：
split() 方法将字符串分割为字符串数组，并返回此数组。
语法：stringObject.split(separator,limit)
参数说明:
separator 必需，从该参数指定的地方分割stringObject。
limit 可选参数，分割的次数，如设置该参数，返回的子串不会多于这个参数指定的数组，如果无此参数为不限制次数。
注意：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
提取字符串substring()
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
语法:stringObject.substring(starPos,stopPos)
参数说明:
startPos 必需，一个非负的整数，开始位置
stopPos 可选，一个非负的证书，结束位置，如果省略该参数，那么返回的子串会一直到字符串对象的结尾。
注意：
1. 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
2. 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
3. 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
提取指定数目的字符substr()
substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。
语法:stringObject.substr(startPos,length)
参数说明:
startPos 必需。要提取的子串的起始位置必须是数值
length 可选，提取字符串的长度。如果省略，返回从stringObject的开始startPos到stringObject的结尾的字符。
注意：如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
如果startPos为负数且绝对值大于字符串长度，startPos为0。
变大写：toUpperCase()
变小写：toLowerCase()
指定位置：charAt()
检索：indexOf()
分割：split()
提取：substring()
提取指定数目：substr()
Math对象
Math对象，提供对数据的数学计算。
注意：Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。
Math 对象属性
E 返回算数常量e，即自然对数的底数（约等于2.718)。
LN2 返回2的自然对数（约等于0.693）
LN10 返回10的自然对数（约等于2.302)
LOG2E 返回以2为底的e的对数（约等于1.442)
LOG10E 返回以10为底的e的对数（约等于0.434)
PI 返回圆周率（约等于3.1415926)
SQRT1_2 返回2的平方根的倒数（约等于0.707)
SQRT2 返回2的平方根（约等于1.414)
Math 对象方法
abs(x) 绝对值
acos(x) 反余弦值
asin(x) 反正弦值
atan(x) 反正切值
atant2(y,x) 由x轴到点（x,y)的角度（以弧度为单位）
ceil(x) 对数进行上舍入，向上取整
cos(x) 数的余弦
exp(x) e的指数
floor(x) 对数进行下舍入，向下取整
log(x) 数的自然对数（底为e）
max(x,y) 返回最高值
min(x,y) 返回最低值
pow(x,y) x的y次幂
random() 0-1的随机数 random()*n+m m-n的随机数
round(x) 四舍五入为最接近的整数
sin(x) 数的正弦
sqrt(x) 数的平方根
tan(x) 角的正切
toSource() 对象的源代码
valueOf() Math对象的原始值
Array 数组对象
数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的
数组定义的方法：
1. 定义了一个空数组:
var 数组名= new Array();
2. 定义时指定有n个空元素的数组：
var 数组名 =new Array(n);
3.定义数组的时候，直接初始化数据：
var 数组名 = [<元素1>, <元素2>, <元素3>...];
数组属性：
length 用法：<数组对象>.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。
数组方法
concat()连接两个或更多的数组，并返回结果 arrayObject.concat(array1,array2,...,arrayN)
join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分割 arrayObject.join(分隔符)
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多元素，并返回新的长度
reverse()颠倒数组中元素的顺序
shift()删除并返回数组的第一个元素
slice()从某个已有的数组返回选定的元素 arrayObject.slice(start,end)
1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
2. 该方法并不会修改数组，而是返回一个子数组。
注意：
1. 可使用负值从数组的尾部选取元素。
2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
3. String.slice() 与 Array.slice() 相似。
sort()对数组的元素进行排序 arrayObject.sort(方法函数)
1.如果不指定<方法函数>，则按unicode码顺序排列。
document.write(myarr.sort());
2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。
myArray.sort(sortMethod);
注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。
function sortNum(a,b) {
return b-a;
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr.sort(sortNum));
splice()删除元素，并向数组添加新元素
toSource()返回该对象的源代码
toString()把数组转换为字符串，并返回结果
toLocaleString()把数组转换为本地数组，并返回结果
unshift()向数组的开头添加一个或更多元素，并返回新的长度
valueOf()返回数组对象的原始值
window对象
window对象是BOM的核心，window对象指当前的浏览器窗口。
window对象方法:
alert()显示带有一段消息和一个确认按钮的警告框
prompt()显示可提示用户输入的对话框
confirm()先是带有一段消息以及确认和取消按钮的对话框
open()打开一个新的浏览器窗口或查找一个已命名的窗口
close()关闭浏览器窗口
print()打印当前窗口的内容
focus()把键盘焦点给予一个窗口
blur()把键盘焦点从顶层窗口移开
moveBy()可相对窗口的当前坐标把它移动指定的像素
moveTo()把窗口的左上角移动到一个指定的坐标
resizeBy()按照指定的像素调整窗口的大小
resizeTo()把窗口的大小调整到指定的宽度和高度
scrollBy()按照指定的像素值来滚动内容
scrollTo()把内容滚动到指定的坐标
setInterval()每隔指定的时间执行代码 setInterval(代码,交互时间);
setTimeout()在指定的延迟时间之后来执行代码
clearInterval()取消setInterval()的设置
clearTimeout()取消setTimeout()的设置
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器setInterval()
在执行时,从载入页面后每隔指定的时间执行代码。
语法:
setInterval(代码,交互时间);
参数说明：
1. 代码：要调用的函数或要执行的代码串。
2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
返回值:
一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。
调用函数格式(假设有一个clock()函数):
setInterval("clock()",1000)
或
setInterval(clock,1000)
取消计时器clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的交互时间。
语法：clearInterval(id_of_setInterval)
参数说明:id_of_setInterval：由 setInterval() 返回的 ID 值。
计时器setTimeout()
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:setTimeout(代码,延迟时间);
参数说明：
1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
<script type="text/javascript">
var num=0;
function startCount() {
document.getElementById('count').value=num;
num=num+1;
setTimeout("startCount()",1000);
}
setTimeout("startCount()",1000);
</script>
取消计时器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止计时器。
语法:clearTimeout(id_of_setTimeout)
参数说明:id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
History 对象
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
语法：
window.history.[属性|方法]
注意：window可以省略。
History 对象属性
length返回浏览器历史列表中的URL数量
History 对象方法
back()加载history列表中的前一个URL
forward()加载history列表中的下一个URL
go()加载history列表中的某个具体的页面
使用length属性，当前窗口的浏览历史总长度，代码如下：
<script type="text/javascript">
var HL = window.history.length;
document.write(HL);
</script>
方法的使用同上。
Location对象
location用于获取或设置窗体的URL，并且可以用于解析URL。
语法:
location.[属性|方法]
location对象属性图示:
location 对象属性：
hash设置或返回从#开始的URLmediaid118
host设置或返回主机名和当前URL的端口号www.imooc.com:8080
hostname设置或返回当前URL的主机名www.imooc.com
href设置或返回完整的URLhttp://www.imooc.com:8080/list.php?courseid=8&chapterid=86#mediaid118
pathname设置或返回当前URL的路径部分list.php
port设置或返回当前URL的端口号8080
protocol设置或返回当前URL的协议http
search设置或返回从？开始的URL（查询部分）courseid=8&chapterid=86
location 对象方法:
assign()加载新的文档
reload()重新加载当前文档
replace()用新的文档替换当前文档
Navigator对象
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
对象属性:
appCodeName浏览器代码名的字符串表示
appName返回浏览器的名称
appVersion返回浏览器的平台和版本信息
platform返回运行浏览器的操作系统平台
userAgent返回由客户机发送服务器的user-agent头部的值
userAgent返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
语法navigator.userAgent
几种浏览的user_agent.，像360的兼容模式用的是IE、极速模式用的是chrom的内核。
chrome Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36
firefox Mozilla/5.0 (Windows NT 6.1; WOW64;rv:24.0)Gecko/20100101k Firefox/24.0
IE 8 Mozilla/4.0 (compatible;MSIE 8.0;Windows NT 6.1; WOW64;Trident/4.0;SLCC2;NET CLR 2.0.50727;.NET CLR 3.5.30729;.NET CLR 3.0.30729;.NET4.0C)
screen对象
screen对象用于获取用户的屏幕信息。
语法：
window.screen.属性
availHeight窗口可以使用的屏幕高度，单位像素
availWidth窗口可以使用的屏幕宽度，单位像素
colorDepth用户浏览器表示的颜色位数，通常为32位（每像素的位数）
pixelDepth用户浏览器表示的颜色位数，通常为32位（每像素的位数）IE不支持此属性
height屏幕的高度，单位像素
width屏幕的宽度，单位像素
屏幕分辨率的高和宽
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
屏幕可用高和宽度
1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。
注意:
不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。
认识DOM
文档对象模型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返回一个给定节点的父节点
nextSibling返回给定节点的下一个子节点
previousSibling返回给定节点的上一个子节点
DOM操作：方法及说明
creatElement(element)创建一个新的元素节点
createTextNode()创建一个包含着给定文本的新文本节点
appendChild()指定节点的最后一个子节点列表之后添加一个新的子节点
insertBefore()将一个给定节点插入到一个给定元素节点的给定子节点的前面
removeChild()从一个给定元素中删除一个子节点
replaceChild()把一个给定父元素里的一个子节点替换为另外一个节点
getElementsByName()方法
返回带有指定名称的节点对象的集合。
语法：
document.getElementsByName(name)
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
注意:
1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
getElementsByTagName(Tagname)
说明:
1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
区别getElementByID,getElementsByName,getElementsByTagName
以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。
把上面的例子转换到HTML中，如下:
<input type="checkbox" name="hobby" id="hobby1"> 音乐
input标签就像人的类别。
name属性就像人的姓名。
id属性就像人的身份证。
方法总结如下:
getElementById 通过指定id获得元素 一个
getElementsByName 通过元素名称name属性获得元素 一组
getElementsByTagName 通过标签名称获得元素 一组
注意：方法区分大小写
getAttribute()方法
通过元素节点的属性名称获取属性的值。
语法：elementNode.getAttribute(name)
说明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字
setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：elementNode.setAttribute(name,value)
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，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
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：elementNode.childNodes
注意：
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
注意:
1. IE全系列、firefox、chrome、opera、safari兼容问题
2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7即解析空白节点
访问子结点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
注意: 上一节中，我们知道Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。
访问父节点parentNode
获取指定节点的父节点
语法：elementNode.parentNode
注意:父节点只能有一个。
访问祖节点:elementNode.parentNode.parentNode
注意: 浏览器兼容问题，chrome、firefox等浏览器标签之间的空白也算是一个文本节点。
访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：nodeObject.previousSibling
说明：如果无此节点，则该属性返回 null。
注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:appendChild(newnode)
参数:newnode：指定追加的节点。
插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:insertBefore(newnode,node);
参数:
newnode: 要插入的新节点。
node: 指定此节点前插入节点。
删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法:nodeObject.removeChild(node)
参数:node ：必需，指定需要删除的节点。
注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。
如果要完全删除对象，给 x 赋 null 值，代码如下:
var otest=document.getElementById("div1");
var x=otest.removeChild(otest.childNodes[0]);
x=null;
替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法：node.replaceChild (newnode,oldnew )
参数：
newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。
创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：document.createElement(tagName)
参数:tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
var main = document.body;
//创建链接
function createa(url,text)
{
var a=document.createElement("a");
a.setAttribute("href",url);
a.style.color="red";
a.innerHTML=text;
return a;
}
// 调用函数创建链接
main.appendChild(createa("http://www.imooc.com","慕课网"));
创建文本节点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;
网页卷去的距离与偏移量
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。
注意:
1. 区分大小写
2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 20150727 Javascript进阶学习笔记（上）
- 20150727 JavaScript入门学习笔记
- js多行文本的处理方法
- 网页中如何用javascript显示时间
- JavaScript数据类型判定的总结笔记
- Enum转Json
- js对象和字符串互相转化
- js图表库——ECharts带你入门
- 点击下拉列表，选项在文本框中显示
- 百度地图简单使用——添加折线，圆形等（html，js）
- jspSmartUpload使用初步
- createjs初学-BitmapText使用实例
- session_jsp应用原理
- AJAX向服务器发送请求并返回json数据
- 关于破解屏蔽鼠标右键的方法
- 双击滚屏
- Javascript-动态操作分类信息2
- Javascript高级程序设计读书笔记（第六章）
- Javascript单元测试的基础
- 使用JavaScript在页面中进行跳转