2016-04-17

js进阶篇2

Math对象

Math对象，提供对数据的数学计算。

使用 Math 的属性和方法，代码如下：

<script type="text/javascript">
  var mypi=Math.PI; 
  var myabs=Math.abs(-15);
  document.write(mypi);
  document.write(myabs);
</script>

注意：Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。

Math对象属性

属性                说明
E                返回算术常量e，即自然对数的底数（约等于2.718）
LN2                返回2的自然对数（约等于0.693）
LN10            返回10的自然对数
LOG2E            返回以2为底E的对数（约等于1.442）
LOG2E            返回以10为底的e的对数（约登月0.434）
PI                返回圆周率（约等于3.1415926）
SQRT1_2            返回2的平方根的倒数(约等于0.707)
SQRT2            返回2的平方根(约等于1.414)

Math对象方法

方法                描述

cos(x)            返回余弦值
acos(x)            返回数的反余弦值
sin(x)            返回数的正炫值
asin(x)            返回数的反正炫值
tan(x)            返回数的正切值
atan(x)            返回数字的反正切值
atan2(y,x)        返回由x轴点(x,y)的角度(以弧度为单位)

ceil(x)            对数进行上舍入
floor(x)        对数进行下舍入
round(x)        把数四舍五入为最接近的整数

exp(x)            返回e的指数
log(x)          返回数的自然对数(底为e)

