JS笔记
将JavaScript 插入网页的方法
-------------------------------------------------
用JavaScript在网页中输出内容
<script type="text/JavaScript">
document.write("我是菜鸟我怕谁!");
</script>
-------------------------------------------------
用JavaScript在网页中输出内容
<script type="text/JavaScript">
document.write("我是菜鸟我怕谁!");
</script>
对不支持JavaScript的浏览器隐藏代码
<!--
-->
-------------------------------------------------
插入JavaScript的位置
-------------------------------------------------
Body里的JavaScript
-------------------------------------------------
Body里的JavaScript
<html>
<body>
<script type="text/JavaScript">
<!--
document.write("我是菜鸟我怕谁!");
//-->
</script>
</body>
<body>
<script type="text/JavaScript">
<!--
document.write("我是菜鸟我怕谁!");
//-->
</script>
</body>
Head里的JavaScript
<html>
<head>
<script type="text/JavaScript">
....
</script>
</head>
<head>
<script type="text/JavaScript">
....
</script>
</head>
添加外部JavaScript脚本
也可以像添加外部CSS一样添加外部JavaScript脚本文件，其后缀通常为.js。例如：
<html>
<head>
<script src="scripts.js"></script>
</head>
<body>
</body>
</html>
<head>
<script src="scripts.js"></script>
</head>
<body>
</body>
</html>
如果很多网页都需要包含一段相同的代码，那么将这些代码写入一个外部JavaScript文件是最好的方法。此后，任何一个需要该功能的网页，只需要引入这个js文件就可以了。
注意：脚本文件里头不能再含有<script>标签。
注：放在body里的函数是一个例外，它并不会被执行，而是等被调用时才会执行。
-------------------------------------------------
JavaScript 语句
-------------------------------------------------
在JavaScript中，一行的结束就被认定为语句的结束。但是最好还是要在结尾加上一个分号“;”来表示语句的结束。这是一个编程的好习惯，事实上在很多语言中句末的分号都是必须的。
-------------------------------------------------
在JavaScript中，一行的结束就被认定为语句的结束。但是最好还是要在结尾加上一个分号“;”来表示语句的结束。这是一个编程的好习惯，事实上在很多语言中句末的分号都是必须的。
JavaScript 代码块(Blocks)
看看下面这个代码块
看看下面这个代码块
{ }
-------------------------------------------------
JavaScript 注释
-------------------------------------------------
单行注释 //
多行注释 /* */
-------------------------------------------------
单行注释 //
多行注释 /* */
-------------------------------------------------
JavaScript 变量
-------------------------------------------------
术语：变量名,赋值
a = 5 ;
-------------------------------------------------
术语：变量名,赋值
a = 5 ;
声明变量
<script type="text/javascript">
var a ; //声明一个变量a
a = 5 ; //给变量赋值
</script>
变量的数据类型
其中，quanNeng2这个变量存储了一个字符串，字符串需要用一对引号括起来。变量还可以存储更多的东西，例如数组，对象，布尔值等等，我们会在后面介绍这些内容。
-------------------------------------------------
JavaScript操作符(一)――运算操作符
-------------------------------------------------
自加一，自减一操作符
这里我们来看两个非常常用的运算符，自加一“++”；自减一“--”。首先来看一个例子：
-------------------------------------------------
自加一，自减一操作符
这里我们来看两个非常常用的运算符，自加一“++”；自减一“--”。首先来看一个例子：
复合操作符
延续上面的例子，其实“a = a + 1”还可以写成：
延续上面的例子，其实“a = a + 1”还可以写成：
a += 1;//将a的值加1之后再赋给a
-------------------------------------------------
-------------------------------------------------
JavaScript操作符(二)――比较操作符和逻辑操作符
-------------------------------------------------
比较操作符
上一节的if语句中，我们用到了“==”符号。它就是一个比较操作符，它表示的意思就是“相等吗？”。
例如：a==b表示：“a与b的值相等吗？”
在JavaScript中，这样的比较操作符有很多，下面就列出这些操作符以及它们的含义。
“>” ―― a大于b吗？
“<” ―― a小于b吗？
“>=” ―― a大于等于b吗？
“<=” ―― a小于等于b吗？
“==” ―― a等于b吗？
“!=” ―― a不等于b吗？
“<” ―― a小于b吗？
“>=” ―― a大于等于b吗？
“<=” ―― a小于等于b吗？
“==” ―― a等于b吗？
“!=” ―― a不等于b吗？
逻辑操作符
你可能已经猜到了，“&&”是而且的意思。
类似的操作符还有“或者(||)”和“非(!)”
-------------------------------------------------
JavaScript if else语句（如果，否则）
-------------------------------------------------
一个简单的if实例
if (表达式)
{}
else
{}
-------------------------------------------------
一个简单的if实例
if (表达式)
{}
else
{}
-------------------------------------------------
JavaScript Switch语句
-------------------------------------------------
一个使用switch的实例:
<script type="text/JavaScript">
//首先，我们用score变量来存储分数，假设为65
var score = 65;
//用分数除以10，parseInt的作用是把它转换为整数，
//暂时不用深究，()内最后的结果为6
switch (parseInt(score / 10)) {
//switch开始实现判断过程，case6得到满足
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
//根据不同的等级做出不同的行为。
//冒号后面的语句就是行为
//case0到5的行为都是下面这个语句
degree = "恭喜你，又挂了！";
break;
case 6:
degree = "勉强及格"; break;
case 7:
degree = "凑合，凑合"
break;
case 8:
degree = "8错，8错";
break;
case 9:
case 10:
degree = "高手高手，佩服佩服";
}//end of switch
document.write(degree);
</script>
JavaScript Switch语句
-------------------------------------------------
一个使用switch的实例:
<script type="text/JavaScript">
//首先，我们用score变量来存储分数，假设为65
var score = 65;
//用分数除以10，parseInt的作用是把它转换为整数，
//暂时不用深究，()内最后的结果为6
switch (parseInt(score / 10)) {
//switch开始实现判断过程，case6得到满足
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
//根据不同的等级做出不同的行为。
//冒号后面的语句就是行为
//case0到5的行为都是下面这个语句
degree = "恭喜你，又挂了！";
break;
case 6:
degree = "勉强及格"; break;
case 7:
degree = "凑合，凑合"
break;
case 8:
degree = "8错，8错";
break;
case 9:
case 10:
degree = "高手高手，佩服佩服";
}//end of switch
document.write(degree);
</script>
-------------------------------------------------
JavaScript 弹出框
-------------------------------------------------
警告(alert)
确认(confirm)
提问(prompt)
-------------------------------------------------
-------------------------------------------------
警告(alert)
确认(confirm)
提问(prompt)
-------------------------------------------------
JavaScript 函数
-------------------------------------------------
简单的函数定义:
function 函数名(){
函数代码;
}
带参数的函数:
function(参数1,参数2,参数3){
部分函数代码……
……
}
例如：
function add2(x,y){
sum = x + y;
alert(sum);
}
带返回值的函数
return sum;
-------------------------------------------------
return sum;
-------------------------------------------------
JavaScript For 循环
-------------------------------------------------
for循环的简单例子――菜鸟报数
<script type="text/JavaScript">
var i=1;
for (i=1;i<=10;i++)
{
document.write("菜鸟"+i+"号<br />");
}
</script>
for循环语法：
for(初始条件;判断条件;循环后动作)
{
循环代码
}
for(初始条件;判断条件;循环后动作)
{
循环代码
}
循环的另一种方法：
while循环的工作机制
让我们来看看while循环的执行过程：
while(判断条件)
{
循环代码
}
{
循环代码
}
do while结构
do wile结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件。例子如下：
<script type="text/JavaScript">
i = 0;
do
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
while (i <= 5)
</script>
-------------------------------------------------
i = 0;
do
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
while (i <= 5)
</script>
-------------------------------------------------
JavaScript Break 与 Continue
-------------------------------------------------
break
break语句可以让循环中途停止，直接执行后面的代码。格式如下：
-------------------------------------------------
break
break语句可以让循环中途停止，直接执行后面的代码。格式如下：
continue
continue的作用是仅仅跳过本次循环，而整个循环体继续执行。它的格式如下：
-------------------------------------------------
JavaScript For...In循环
-------------------------------------------------
for in遍历数组
首先要了解什么是数组，所谓数组，其实就是一个保存了一组类似变量的一个集合。我们来看一个保存了爱好的数组实例：
<html>
<body>
<script type="text/JavaScript">var x;var hobbies = new Array();//创建一个新的数组hobbies[0] = "JavaScript";hobbies[1] = "CSS";hobbies[2] = "篮球";for (x in hobbies)//数组中的每一个变量{document.write(hobbies[x] + "<br />");}</script></body>
</html>
-------------------------------------------------
for in遍历数组
首先要了解什么是数组，所谓数组，其实就是一个保存了一组类似变量的一个集合。我们来看一个保存了爱好的数组实例：
<html>
<body>
<script type="text/JavaScript">var x;var hobbies = new Array();//创建一个新的数组hobbies[0] = "JavaScript";hobbies[1] = "CSS";hobbies[2] = "篮球";for (x in hobbies)//数组中的每一个变量{document.write(hobbies[x] + "<br />");}</script></body>
</html>
语法帮助：
for (x in hobbies)//数组中的每一个变量
{
document.write(hobbies[x] + "<br />");
}
for (x in hobbies)//数组中的每一个变量
{
document.write(hobbies[x] + "<br />");
}
-------------------------------------------------
JavaScript事件
-------------------------------------------------
点击事件：
<button value="点击提交" onclick="displaymessage()">onclick调用函数</button>
鼠标经过、移出事件：
经过
<button value="点击提交" onmouseover="displaymessage()">鼠标滑过调用函数</button>
移出
<button value="点击提交" onmouseout="displaymessage()">鼠标移出调用函数</button>
更多事件
JavaScript中还有很多事件，完整的列表可以看看本节笔记的参考。
JavaScript中还有很多事件，完整的列表可以看看本节笔记的参考。
-------------------------------------------------
JavaScript调试
-------------------------------------------------
try、catch
try、catch用来调试一段可能出错的代码：
-------------------------------------------------
try、catch
try、catch用来调试一段可能出错的代码：
try {
//要调试的代码
}
catch(e){
//如果出现错误将会执行这个代码块
}
finally{
//无论是否出错都会执行的代码
}
//要调试的代码
}
catch(e){
//如果出现错误将会执行这个代码块
}
finally{
//无论是否出错都会执行的代码
}
-------------------------------------------------
JavaScript 特殊字符
-------------------------------------------------
document.write("小明说：\"我是菜鸟我怕谁？\"。");
我们在双引号前面加上一个反斜线就可以了。在JavaScript中有很多这样具有功能的特殊字符，如果需要把它们插入字符串都需要在前面加上一个反斜线"\"。
-------------------------------------------------
document.write("小明说：\"我是菜鸟我怕谁？\"。");
我们在双引号前面加上一个反斜线就可以了。在JavaScript中有很多这样具有功能的特殊字符，如果需要把它们插入字符串都需要在前面加上一个反斜线"\"。
特殊字符列表
JavaScript特殊字符代码 代码 输出
\' 单引号
\" 双引号
\& 与符号
\\ 反斜线
\n 换行
\r 回车
\t 制表符
\b 后退
\f form feed(小菜鸟：没弄明白)
JavaScript特殊字符代码 代码 输出
\' 单引号
\" 双引号
\& 与符号
\\ 反斜线
\n 换行
\r 回车
\t 制表符
\b 后退
\f form feed(小菜鸟：没弄明白)
-------------------------------------------------
JavaScript 指导准则
-------------------------------------------------
JavaScript区分大小写(大小写敏感)
变量名和函数名都区分大小写。
-------------------------------------------------
JavaScript区分大小写(大小写敏感)
变量名和函数名都区分大小写。
空格
多余的空格是被忽略的。例如下面两个语句
多余的空格是被忽略的。例如下面两个语句
a=b+c;
a = b + c ;他们是等价的。
a = b + c ;他们是等价的。
表示本行未完”\”
前面已经说过，浏览器读到一行末尾会自动判定本行已经结束，不过我们可以通过在行末添加一个“\”来告诉浏览器本行没有结束。
前面已经说过，浏览器读到一行末尾会自动判定本行已经结束，不过我们可以通过在行末添加一个“\”来告诉浏览器本行没有结束。
document.write("Hello \ World!")和
document.write("我是菜鸟我怕谁!")是完全一样的。
-------------------------------------------------
JavaScript 笔记小结
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
HTML DOM
-------------------------------------------------
因而 DOM 被认为是基于树或基于对象的。
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
HTML DOM
-------------------------------------------------
因而 DOM 被认为是基于树或基于对象的。
HTML DOM是HTML Document Object Model(文档对象模型)的缩写，HTML DOM则是专门适用与HTML/XHTML的文档对象模型。熟悉软件开发的人员可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。 例如Javascript就可以利用HTML DOM动态的修改网页。(更多解释见DOM的百度百科)
-------------------------------------------------
DOM可以做什么？
-------------------------------------------------
改变页面的背景：
document.body.bgColor="yellow"
-------------------------------------------------
改变页面的背景：
document.body.bgColor="yellow"
隐藏和显示:
JavaScript代码：
<script type="text/javascript"> function hide(){ document.getElementById("hiddenTest").style.display = "none" ; } function show(){ document.getElementById("hiddenTest").style.display = "block" ; }</script>HTML代码：
<form action="#">
<button return false;" value="隐藏" >隐藏段落</button>
<button return false;" value="显示" >显示段落</button>
</form>
<p id="hiddenTest">上面的按钮可以控制我的显示和消失哦。……</p>
JavaScript代码：
<script type="text/javascript"> function hide(){ document.getElementById("hiddenTest").style.display = "none" ; } function show(){ document.getElementById("hiddenTest").style.display = "block" ; }</script>HTML代码：
<form action="#">
<button return false;" value="隐藏" >隐藏段落</button>
<button return false;" value="显示" >显示段落</button>
</form>
<p id="hiddenTest">上面的按钮可以控制我的显示和消失哦。……</p>
-------------------------------------------------
DOM的结构
-------------------------------------------------
HTML的标签在DOM中都是一个个节点，而这些节点组成了DOM的整体结构――节点树。
-------------------------------------------------
HTML的标签在DOM中都是一个个节点，而这些节点组成了DOM的整体结构――节点树。
-------------------------------------------------
访问DOM节点1――getElementById()
-------------------------------------------------
刚刚看过了DOM的结构――节点树。现在我们就来看看如何能访问DOM节点树中的特定节点。
-------------------------------------------------
刚刚看过了DOM的结构――节点树。现在我们就来看看如何能访问DOM节点树中的特定节点。
getElementById() ―― 直接拿下法
这是访问某个节点的最简单的方法，例如，网页中有一个id为“testId”的元素，则可以通过getElementById(“testId”)来访问这个节点。这么说还不是很清楚，还是看一个例子吧。
这是访问某个节点的最简单的方法，例如，网页中有一个id为“testId”的元素，则可以通过getElementById(“testId”)来访问这个节点。这么说还不是很清楚，还是看一个例子吧。
复习JavaScript变量
我们已经知道JS的变量可以存储数字之类的东西，但是我相信大家和我一样，学习JavaScript绝对不是为了做加减乘除。下面我们看看变量的新应用。
其实，我们可以用上面例子中段落用变量存储起来，代码如下：
para = document.getElementById(“testId”)以后就可以使用para这个变量来访问这个段落了。
-------------------------------------------------
访问DOM节点2――getElementsByTagName()
-------------------------------------------------
getElementsByTagName()
使用上一节介绍的getElementById()的方法，一次只能访问一个节点，原因很简单，它是以HTML中的id来作为选择条件的。DOM中提供了另一种选中批量节点的方法――getElementsByTagName()则。它以标签作为选择的条件，例如，下面的JavaScript代码将会选中当前网页中的所有段落。
-------------------------------------------------
getElementsByTagName()
使用上一节介绍的getElementById()的方法，一次只能访问一个节点，原因很简单，它是以HTML中的id来作为选择条件的。DOM中提供了另一种选中批量节点的方法――getElementsByTagName()则。它以标签作为选择的条件，例如，下面的JavaScript代码将会选中当前网页中的所有段落。
document.getElementsByTagName("p")
根据上一节的经验，我们似乎可以马上对这些段落进行一些操作了。不过，getElementsByTagName()返回的并不是一个节点，而是一个节点列表。所以如果我们想对上面代码取得的所有段落进行操作，方式也会有所不同。还是来看一个例子吧。
使用getElementsByTagName()的实例
<script type="text/javascript">function allPara(){//paras存储所有段落paras = document.getElementsByTagName("p");//paraNum循环变量，用于选中每个单独的段落var paraNum;//从零开始循环，paras.length是段落节点的个数for (var paraNum=0;paraNum<paras.length;paraNum++) { //操作：给段落设置边框。 paras[paraNum].style.border = "1px dashed pink"; }}</script>
<script type="text/javascript">function allPara(){//paras存储所有段落paras = document.getElementsByTagName("p");//paraNum循环变量，用于选中每个单独的段落var paraNum;//从零开始循环，paras.length是段落节点的个数for (var paraNum=0;paraNum<paras.length;paraNum++) { //操作：给段落设置边框。 paras[paraNum].style.border = "1px dashed pink"; }}</script>
结合使用getElementById()和getElementsByTagName()
有时候我们可能不希望选中网页中的所有的段落，而是选中特定部分的段落(或者是其它元素)。其实我们可以借用以上两个函数来实现，例如如下的代码就会先找到id为content的元素，再进一步选中它内部的段落。
有时候我们可能不希望选中网页中的所有的段落，而是选中特定部分的段落(或者是其它元素)。其实我们可以借用以上两个函数来实现，例如如下的代码就会先找到id为content的元素，再进一步选中它内部的段落。
cparas = document.getElementById("content").getElementsByTagName("p");
-------------------------------------------------
-------------------------------------------------
访问DOM节点3――通过节点关系
-------------------------------------------------
DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。
-------------------------------------------------
DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。
parentNode、firstChild、lastChild
如字面意思，parentNode用于访问父节点。firstChild和lastChild则分别用于访问某个节点的第一个子结点和最后一个子结点。其中，nodeName是只读的，元素节点的nodeName和标签名字一样，属性节点的nodeName就是该属性，文字节点的nodeName永远是#text，文档节点的nodeName是#document。
如字面意思，parentNode用于访问父节点。firstChild和lastChild则分别用于访问某个节点的第一个子结点和最后一个子结点。其中，nodeName是只读的，元素节点的nodeName和标签名字一样，属性节点的nodeName就是该属性，文字节点的nodeName永远是#text，文档节点的nodeName是#document。
应用实例
HTML代码：
<div> <p id="test">我是第一个p的文字</p> <p id="test2">我是第二个p的文字，span的文字</p></div>
JavaScript代码
<script type="text/javascript">function getTest(){ var x = document.getElementById("test"); x.style.border = "1px dashed";}function getParent(){ var x = document.getElementById("test"); x.parentNode.style.border = "1px dashed";}function getFirst(){ var x = document.getElementById("test"); alert(x.firstChild.nodeValue);}function getLast(){ var x = document.getElementById("test"); alert(x.lastChild.nodeValue);}</script>
从上面的实际例子中我们可以看到，在DOM节点树里，并不只有标签菜构成节点，而文字本身也是节点。例如，p是一个节点，而它的firstChild就是这个段落的文字内容了。
其它访问DOM节点的属性
除了上面的parentNode、firstChild和lastChild，我们还有childNodes，它表示的是一个节点的所有子结点；而previousSibling和nextSibling则分别表示上一个和下一个相邻的节点。
除了上面的parentNode、firstChild和lastChild，我们还有childNodes，它表示的是一个节点的所有子结点；而previousSibling和nextSibling则分别表示上一个和下一个相邻的节点。
-------------------------------------------------
DOM节点信息: text and document ?
-------------------------------------------------
每个DOM节点都保存了关于该节点的一些信息，我们来看看如何访问这些信息。
-------------------------------------------------
DOM信息nodeType的应用
-------------------------------------------------
本文介绍了使用DOM节点的nodeType属性来过滤出特定类型节点的方法。并且举了一个统计文档内所有元素节点的实例。
-------------------------------------------------
修改DOM――innerHTML
-------------------------------------------------
innerHTML的意思就是“里面的HTML”，就像它的名字一样容易理解，使用它也是异常的简单。我们先来看一个例子。
-------------------------------------------------
innerHTML的意思就是“里面的HTML”，就像它的名字一样容易理解，使用它也是异常的简单。我们先来看一个例子。
显示test内的html:
<script type="text/javascript">function test(){ alert(document.getElementById("test").innerHTML);}</script>
<script type="text/javascript">function test(){ alert(document.getElementById("test").innerHTML);}</script>
修改innerHTML实例代码:
<script type="text/javascript">function testW(){ var str = "<p>面目全非！￥%……&*（）</p>"; document.getElementById("test").innerHTML = str;}</script>
-------------------------------------------------
<script type="text/javascript">function testW(){ var str = "<p>面目全非！￥%……&*（）</p>"; document.getElementById("test").innerHTML = str;}</script>
-------------------------------------------------
删除DOM节点――removeChild
-------------------------------------------------
上一节我们看了如何使用innerHTML来修改DOM，而使用removeChild函数则可以删除文档中的指定节点。我们仍然使用一个例子来说明该函数的使用方法。
从上面的JS代码可以看到，使用removeChild的格式为：
父节点.removeChild(子结点)
实例JavaScript代码
<script type="text/javascript">function remove(){ var test = document.getElementById("test"); var children = test.childNodes; for(i=0;i<children.length;i++){ test.removeChild(children[i]); }}</script>
-------------------------------------------------
上一节我们看了如何使用innerHTML来修改DOM，而使用removeChild函数则可以删除文档中的指定节点。我们仍然使用一个例子来说明该函数的使用方法。
从上面的JS代码可以看到，使用removeChild的格式为：
父节点.removeChild(子结点)
实例JavaScript代码
<script type="text/javascript">function remove(){ var test = document.getElementById("test"); var children = test.childNodes; for(i=0;i<children.length;i++){ test.removeChild(children[i]); }}</script>
removeChild的返回值
removeChild删除节点后会返回被删除节点的引用，这样当我们以后再想重新将它添加到文档中，或者是对它进行其它操作的时候就可以使用这个引用了。例如下面的代码段：
var removed = xxx.removeChild(xxxx);
则removed就是被删除的节点，可以在后面的代码中使用。
-------------------------------------------------
添加DOM节点
-------------------------------------------------
本节介绍使用标准的DOM方法向文档中添加节点，用到了createElement、createTextNode以及appendChild等方法。
-------------------------------------------------
本节介绍使用标准的DOM方法向文档中添加节点，用到了createElement、createTextNode以及appendChild等方法。
使用DOM方法修改文档比使用innerHTML要麻烦一些，我们先来看一段示例HTML代码：
<div id="test" style="border:1px solid"></div>
使用DOM方法添加一个段落节点的思路如下：
使用DOM方法添加一个段落节点的思路如下：
创建一个p节点
穿件一个文本节点，并且添加到p节点中
将p节点添加到div中
穿件一个文本节点，并且添加到p节点中
将p节点添加到div中
实例JavaScript代码:
按照上面的思路我们得出如下的JS代码：
按照上面的思路我们得出如下的JS代码：
<script type="text/javascript">function test(){ var test = document.getElementById("test"); var para = document.createElement("P"); var text = document.createTextNode("要添加的文本"); para.appendChild(text); test.appendChild(para);} </script>
代码解释:
首先，我们用到了var para = document.createElement("P");该语句创建了一个段落节点，但是它并不会马上出现在文档中。要创建其它节点，只需要吧传递给该函数的字符串参数修改一些即可，例如document.createElement("DIV")。
首先，我们用到了var para = document.createElement("P");该语句创建了一个段落节点，但是它并不会马上出现在文档中。要创建其它节点，只需要吧传递给该函数的字符串参数修改一些即可，例如document.createElement("DIV")。
var text = document.createTextNode("要添加的文本");一句创建了一个文本节点。
para.appendChild(text);将text作为子结点添加到para这个段落节点上。很容易看出，appendChild的调用语法如下：父节点.appendChild.(子结点)。
最后一句test.appendChild(para);则将段落节点para添加到test这个div节点上，由于test节点原来就是文档的一部分，这一句会造成文档的更新，也就是我们会看到段落文字被添加到了div节点里。
---------------------------------------------
DOM简介总结
-------------------------------------------------
我们已经了解了基本的用法，就好像学会了基本的英语语法一样。小菜鸟个人认为剩下的工作有两项：
-------------------------------------------------
我们已经了解了基本的用法，就好像学会了基本的英语语法一样。小菜鸟个人认为剩下的工作有两项：
第一项就是背单词，那么哪里可以找到DOM的“单词表”呢？下面就会给出几个比较号的DOM参考。
第二项就是深入JavaScript，尽管DOM是语言无关的，但是事实上大多数情况下，DOM都是和JavaScript一起使用。
DOM“单词表”
下面的是一些比较号的DOM参考手册，希望对大家有利用价值。
第二项就是深入JavaScript，尽管DOM是语言无关的，但是事实上大多数情况下，DOM都是和JavaScript一起使用。
DOM“单词表”
下面的是一些比较号的DOM参考手册，希望对大家有利用价值。
W3Schools的中文版HTML DOM 参考手册
W3POP的HTML DOM参考
W3Schools的原版HTML DOM 参考手册
JSKIT的DOM参考(英文)
深入JavaScript
有了HTML DOM的基础，让我们一起学习JavaScript对象吧。
W3POP的HTML DOM参考
W3Schools的原版HTML DOM 参考手册
JSKIT的DOM参考(英文)
深入JavaScript
有了HTML DOM的基础，让我们一起学习JavaScript对象吧。
-------------------------------------------------
JavaScript对象笔记
-------------------------------------------------
var s = "我有7个个字符";
s.length
使用charAt方法返回指定位置的字符。
alert(str.charAt(0)) 结果:我
alert(str.charAt(0)) 结果:我
substring方法从字符串中截取一个子字符串。
alert(str.sbustring(0,2)) 结果:我有
alert(str.sbustring(0,2)) 结果:我有
indexOf返回字符串中指定字符或字符串的位置，如果字符不存在就返回-1。
alert(str.indexof('符'))
alert(str.indexof('符'))
lastIndexOf方法返回一个字符串中某字符最后一次出现的位置。
为了便于观察，字符串为"01234567890"。可以看到，字符0出现了两次。
为了便于观察，字符串为"01234567890"。可以看到，字符0出现了两次。
relpace方法,替换字符串
str.replace('12345','一二三四五')
str.replace('12345','一二三四五')
split方法
使用split方法可以将字符串分割为一个数组。例如，我们可以将一个英文句子按照空格分开为单词数组。下面我们创建两个字符串来说明split方法。
使用split方法可以将字符串分割为一个数组。例如，我们可以将一个英文句子按照空格分开为单词数组。下面我们创建两个字符串来说明split方法。
split方法有两个参数，第一个是分隔符。也就是按照什么来分割字符串，例如可以按照逗号“，”等等；第二个参数是可选的，控制保留分割段数。
<script type="text/javascript"> var str = "一二三四"; var str1 = "篮球、排球、乒乓球"; var arr = str.split("");//全部分割 var arr1 = str1.split("、");//按照顿号分割 var arr2 = str1.split("、",2);//按照顿号分割,保留两段</script>
用字符串的length实现限制文本框长度
本例使用JS字符串的length属性来限制一个文本框内文本的长度。大致思路如下：每当用户在文本框内输入值的时候（键盘敲击事件），都触发一个名为check的函数，它会获得文本框内字符的长度，并检查该长度是否在5-10之间。如果不是则给出对应的警告。且当输入字符多余10个的时候会自动去掉长出的部分。
实例JavaScript代码
<script type="text/javascript">function check(){ var str = document.getElementById("test").value; if(str.length < 5){ update("至少输入5个字符！"); }else if(str.length > 10){ update("不能超过10个字符！"); str = str.substring(0,10); document.getElementById("test").value = str.substring(0,10); }else{ update("有效的用户名。") }}function update(word){ document.getElementById("feedback").innerHTML = word;}</script>HTML代码
<p> <label for="test">帐号：</label> <input type="text" name="test" id="test" onkeypress="check()" maxlength="15" /> <span id="feedback"></span></p>
-------------------------------------------------
<script type="text/javascript">function check(){ var str = document.getElementById("test").value; if(str.length < 5){ update("至少输入5个字符！"); }else if(str.length > 10){ update("不能超过10个字符！"); str = str.substring(0,10); document.getElementById("test").value = str.substring(0,10); }else{ update("有效的用户名。") }}function update(word){ document.getElementById("feedback").innerHTML = word;}</script>HTML代码
<p> <label for="test">帐号：</label> <input type="text" name="test" id="test" onkeypress="check()" maxlength="15" /> <span id="feedback"></span></p>
-------------------------------------------------
JavaScript date对象
-------------------------------------------------
<script type="text/javascript"> var today = new Date();
//新建一个Date对象
var todayStr = today.toString(); //把日期转化为字符串
var todayLocal = today.toLocaleString(); //转换为本地字符串(按本地格式化)
var date = today.getDate(); //查询当月日期 得到X天
var day = today.getDay(); //查询当前星期几
var month = today.getMonth(); //查询月份 得到X月
var year = today.getFullYear();//查询年份 得到X年
</script>
-------------------------------------------------
<script type="text/javascript"> var today = new Date();
//新建一个Date对象
var todayStr = today.toString(); //把日期转化为字符串
var todayLocal = today.toLocaleString(); //转换为本地字符串(按本地格式化)
var date = today.getDate(); //查询当月日期 得到X天
var day = today.getDay(); //查询当前星期几
var month = today.getMonth(); //查询月份 得到X月
var year = today.getFullYear();//查询年份 得到X年
</script>
JavaScript Date对象应用实例――时钟代码
本代码转自w3schools.com。
本代码转自w3schools.com。
<script type="text/javascript">
function startTime(){var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();//当数字小于10的时候在前面加一个0
m=checkTime(m);
s=checkTime(s);
document.getElementById('clock').innerHTML=h+":"+m+":"+s;//每隔500毫秒重新执行一次
startTimet=setTimeout('startTime()',500);}
function checkTime(i){if (i<10) { i="0" + i; }return i;}
function startTime(){var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();//当数字小于10的时候在前面加一个0
m=checkTime(m);
s=checkTime(s);
document.getElementById('clock').innerHTML=h+":"+m+":"+s;//每隔500毫秒重新执行一次
startTimet=setTimeout('startTime()',500);}
function checkTime(i){if (i<10) { i="0" + i; }return i;}
</script>
9:54:53
时、分、秒
访问时分秒也是十分简单的，小时为getHours，分为getMinutes，秒为getSeconds，还有毫秒getMilliseconds。
today.getHours()
today.getminutes()
today.getSeconds()
today.getMilliseconds()
todaygetTimezoneOffset() //时差（分钟为单位）
today.getminutes()
today.getSeconds()
today.getMilliseconds()
todaygetTimezoneOffset() //时差（分钟为单位）
date对象设置（set）方法
设置Date对象的年、月、日等等属性。
只需要使用setDate就可以设置现在是本月的几号。setMonth设置月份，setFullYear是以四位的方式设置年份。setHours设置小时，setMinutes设置分钟，setSeconds设置秒，setMilliseconds则设置毫秒。
JavaScript代码
<script type="text/javascript"> var today = new Date(); //新建一个Date对象 today.setFullYear(1);
today.setMonth(1);
today.setHours(1);
today.setDate(1); t
oday.setMinutes(1);
today.setSeconds(1);
today.setMilliseconds(1);</script>
<script type="text/javascript"> var today = new Date(); //新建一个Date对象 today.setFullYear(1);
today.setMonth(1);
today.setHours(1);
today.setDate(1); t
oday.setMinutes(1);
today.setSeconds(1);
today.setMilliseconds(1);</script>
date对象转换（to）方法:
将Date对象转换为字符串
Date对象的toString方法可以把它转换为字符串，从而可以很方便地显示出来或者是做进一步的处理。点击下面的按钮就可以看到toString的结果了。
today.toString()
更有用的一个方法是toLocaleString，它将Date对象转换成符合本地习惯的字符串。
today.toLocaleString()
toDateString与toLocaleDateString则将Date对象转换为字符串之后只保留日期部分。相对的，toTimeString和toLocaleTimeString则保留时间（时、分、秒）部分。
源代码 (一般浏览器不支持)
toSource方法把Date对象转换为源代码的形式，个人感觉没什么用。
today.toSource()
JavaScript数组
-------------------------------------------------
创建一个JavaScript数组
<script type="text/javascript">
//笨方法
var arr = new Array("HTML","CSS","JavaScript","DOM");
//省事一点的方法
var arr = ["HTML","CSS","JavaScript","DOM"];
</script>
-------------------------------------------------
创建一个JavaScript数组
<script type="text/javascript">
//笨方法
var arr = new Array("HTML","CSS","JavaScript","DOM");
//省事一点的方法
var arr = ["HTML","CSS","JavaScript","DOM"];
</script>
与字符串对象一样，数组也有一个length属性，不过它的意思是数组包含元素的个数。点击下面的按钮可以看到arr的长度为4。
alert(arr.length)
数组join方法
数组对象的join方法可以把数组的几个元素连接成一个字符串。
arr.join()
数组concat方法
数组对象的concat方法可以把两个或者多个数组连接起来，组成一个新的数组。下面是一段使用了concat方法的JS代码。
JavaScript代码
<script type="text/javascript"> var arr = ["HTML","CSS","JavaScript","DOM"]; var arr2 = ["ASP.NET","PHP","J2EE","Python","Ruby"];
var arrNew = arr.concat(arr2);
var arr3 = ["1","2","3","4"];
var arrNewNew = arr.concat(arr2,arr3);</script>
数组对象的concat方法可以把两个或者多个数组连接起来，组成一个新的数组。下面是一段使用了concat方法的JS代码。
JavaScript代码
<script type="text/javascript"> var arr = ["HTML","CSS","JavaScript","DOM"]; var arr2 = ["ASP.NET","PHP","J2EE","Python","Ruby"];
var arrNew = arr.concat(arr2);
var arr3 = ["1","2","3","4"];
var arrNewNew = arr.concat(arr2,arr3);</script>
concat方法也可以接受多个参数。例如， var arrNewNew = arr.concat(arr2,arr3);这个语句将arr与arr2与arr3一起连接成一个新的数组，点击下面的按钮来查看这个新的数组。
arrNewNew
arrNewNew.length
arrNewNew.length
数组sort方法
数组对象的sort方法可以按照一定的顺序把数组元素重新排列起来。通常情况下，都是按照字幕顺序排列。
JavaScript代码
<script type="text/javascript">
var arr = ["HTML","CSS","JavaScript","DOM"];
var arr2 = [4,3,2,1];
var arr3 = [40,300,2000,10000];
</script>
<script type="text/javascript">
var arr = ["HTML","CSS","JavaScript","DOM"];
var arr2 = [4,3,2,1];
var arr3 = [40,300,2000,10000];
</script>
实例JavaScript数组代码
下面是一段简单的使用数组的JS代码，可以点击后面的按钮来观察各个变量的值。
<script type="text/javascript">
var arr = new Array("HTML","CSS","JavaScript","DOM");
var arr2 = new Array("ASP.NET","PHP","J2EE","Python","Ruby");
var joinArr = arr.join();
var bigArr = arr.concat(arr2);
var sortArr = bigArr.sort();
</script>
var arr = new Array("HTML","CSS","JavaScript","DOM");
var arr2 = new Array("ASP.NET","PHP","J2EE","Python","Ruby");
var joinArr = arr.join();
var bigArr = arr.concat(arr2);
var sortArr = bigArr.sort();
</script>
sort方法的参数
sort方法可以接受一个参数，这个参数的类型是函数，它也就是排序函数了。我们可以使用它来进行自定义的排序方式。例如，我们可以让上面的数字数组按照大小的方式排序。看下面的JS代码：
sort方法可以接受一个参数，这个参数的类型是函数，它也就是排序函数了。我们可以使用它来进行自定义的排序方式。例如，我们可以让上面的数字数组按照大小的方式排序。看下面的JS代码：
<script type="text/javascript"> var arr3 = [40,300,2000,10000]; function compare(a,b) {return a - b;}</script>arr3.sort(compare)
点击上面的按钮可以发现，当我们使用自定义的compare函数进行排序的时候，10000这个最大的数字已经顺利地排到最后了。从代码中我们可以观察出来，sort是根据排序函数的返回值是正还是负来排序的。
点击上面的按钮可以发现，当我们使用自定义的compare函数进行排序的时候，10000这个最大的数字已经顺利地排到最后了。从代码中我们可以观察出来，sort是根据排序函数的返回值是正还是负来排序的。
数组push与pop方法
数组对象的push与pop方法分别在数组的尾部添加与删除元素。push方法有一个参数，也就是要添加到数组尾部的元素，而pop方法则没有参数，而是返回从数组尾部删除的元素。见下面的JS代码。
数组对象的push与pop方法分别在数组的尾部添加与删除元素。push方法有一个参数，也就是要添加到数组尾部的元素，而pop方法则没有参数，而是返回从数组尾部删除的元素。见下面的JS代码。
JavaScript代码
<script type="text/javascript">
var arr = ["HTML","CSS","JavaScript","DOM"];
var arr2 = [1,2,3,4]; arr.push("PHP");
var popped = arr2.pop();
</script>
<script type="text/javascript">
var arr = ["HTML","CSS","JavaScript","DOM"];
var arr2 = [1,2,3,4]; arr.push("PHP");
var popped = arr2.pop();
</script>
数组shift与unshift方法
数组对象的unshift与shift方法分别在数组的头部添加和删除一个元素.
JavaScript代码
<script type="text/javascript">
var arr = ["HTML","CSS","JavaScript","DOM"];
var arr2 = [1,2,3,4]; arr.unshift("PHP");
var shifted = arr2.shift();
</script>
数组对象的unshift与shift方法分别在数组的头部添加和删除一个元素.
JavaScript代码
<script type="text/javascript">
var arr = ["HTML","CSS","JavaScript","DOM"];
var arr2 = [1,2,3,4]; arr.unshift("PHP");
var shifted = arr2.shift();
</script>
数组slice方法
数组对象的slice方法从数组中分离出一个子数组，功能类似于字符串对象的substring方法。为了演示方便，我们创建一个值为[0,1,2,3,4,5,6,7,8,9,0]的数组。这样就形成了位置和值的对应，即，arr[0]的值恰好为0。
点击下面的按钮进行测试，可以发现，slice(0,3)会返回[0,1,2]，也就是说，只返回位置0、1和2，而不包括3。由此我们可以知道，传递给slice的两个参数分别为，起始字符的位置，结束字符的位置+1。
与字符串的substring方法类似，数组的slice方法也可以省略第二个参数，表示一直到数组结束。见下面的实例。
arr.slice(3)
arr.slice(3)表示从数组的第三个元素开始，一直到数组结尾的子数组。我们可以推测，arr.slice(0)将会返回数组本身。可以点击下面的按钮验证。
arr.slice(3)表示从数组的第三个元素开始，一直到数组结尾的子数组。我们可以推测，arr.slice(0)将会返回数组本身。可以点击下面的按钮验证。
arr.slice(0)
-------------------------------------------------
JavaScript 数学对象
-------------------------------------------------
JavaScript中有专门处理数学问题的Math对象。
实例JavaScript Math代码
<script type="text/javascript"> var num = Math.PI; var rNum = Math.round(num);//四舍五入</script>我们首先吧Math.PI的值保存在num中，这是一个JS内置的常量，可以点击下面的按钮来查看它的值。
-------------------------------------------------
JavaScript中有专门处理数学问题的Math对象。
实例JavaScript Math代码
<script type="text/javascript"> var num = Math.PI; var rNum = Math.round(num);//四舍五入</script>我们首先吧Math.PI的值保存在num中，这是一个JS内置的常量，可以点击下面的按钮来查看它的值。
alert(num)
rNum则是num经过四舍五入的值。
rNum则是num经过四舍五入的值。
alert(rNum)
random方法则产生一个0-1之间的随机值。试着多点击几次下面的按钮，可以发现得到的数字会不断改变。
random方法则产生一个0-1之间的随机值。试着多点击几次下面的按钮，可以发现得到的数字会不断改变。
alert(Math.random())
JavaScript的Math对象计算器
[url]http://www.cainiao8.com/web/js_examples/09_math_jisuqnqi.html[/url]
-------------------------------------------------
用javascript修改html元素的class
-------------------------------------------------
实例JavaScript代码
需要注意的是在JavaScript中，如果要修改一个元素的class属性，一定要写为className，因为class是JavaScript的保留字。
-------------------------------------------------
实例JavaScript代码
需要注意的是在JavaScript中，如果要修改一个元素的class属性，一定要写为className，因为class是JavaScript的保留字。
<script type="text/javascript">
function over(){
var para = document.getElementById("testPara").className = "testOver"; } function out(){ var para = document.getElementById("testPara").className = "testNormal"; } </script>
function over(){
var para = document.getElementById("testPara").className = "testOver"; } function out(){ var para = document.getElementById("testPara").className = "testNormal"; } </script>
HTML代码
本例只需要一个段落，并且给它设置了默认的class属性“testNormal”，而鼠标划过和划出会分别触发上面的两个JavaScript函数，从而改变该段落自身的class属性。
本例只需要一个段落，并且给它设置了默认的class属性“testNormal”，而鼠标划过和划出会分别触发上面的两个JavaScript函数，从而改变该段落自身的class属性。
<p id="testPara" class="testNormal" 我是示例段落，鼠标滑过我，就可以改变我的class属性，从而改变应用的CSS规则。 </p>
CSS
CSS代码设置了两个测试用的样式。
CSS代码设置了两个测试用的样式。
.testNormal { border:1px solid black; }.testOver { background:#999999; border:1px solid black; font-weight:bold; padding:3em; }
-------------------------------------------------
JavaScript重定向
-------------------------------------------------
使用JavaScript可以将用户导向一个特定的地址，并且不同的方法会对浏览器的历史记录有不同的影响。
实例JavaScript代码
本例定义了两个JavaScript函数，功能都是重定向到首页，但是第一个函数采用的是直接给href赋值的方式，第二个使用的是replace方法。具体请看下面的代码：
本例定义了两个JavaScript函数，功能都是重定向到首页，但是第一个函数采用的是直接给href赋值的方式，第二个使用的是replace方法。具体请看下面的代码：
<script type="text/javascript"> function goBack(){ location.href = " [url]http://www.cainiao8.com/[/url]"; } function goBackRep(){ location.replace(" [url]http://www.cainiao8.com/[/url]"); }</script>
HTML代码
<p> 点击后面的按钮就可以使得页面转向首页， 可以点击浏览器的后退按钮返回本页。 使用的方法是直接给location.href赋值。</p><button return false;" value="重定向到首页"> 重定向到首页</button><p> 点击后面的按钮就同样会跳转到首页，但是 由于是使用location.replace的方法，所以不能 通过浏览器的后退按钮返回本页。</p><button return false;" value="重定向到首页(不能返回)" >
<p> 点击后面的按钮就可以使得页面转向首页， 可以点击浏览器的后退按钮返回本页。 使用的方法是直接给location.href赋值。</p><button return false;" value="重定向到首页"> 重定向到首页</button><p> 点击后面的按钮就同样会跳转到首页，但是 由于是使用location.replace的方法，所以不能 通过浏览器的后退按钮返回本页。</p><button return false;" value="重定向到首页(不能返回)" >
-------------------------------------------------
JavaScript对象当作关联数组
-------------------------------------------------
JavaScript的对象不仅仅可以使用“.propertyName” 来访问对象的属性，也可以使用“[propertyName]”来访问对象的属性。
实例JavaScript代码
使用关联数组的方法访问对象的属性比使用传统的点“.propertyName”要灵活得多。因为我们可以在[]里填入一个变量，而不是必须事先制定好要访问的属性名。例如下面的这段代码中，我们通过select元素的name属性来设置具体要访问style的哪个属性（本例中为背景色），这样，这个函数就可以用来设置不同的CSS属性了。
-------------------------------------------------
JavaScript的对象不仅仅可以使用“.propertyName” 来访问对象的属性，也可以使用“[propertyName]”来访问对象的属性。
实例JavaScript代码
使用关联数组的方法访问对象的属性比使用传统的点“.propertyName”要灵活得多。因为我们可以在[]里填入一个变量，而不是必须事先制定好要访问的属性名。例如下面的这段代码中，我们通过select元素的name属性来设置具体要访问style的哪个属性（本例中为背景色），这样，这个函数就可以用来设置不同的CSS属性了。
<script type="text/javascript">var d = document.getElementById("content");function setProperty(){ var sel = document.getElementById("selectColor"); var propertyValue = sel.options[sel.selectedIndex].value; var propertyName = document.getElementById("selectColor").name; d.style[propertyName] = propertyValue;}</script>HTML代码
本例的HTML代码比较简单，一个select元素用来罗列出来可选的背景色。而按钮则负责触发事件，调用函数。
本例的HTML代码比较简单，一个select元素用来罗列出来可选的背景色。而按钮则负责触发事件，调用函数。
<select id="selectColor" name="backgroundColor"> <option value="aqua">aqua</option> <option value="black">black</option> <option value="blue">blue</option> <option value="fuchsia">fuchsia</option> <option value="gray">gray</option> <option value="green">green</option> <option value="lime">lime</option> <option value="maroon">maroon</option> <option value="navy">navy</option> <option value="olive">olive</option> <option value="purple">purple</option> <option value="red">red</option> <option value="silver">silver</option> <option value="teal">teal</option> <option value="white">white</option> <option value="yellow">yellow</option></select> <button return false;">设置背景颜色</button>效果
选择颜色后点击按钮“设置背景颜色”。
选择颜色后点击按钮“设置背景颜色”。
本节的代码是我从CSS背景实验1里直接复制过来修改的，按照传统的对象属性访问方式，每设置一个样式属性都需要一个单独的函数，但是这种方法使得一个函数可以在修改之后适用于多个CSS属性。本方法来自《PPK谈JavaScript》一书。而且该方法同样适用于对象的方法。例如：obj.method与obj['method']()是一样的。
-------------------------------------------------