max(x,y)        返回x和y中的最高值
min(x,y)        返回x和y中的最低值
abs(x)            返回数的绝对值
sqrt(x)            返回数的平方根
pow(x,y）        返回x的y次幂
random()        返回0~1之间的随机数

toSource()        返回给对象的源代码
valueOf()        返回Math对象的原始值

四舍五入round()

round() 方法可把一个数字四舍五入为最接近的整数。

语法:

Math.round(x)

注意：

返回与 x 最接近的整数。
对于 0.5，该方法将进行上舍入。(5.5 将舍入为 6)
如果 x 与两侧整数同等接近，则结果接近 +∞方向的数字值。(如 -5.5 将舍入为 -5; -5.52 将舍入为 -6)

Array数组对象

数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的

数组定义的方法：

定义了一个空数组:

var 数组名= new Array();
定义时指定有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开始。

数组属性：

length 用法：<数组对象>.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。

数组方法：

方法                描述
/*检测数组*/
isArray()        确定某个值到底是不是数组
toSource()        返回该对象的源代码
/*转换方法*/
toString()        把数组转换为字符串，并返回结果
toLocaleString()把数组转换为本地数组，并返回结果
valueOf()        返回数组对象的原始值
join()            把数组的所有元素放入一个字符串。元素通过制定的分隔符进行分隔
/*栈方法*/
pop()            删除并返回数组的最后一个元素
push()            向数组的末尾添加一个或更多元素，并返回新的长度
/*队列方法 结合shift()和push()可以向队列一样使用数组*/
shift()            删除并返回数组的第一个元素
/*队列方法 同时使用unshift()和pop()可以从相反的方法模拟队列*/
unshift()        向数组的开头添加一个或更多元素，并返回新的长度
/*重排列方法*/
sort()            对数组的元素进行排序
reverse()        颠倒数组中元素的顺序
/*操作方法*/
concat()        连接两个或更多的数组，并返回结果
slice()            从某个已有的数组返回特定的元素
splice()        删除元素，并向数组添加新元素
/*下面是ECMPScript 5 中的新方法*/
/*位置方法*/
indexOf()
lastIndexOf()  
/*迭代方法*/
every()
filter()
forEach()
map()
some()
/*归并方法*/
reduce()
reduceRight()

数组连接concat()

concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。

语法
arrayObject.concat(array1,array2,…,arrayN)
参数说明：
array1 要连接的第一个数组
… …
arrayN 第N个数组

指定分隔符连接数组元素join()

join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

语法：

arrayObject.join(分隔符)

参数                描述
separator        可选，指定要使用的分隔符
                默认该参数使用逗号作为分隔符

注意：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。

颠倒数组元素顺序reverse()

reverse() 方法用于颠倒数组中元素的顺序。

语法：

arrayObject.reverse()

注意：该方法会改变原来的数组，而不会创建新的数组。

选定元素slice()

slice() 方法可从已有的数组中返回选定的元素。

语法

arrayObject.slice(start,end)

参数                描述
start            必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部                开始算起的位置。 -1指最后一个元素。
end                可选。规定从何处结束。该参数是数组片段处的下标。如果没有指定                该参数，那么切分位置一直到数组的最后的所有元素。如果是负数                从数组尾部算起

1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

该方法并不会修改数组，而是返回一个子数组。

注意：

可使用负值从数组的尾部选取元素。

2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

.slice() 与 Array.slice() 相似。

数组排序sort()

sort()方法使数组中的元素按照一定的顺序排列。

语法:

arrayObject.sort(方法函数)

参数说明：
参数描述
方法函数可选。规定排序循环。必须是函数。

1.如果不指定<方法函数>，则按unicode码顺序排列。

2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。

myArray.sort(sortMethod);

注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1，则表示 a="" 和="" b="" 具有相同的排序顺序。="" 若返回值="">=1，则表示 A 在排序后的序列中出现在 B 之后。

1.使用sort()将数组进行排序，代码如下：

<script type="text/javascript">
  var myarr1 = new Array("Hello","John","love","JavaScript"); 
  var myarr2 = new Array("80","16","50","6","100","1");
  document.write(myarr1.sort()+"<br>");
  document.write(myarr2.sort());
</script>

运行结果：

Hello,JavaScript,John,love
1,100,16,50,6,80

注意:上面的代码没有按照数值的大小对数字进行排序。

2.如要实现这一点，就必须使用一个排序函数，代码如下：

<script type="text/javascript">
  function sortNum(a,b) {
  return a - b;
 //升序，如降序，把“a - b”该成“b - a”
}
 var myarr = new Array("80","16","50","6","100","1");
  document.write(myarr + "<br>");
  document.write(myarr.sort(sortNum));
</script>

运行结果：

80,16,50,6,100,1
1,6,16,50,80,100

浏览器对象

window对象

window对象是BOM的核心，window对象指当前的浏览器窗口

方法                描述
alert()            显示带有一段消息和一个确认的按钮的警告框
prompt()        显示可提示用户输入的对话框
confirm()        显示带有一段消息以及确认按钮和取消按钮的对话框
open()            打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口
print()            打印当前窗口的内容
focus()            把键盘焦点给予一个窗口
blur()            把键盘焦点从顶层窗口移开
moveBy()        可相对窗口的当前坐标把它移动指定的像素
moveTo()        把窗口的左上角移动到一个制定的坐标
resizeTo()        把窗口的大小调整到制定的宽度和高度
scrollBy()        按照指定的像素来滚动内容
scrollTo()        把内容滚动到指定的坐标
setInterval()    隔指定的时间执行代码
setTimeout()    在指定的延迟时间之后来执行代码
clearInterval()    取消setInterval()的设置
clearTimeout()    取消setTimeout()的设置

JavaScript 计时器

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器方法：
方法说明
setInterval() 隔指定的时间执行代码
setTimeout() 在指定的延迟时间之后来执行代码
clearInterval() 取消setInterval()的设置
clearTimeout() 取消setTimeout()的设置

计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

语法:

setInterval(代码,交互时间);

参数说明：

代码：要调用的函数或要执行的代码串。
交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:

一个可以传递给 clearInterval() 从而取消对”代码”的周期性执行的值。

调用函数格式(假设有一个clock()函数):

setInterval("clock()",1000)
或
setInterval(clock,1000)

取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：

clearInterval(id_of_setInterval)

参数说明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();                     
      document.getElementById("clock").value = time;
   }
// 每隔100毫秒调用clock函数，并将返回值赋值给i
     var i=setInterval("clock()",100);
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)"  />
  </form>
</body>
</html>

计时器setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

setTimeout(代码,延迟时间);

参数说明：

要调用的函数或要执行的代码串。
延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

当我们打开网页3秒后，在弹出一个提示框，代码如下:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>

当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
  var t=setTimeout("alert('Hello!')",5000);
 }
</script>
</head>
<body>
<form>
  <input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>

要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
 document.getElementById('txt').value=num;
 num=num+1;
 setTimeout("numCount()",1000);
 }
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>

取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止计时器。

语法:

clearTimeout(id_of_setTimeout)

参数说明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 “Stop” 按钮来停止这个计数器：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  var num=0,i;
  function timedCount(){
    document.getElementById('txt').value=num;
    num=num+1;
    i=setTimeout(timedCount,1000);
  }
    setTimeout(timedCount,1000);
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="txt">
    <input type="button" value="Stop" onClick="stopCount()">
  </form>
</body>
</html>

History 对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

语法：

window.history.[属性|方法]

注意：window可以省略。

History对象属性
方法描述
length 返回浏览器历史列表的URL数量

History对象方法
方法描述
back() 加载histroy列表中的前一个URL
forward() 加载histroy列表中的下一个URL
go() 加载histroy列表中的某个具体的页面

返回浏览历史中的其他页面

go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。

语法：

window.history.go(number);

参数：

number            参数说明
1                前一个，go（1）等价于forward()
0                 当前页面
-1                后一个，go（-1）等价于back（）
其他值            要访问的URL在History的URL列表中的相对位置

Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。

语法:

location.[属性|方法]

location对象属性图示:

对象属性：

属性            描述
hash        设置或返回从#开始的URL
host        设置或返回主机名和当前URL的端口号
hostname    设置或返回当前url的主机名
href        设置或返回完整的URL
pathname    设置或返回当前的URL路径部分
port        设置或返回当前的URL的端口号
protocol    设置或返回当前的URL的协议
search        设置或返回当前问号?开始的URL（查询部分）

对象方法

属性            描述
assign()    加载新的文档
reload()    重新加载当前文档
replace()    用新的文档替换当前文档

Navigator对象

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

对象属性

属性            描述
appCodeName    浏览器代码名的字符串表示
appName        返回浏览器的名称
appVersion    返回浏览器的平台和版本信息
platform    返回运行浏览器的操作系统平台
userAgent    返回由客户机发送服务器的user-agent头部的值。

userAgent

查看浏览器的userAgent，并判断是什么浏览器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>navigator</title>
<script type="text/javascript">
  function validB(){ 
    var u_agent =  navigator.userAgent     ; 
    var B_name="不是想用的主流浏览器!"; 
    if(u_agent.indexOf("Firefox")>-1){ 
        B_name="Firefox"; 
    }else if(u_agent.indexOf("Chrome")>-1){ 
        B_name="Chrome"; 
    }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
        B_name="IE(8-10)";  
    }
        document.write("浏览器:"+B_name+"<br>");
        document.write("u_agent:"+u_agent+"<br>"); 
  } 
</script>
</head>
<body>
  <form>
     <input type="button" value="查看浏览器" onclick="validB()"  >
  </form>
</body>
</html>

screen对象

screen对象用于获取用户的屏幕信息。

语法：

window.screen.属性

对象属性：

属性            描述
availHeight    窗口可以使用的屏幕高度，单位像素
availWidth    窗口可以使用的屏幕宽度，单位像素
colorDepth    用户浏览器表示的颜色位数，通常为32为(每像素的位数)
pixelDepth    用户浏览器表示的颜色位数，通常为32为(每像素的位数)（IE不支持此属性）
height        屏幕的高度，单位像素
width        屏幕的宽度，单位像素

屏幕分辨率的高和宽

window.screen 对象包含有关用户屏幕的信息。

screen.height 返回屏幕分辨率的高
screen.width 返回屏幕分辨率的宽
注意:
1.单位以像素计。
window.screen 对象在编写时可以不使用 window 这个前缀。
我们来获取屏幕的高和宽，代码如下:

屏幕可用高和宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。

注意:

不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。

DOM对象控制HTML元素

认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML文档可以说由节点构成的集合，DOM节点有:

元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
属性节点:元素属性，如<a>标签的链接属性href=”http://www.imooc.com“

节点属性

方法                    说明
nodeName            返回一个字符串，其内容是给定节点的名字。
nodeType            返回一个整数，这个数值代表给定节点的类型。
nodeValue            返回给定节点的当前值

遍历节点树

方法                    说明
childNodes            返回一个数组，这个数组由给定元素的子节点构成
firstChild            返回第一个子节点
lastChild            返回一个给定的父节点
parentNode            返回一个给定节点的父节点
nextSibling            返回给定节点的下一个子节点
previousSibling        返回给定节点的上一个子节点

DOM操作

方法                        说明
createElement(element)    创建一个新的元素节点
createTextNode()        创建一个包含着给定文本的新文本节点
appendChild()            指定节点的最后一个子节点列表之后添加一个新的子节点
insertBefore()            将一个给定节点插入到一个给定元素节点的给定子节点前面
removeChild()            从一个给定元素中删除一个子节点
replaceChild()            把一个给定父元素里的一个子节点替换为另一个节点。

注意:前两个是document方法。

getElementsByName()方法

返回带有指定名称的节点对象的集合。

语法：

document.getElementsByName(name)

与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

注意:

因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法:

getElementsByTagName(Tagname)

说明:

Tagname是标签的名称，如p、a、img等标签名。
和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

区别getElementByID,getElementsByName,getElementsByTagName

以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName(“小孩”)。

把上面的例子转换到HTML中，如下:

<input type="checkbox" name="hobby" id="hobby1">  音乐

input标签就像人的类别。

name属性就像人的姓名。

id属性就像人的身份证

getAttribute()方法

通过元素节点的属性名称获取属性的值。

语法：

elementNode.getAttribute(name)

说明:

elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
name：要想查询的元素节点的属性名字

setAttribute()方法

setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：

elementNode.setAttribute(name,value)

说明：

1.name: 要设置的属性名。

2.value: 要设置的属性值。

注意：

1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。

2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

访问子结点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。

语法：

elementNode.childNodes

注意：

如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

注意:

IE全系列、firefox、chrome、opera、safari兼容问题
节点之间的空白符，在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等浏览器标签之间的空白也算是一个文本节点。

访问兄弟节点

nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

语法：

nodeObject.nextSibling

说明：如果无此节点，则该属性返回 null。

previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

语法：

nodeObject.previousSibling

说明：如果无此节点，则该属性返回 null。

注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。

解决问题方法:

判断节点nodeType是否为1, 如是为元素节点，跳过。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>nextSibling</title>
</head>
<body>
<ul id="u1">   
            <li id="a">javascript</li>   
            <li id="b">jquery</li>   
            <li id="c">html</li>   
        </ul>   
        <ul id="u2">   
            <li id="d">css3</li>   
            <li id="e">php</li>   
            <li id="f">java</li>   
        </ul>   
<script type="text/javascript">
    function get_nextSibling(n){
        var x=n.nextSibling;
        while (x && x.nodeType!=1){
            x=x.nextSibling;
        }
        return x;
    }

    function get_previousSibling(n){
        var x = n.previousSibling;
        while(x && x.nodeType!=1){
            x=x.previousSibling;
        }
        return x;
    }

    var x=document.getElementsByTagName("li")[0];
    document.write(x.nodeName);
    document.write(" = ");
    document.write(x.innerHTML);

    var y=get_nextSibling(x);

    if(y!=null){
        document.write("<br />nextsibling: ");
        document.write(y.nodeName);
        document.write(" = ");
        document.write(y.innerHTML);
    }else{
      document.write("<br>已经是最后一个节点");      
    }

    var z = get_previousSibling(y);
    if(z!=null){
        document.write("<br />previous: ");
        document.write(z.nodeName + " = " + z.innerHTML);
    }

</script>
</body>
</html>

插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法:

appendChild(newnode)

参数:

newnode：指定追加的节点。

插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法:

insertBefore(newnode,node);

参数:

newnode: 要插入的新节点。

node: 指定此节点前插入节点。

删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

语法:

nodeObject.removeChild(node)

参数:

node ：必需，指定需要删除的节点。

注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。
如果要完全删除对象，给 x 赋 null 值

替换元素节点replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

语法：

node.replaceChild (newnode,oldnew )

参数：

newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。

创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：
document.createElement(tagName)
参数:
tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

我们来创建一个按钮，代码如下：

<script type="text/javascript">
   var body = document.body; 
   var input = document.createElement("input");  
   input.type = "button";  
   input.value = "创建一个按钮";  
   body.appendChild(input);  
 </script>

效果：在HTML文档中，创建一个按钮。
我们也可以使用setAttribute来设置属性，代码如下：

<script type="text/javascript">  
   var body= document.body;             
   var btn = document.createElement("input");  
   btn.setAttribute("type", "text");  
   btn.setAttribute("name", "q");  
   btn.setAttribute("value", "使用setAttribute");  
   btn.setAttribute("onclick", "javascript:alert('This is a text!');");       
   body.appendChild(btn);  
</script>

效果：在HTML文档中，创建一个文本框，使用setAttribute设置属性值。当点击这个文本框时，会弹出对话框“This is a text!”。

创建文本节点createTextNode

createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：
document.createTextNode(data)
参数：
data : 字符串值，可规定此节点的文本。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">

.message{    
    width:200px;
    height:100px;
    background-color:#CCC;}

</style>
</head>
<body>
<script type="text/javascript">
    var element = document.createElement("div");
    element.className = "message";
    var textNode = document.createTextNode("Hello world");
    element.appendChild(textNode);
    document.body.appendChild(element);

</script> 

</body>
</html>

浏览器窗口可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:

一、对于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 属性指定的父坐标的计算顶端位置。
注意:

区分大小写
offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

本文标题:js进阶篇2

文章作者:jocelynthink

发布时间:2016-04-17, 12:14:44

最后更新:2016-06-13, 21:11:31

原始链接:http://yoursite.com/2016/04/17/js进阶篇2/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

Math对象

四舍五入round()

Array数组对象

数组连接concat()

指定分隔符连接数组元素join()

颠倒数组元素顺序reverse()

选定元素slice()

数组排序sort()

浏览器对象

window对象

JavaScript 计时器

计时器setInterval()

取消计时器clearInterval()

计时器setTimeout()

取消计时器clearTimeout()

History 对象

返回浏览历史中的其他页面

Location对象

对象属性：

对象方法

Navigator对象

对象属性

userAgent

screen对象

屏幕分辨率的高和宽

屏幕可用高和宽度

DOM对象 控制HTML元素

认识DOM

节点属性

遍历节点树

DOM操作

getElementsByName()方法

getElementsByTagName()方法

区别getElementByID,getElementsByName,getElementsByTagName

getAttribute()方法

setAttribute()方法

节点属性

访问子结点childNodes

访问子结点的第一和最后项

访问父节点parentNode

访问兄弟节点

插入节点appendChild()

插入节点insertBefore()

删除节点removeChild()

替换元素节点replaceChild()

创建元素节点createElement

创建文本节点createTextNode

浏览器窗口可视区域大小

一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：

二、对于 Internet Explorer 8、7、6、5：

在不同浏览器都实用的 JavaScript 方案：

网页尺寸scrollHeight

一、针对IE、Opera:

二、针对NS、FF:

三、浏览器兼容性

网页尺寸offsetHeight

一、值

二、浏览器兼容性

DOM对象控制HTML元素