JS基本

作者: wq04200 | 来源:发表于2017-01-13 11:02 被阅读44次

变量命名、声明、赋值

1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。
2.变量名区分大小写，如:A与a是两个不同变量。
3.不允许使用JavaScript关键字和保留字做变量名。

529c07c000014f5103080447.jpg

声明变量语法: var 变量名;
Var还可以一次声明多个变量，变量之间用","逗号隔开。注意:变量也可以不声明，直接使用，但为了规范，需要先声明，后使用。

我们使用"="号给变量存储内容，可以把任何东西存储在变量里，如数值、字符串、布尔值等，例如：

var num1 = 123;  // 123是数值
var num2 = "一二三"; //"一二三"是字符串
var num3=true; //布尔值true（真），false(假)

表达式：

表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量。

52b9227d0001acc703000174.jpg

529c21600001d02302800228.jpg

52b922a00001445b02920187.jpg

529c218f000101d402980228.jpg

操作符

算术操作符(+、-、*、/等)，比较操作符(<、>、>=、<=等)，逻辑操作符(&&、||、！)。算术运算符主要用来完成类似加减乘除的工作，在JavaScript中，“+”不只代表加法，还可以连接两个字符串

自加一，自减一 ( ++和- -)

比较操作符，看看下面例子:

var a = 5;//定义a变量，赋值为5
var b = 9; //定义b变量，赋值为9
document.write (a<b); //a小于b的值吗? 结果是真(true)
document.write (a>=b); //a大于或等于b的值吗? 结果是假(false)
document.write (a!=b); //a不等于b的值吗? 结果是真(true)
document.write (a==b); //a等于b的值吗? 结果是假(false)

与或非操作符：“&&” “||” “！”

操作符之间的优先级（高到低）:
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

数组

创建数组语法：
var myarray=new Array();

52ca004b0001c81103980228.jpg
我们创建数组的同时，还可以为数组指定长度，长度可任意指定。
var myarray= new Array(8); //创建数组，存储8个数据。

注意：

1.创建的新数组是空数组，没有值，如输出，则显示undefined。
2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。

赋值：

第一步：创建数组var myarr=new Array(); 
第二步：给数组赋值
        myarr[1]=" 张三";
        myarr[2]=" 李四";

注意：数组每个值有一个索引号，从0开始。

其他方法：
一、var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
二、var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
注意：数组存储的数据可以是任何类型（数字、字符、布尔值等）

只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素。
myarray[5]=88; //使用一个新索引，为数组增加一个新元素
数组中的每个值有一个索引号，从0开始,可按需取出：第一个人的成绩表示方法：myarray[0]

数组属性
语法：
myarray.length; //获得数组myarray的长度

var arr=[55,32,5,90,60,98,76,54];//包含8个数值的数组arr 
document.write(arr.length); //显示数组长度8

JavaScript数组的length属性是可变的，这一点需要特别注意。

arr.length=10; //增大数组的长度
document.write(arr.length); //数组长度已经变为10

数组随元素的增加，长度也会改变，如下:

var arr=[98,76,54,56,76]; // 包含5个数值的数组
document.write(arr.length); //显示数组的长度5
arr[15]=34; //增加元素，使用索引为15,赋值为34
alert(arr.length); //显示数组的长度16

二维数组
一维数组的表示: myarray[ ]
二维数组的表示: myarray[ ][ ]
1. 二维数组的定义方法一

var myarr=new Array();  //先声明一维 
for(var i=0;i<2;i++){   //一维长度为2
   myarr[i]=new Array();  //再声明二维 
   for(var j=0;j<3;j++){   //二维长度为3
   myarr[i][j]=i+j;   // 赋值，每个数组元素的值为i+j
   }
 }

二维数组的定义方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
3. 赋值
myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。
说明: myarr[0][1] ,0 表示表的行，1表示表的列。

流程控制语句

1、if语句：

var mypen = "black"; //定义变量mypen，存储笔的黑色。
 if(mypen == "black")
{
document.write("笔是黑色的，所以购买");
}

2、if..else.. if..else if..else..
3、swtch:

var myweek =6;//myweek表示星期几变量
switch(myweek)
{
 case 1:
 document.write("学习理念知识");
 break;
 case 3:
 document.write("到企业实践");
 break;
 default:
 document.write("周六、日休息和娱乐");
}

4、for循环
5、while循环（和for循环有相同功能的还有while循环, while循环重复执行一段代码，直到某个条件不再满足。）

while(判断条件)
{
    循环语句
 }

6、Do...while循环（do while结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。）

   var mynum =6;//mynum初值化数值为6
    do
    {
    document.write("数字:"+mynum+"<br/>");
    mynum--;
    }
    while( mynum >=0     )

7、退出循环break

for(初始条件;判断条件;循环后条件值更新)
{
  if(特殊情况)
  {break;}
  循环代码
}

8、继续循环continue(continue的作用是仅仅跳过本次循环，而整个循环体继续执行。)

for(初始条件;判断条件;循环后条件值更新)
{
  if(特殊情况)
  { continue; }
 循环代码
}

函数

（函数的作用，可以写一次代码，然后反复地重用这个代码。）

function  函数名( )
{
     函数体;
}
//function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换
为完成特定功能的代码。再合适的地方调用即可 *函数名()*

函数调用

第一种情况:在<script>标签内调用。

 <script type="text/javascript">
    function add2()
    {
         sum = 1 + 1;
         alert(sum);
    }
  add2();//调用函数，直接写函数名。
</SCRIPT>

第二种情况:在HTML文件中调用，如通过点击按钮后调用定义好的函数。

html>
<head>
<script type="text/javascript">
   function add2()
   {
         sum = 5 + 6;
         alert(sum);
   }
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()">  //按钮,onclick点击事件，直接写函数名
</form>
</body>
</html>

有参数的函数

//注意:参数可以多个，根据需要增减参数个数。参数之间用(逗号，）隔开。
function 函数名(参数1,参数2)
{
     函数代码
}

按照这个格式，函数实现任意两个数的和应该写成：

function add2(x,y)
{
   sum = x + y;
   document.write(sum);
}//x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数
//把两个实际的加数传递给函数了。

返回值的函数

我们只要把"document.write(sum)"这行改成如下代码：

function add2(x,y)
{
   sum = x + y;
   return sum; //返回函数值,return后面的值叫做返回值。
}

还可以通过变量存储调用函数的返回值，代码如下:

result = add2(3,4);//语句执行后,result变量中的值为7。

注意:函数中参数和返回值不只是数字，还可以是字符串等其它类型。

事件

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

53e198540001b66404860353.jpg

鼠标单击事件( onclick ）

 <form>
      <input name="button" type="button" value="点击提交" onclick="add2()" />
   </form>

注意: 在网页中，如使用事件，就在该元素中设置事件属性。

鼠标经过事件（onmouseover）

当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

<input name="password" type="password" onmouseover = "message()"/>

鼠标移开事件（onmouseout）

鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

<a href="http://www.imooc.com" onmouseout = "message()">点击我 </a>

光标聚焦事件（onfocus）

当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。如将光标移到文本框内时，即焦点在文本框内，触发onfocus 事件，并调用函数message()。

<input name="password" type="password" onfocus = "message()"/>

失焦事件（onblur）

onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。如网页中有用户和密码两个文本框。当前光标在用户文本框内时（即焦点在文本框），在光标离开该文本框后（即失焦时），触发onblur事件，并调用函数message()。

<input name="username" type="text" value="请输入用户名！" onblur = "message()" >

内容选中事件（onselect）

选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

<textarea name="summary" cols="60" rows="5" onselect = "message()">请写入个人简介，不少于200字！</textarea>

文本框内容改变事件（onchange）

通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

<textarea name="summary" cols="60" rows="5" onchange ="message()">请写入个人简介，不少于200字！</textarea>

加载事件（onload）

事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：

加载页面时，触发onload事件，事件写在<body>标签内。
此节的加载页面，可理解为打开一个新页面时。
如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。

<script type="text/javascript">
  function message(){
    alert("加载中，请稍等…"); }
</script>    
</head>
<body onload = "message()">
  欢迎学习JavaScript。
</body>

卸载事件（onunload）

卸载事件（onunload）
当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。注意：不同浏览器对onunload事件支持不同。

JS内置对象

JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。
对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；
JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义。

访问对象属性的语法:

objectName.propertyName

访问对象的方法：

objectName.methodName()
如使用string 对象的 toUpperCase() 方法来将文本转换为大写：

var mystr="Hello world!";//创建一个字符串
var request=mystr.toUpperCase(); //使用字符串对象方法

Date 日期对象

定义一个时间对象 :

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日

我们最好使用下面介绍的“方法”来严格定义时间。
访问方法语法：“<日期对象>.<方法>”
Date对象中处理时间和日期的常用方法：

555c650d0001ae7b04180297.jpg

返回/设置年份方法
get/setFullYear() 返回/设置年份，用四位数表示。
mydate.getMonth()、mydate.getDay()、mydate.getHours()、mydate.getMinutes()、mydate.getSeconds()//依次为月到秒

var mydate=new Date();//当前时间
document.write(mydate+"<br>");//输出当前时间
document.write(mydate.getFullYear()+"<br>");//输出当前年份
mydate.setFullYear(81); //设置年份
document.write(mydate+"<br>"); //输出年份被设定为 0081年。
//结果：
Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:57:47 GMT+0800

注意:
1、结果格式依次为：星期、月、日、年、时、分、秒、时区。(火狐浏览器)
2、不同浏览器，时间格式有差异。

返回星期方法
getDay() 返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”，通过数组完成

  var mydate=new Date();
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  document.write("今天是：" + weekday[mydate.getDay()]);

返回/设置时间方法
get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。
使用getTime()和setTime()方法，将时间推后2小时:

  var mydate=new Date();
  document.write("当前时间："+mydate+"<br>");
  mydate.setTime( mydate.getTime()  + 2* 60 * 60 * 1000);
  document.write("推迟二小时时间：" + mydate);

String 字符串对象
定义字符串的方法就是直接赋值。比如：var mystr = "I love JavaScript!"

访问字符串对象的属性length:
stringObject.length; 返回该字符串的长度。
访问字符串对象的方法：如：小写转大写

var mystr="Hello world!";
var mynum=mystr.toUpperCase();

以上代码执行后，mynum 的值是：HELLO WORLD!

返回指定位置的字符
charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
stringObject.charAt(index)
注意:如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。

返回指定的字符串首次出现的位置
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
stringObject.indexOf(substring, startpos)

53853d4200019feb04920149.jpg

说明：
1.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。
2.可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。
3.如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
注意：
1.indexOf() 方法区分大小写。
2.如果要检索的字符串值没有出现，则该方法返回 -1。

如：使用indexOf()方法，检索第二个字符ｏ出现的位置

  var mystr="Hello World!"
  document.write(mystr.indexOf("o",mystr.indexOf("o")+1));
//先取第一个索引，+1后可查询第二个

字符串分割split()
split() 方法将字符串分割为字符串数组，并返回此数组。
stringObject.split(separator,limit)

532bee4800014c0404230108.jpg

注意：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

var mystr = "www.imooc.com";
document.write(mystr.split("")+"<br>");
document.write(mystr.split("", 5));

结果：
w,w,w,.,i,m,o,o,c,.,c,o,m
w,w,w,.,i

提取字符串substring()
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
stringObject.substring(startPos,stopPos)
参数说明:

注意：

返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
如：

<script type="text/javascript">
  var mystr="I love JavaScript";
  document.write(mystr.substring(7));
  document.write(mystr.substring(2,6));
</script>
运行结果:
JavaScript
love

提取指定数目的字符substr()
substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。
stringObject.substr(startPos,length)

注意：
1、如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
2、如果startPos为负数且绝对值大于字符串长度，startPos为0。
代码如下：

<script type="text/javascript">
  var mystr="I love JavaScript!";
  document.write(mystr.substr(7));
  document.write(mystr.substr(2,4));
</script>
运行结果：
JavaScript!
love

Math对象

Math对象，提供对数据的数学计算。
使用 Math 的属性和方法，代码如下：

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

运行结果:
3.141592653589793
15

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

Math 对象属性:

532fe7cf0001e7b505170269.jpg

Math 对象方法:

532fe841000174db05160622.jpg

** 向上取整ceil()**
ceil() 方法可对一个数进行向上取整。
语法:Math.ceil(x)
注意：它返回的是大于或等于x，并且与x最接近的整数。
如：document.write(Math.ceil(0.624)) 输出1

向下取整floor()
floor() 方法可对一个数进行向下取整。
语法:Math.floor(x)
如：alert(Math.floor(-5.214)) 运行结果-6

四舍五入round()
round() 方法可把一个数字四舍五入为最接近的整数。
语法:Math.round(x)
如：alert(Math.round(-5.34)) 输出-5

随机数 random()
random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。
语法：Math.random();
注意：返回一个大于或等于 0 但小于 1 的符号为正的数字值。

获得0 ~ 10之间的随机数，代码如下:
<script type="text/javascript">
  document.write((Math.random())*10);
</script>
运行结果：
8.72153625893887

Array 数组对象

数组定义的方法：

定义了一个空数组:
var 数组名= new Array();
定义时指定有n个空元素的数组：
var 数组名 =new Array(n);
3.定义数组的时候，直接初始化数据：
var 数组名 = [<元素1>, <元素2>, <元素3>...];

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

数组方法：

533295ab0001dead05190599.jpg

数组连接concat()
concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
语法arrayObject.concat(array1,array2,...,arrayN)
注意: 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
如：

<script type="text/javascript">
  var mya = new Array(3);
  mya[0] = "1";
  mya[1] = "2";
  mya[2] = "3";
  document.write(mya.concat(4,5)+"<br>");
  document.write(mya); 
</script>
运行结果：
1,2,3,4,5
1,2,3

** 指定分隔符连接数组元素join()**
join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
语法：arrayObject.join(分隔符)
注意：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。我们使用join（）方法，将数组的所有元素放入一个字符串中，代码如下：

<script type="text/javascript">
  var myarr = new Array(3);
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join());
document.write(myarr.join("="));
</script>
运行结果：
I,love,JavaScript
I=love=JavaScript

颠倒数组元素顺序reverse()
reverse() 方法用于颠倒数组中元素的顺序。
语法：arrayObject.reverse()
注意：该方法会改变原来的数组，而不会创建新的数组。
使用reverse()方法,将数组myarr1顺序颠倒:

 var myarr1= ["我","爱","你"];
 document.write(myarr1.reverse());
//输出
你，爱，我

选定元素slice()
slice() 方法可从已有的数组中返回选定的元素。
语法arrayObject.slice(start,end)

533299680001637b05160145.jpg
1/返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
2/该方法并不会修改数组，而是返回一个子数组。

注意：
1／可使用负值从数组的尾部选取元素。
2／如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
3／String.slice() 与 Array.slice() 相似。

<script type="text/javascript">
  var myarr = new Array(1,2,3,4,5,6);
  document.write(myarr + "<br>");
  document.write(myarr.slice(2,4) + "<br>");
  document.write(myarr);
</script>
运行结果：
1,2,3,4,5,6
3,4
1,2,3,4,5,6

数组排序sort()
sort()方法使数组中的元素按照一定的顺序排列。
语法:arrayObject.sort(方法函数)
1.如果不指定<方法函数>，则按unicode码顺序排列。
2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。
myArray.sort(sortMethod);

注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
/若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
/若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
/若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。

使用sort()方法，进行数组降序列排列

 function sortNum(a,b) {
       return b-a;
   }
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr.sort(sortNum)  );

//输出
100,80,50,16,6,1

练习

输出日期，并计算学生总分和平均分

 //通过javascript的日期对象来得到当前的日期，并输出。
  var dateNow = new Date();
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  document.write(dateNow.getFullYear()+"年"+dateNow.getMonth()+1+"月"+dateNow.getDate()+"日"+"  "+weekday[dateNow.getDay()]+ "<br/>");
  
  //成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
  var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
 var arr = scoreStr.split(";");//把字符串通过";"拆分为数组

  //从数组中将成绩撮出来，然后求和取整，并输出。
  var num = 0 ;
  for(var b = 0; b < arr.length;b++){
      var str = arr[b];
      var a = parseInt(str.substring(str.indexOf(":")+1));
      //先通过indexOf取索引，再通过substring截取所需字符串
      num = num + a;
  }
document.write("总分为："+num+"<br/>"+"分");
document.write("班级平均分为："+Math.floor(num/arr.length));

输出为：

DOM

DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
下面代码:

5375ca640001c67307860420.jpg

将HTML代码分解为DOM节点层次图:

5375ca7e0001dd8d04830279.jpg

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

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

节点属性:

5375c953000117ee05240129.jpg

遍历节点树:

53f17a6400017d2905230219.jpg

以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

538d29da000152db05360278.jpg
注意:前两个是document方法。

getElementsByName()方法

返回带有指定名称的节点对象的集合。
语法：
document.getElementsByName(name)
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

注意:

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

getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
document.getElementsByTagName(Tagname)
说明:

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

<script type="text/javascript">
         function getValue()
          {
              var myH = document.getElementById("myHead");
              alert(myH.innerHTML)
          }
          function getElements()
          {
             var myS = document.getElementsByName("sex");
              alert(myS.length);
          }

          function getTagElements()
          {
              var myI = document.getElementsByTagName("input");
              alert(myI.length);
          }

区别

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

5405263300018bcf05760129.jpg

getAttribute()方法

通过 元素节点 的属性名称获取属性的值。
语法：
elementNode.getAttribute(name)
说明:

elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
name：要想查询的元素节点的属性名字
看看下面的代码，获取h1标签的属性值：

538d242700019ec809330432.jpg

setAttribute()方法

setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：
elementNode.setAttribute(name,value)
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过 元素节点 对象调用的函数。

节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：
一. nodeName : 节点的名称（只读）

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

二. nodeValue ：节点的值

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

三. nodeType ：节点的类型（只读）
元素类型节点类型
元素 ====== 1
属性 ====== 2
文本 ====== 3
注释 ====== 8
文档 ====== 9

访问子节点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：
elementNode.childNodes
注意：
1、如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
2、根据浏览器不同 IE上节点之间的空白符不算节点，其他浏览器算文本节点

<div>
  javascript  
  <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>
<script type="text/javascript">
 var tx = document.getElementsByTagName("div")[0].childNodes;
 for (var i = 0;i<tx.length;i++)
 {
     document.write("第"+(i+1)+"个节点属性是"+tx[i].nodeType+"<br/>");
 }

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

一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
注意: 上一节中，我们知道Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。 (以后章节讲解)

<div id="con"><p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5></div> 
<script type="text/javascript">
  var x=document.getElementById("con");
 document.write(x.firstChild.nodeName+" "+x.firstChild.nodeValue+" "+x.firstChild.nodeType+"<br/>");
 document.write(x.lastChild.nodeName+" "+x.firstChild.nodeValue+" "+x.firstChild.nodeType);

访问父节点parentNode

获取指定节点的父节点
语法：
elementNode.parentNode
注意:父节点只能有一个。
例子,获取 P 节点的父节点，代码如下:

<div id="text">
  <p id="con"> parentNode 获取指点节点的父节点</p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>

运行结果:

parentNode 获取指点节点的父节点
DIV

访问祖节点:
elementNode.parentNode.parentNode

访问兄弟节点

nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：
nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。
previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）
语法：
nodeObject.previousSibling
说明：如果无此节点，则该属性返回 null。

注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
解决问题方法:
判断节点nodeType是否为1, 如是为元素节点，跳过。

5386e3c80001c25607010856.jpg

运行结果:

LI = javascript
nextsibling: LI = jquery

插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:
appendChild(newnode)
参数:
newnode：指定追加的节点。

<ul id="test">
  <li>JavaScript</li>
  <li>HTML</li>
</ul> 
 
<script type="text/javascript">
  var otest = document.getElementById("test");  
  var newNode = document.createElement("li");
  newNode.innerHTML = "PHP";
  otest.appendChild(newNode);       
</script>

运行结果:

HTML
JavaScript
PHP

插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:
insertBefore(newnode,node);
参数:
newnode: 要插入的新节点。
node: 指定此节点前插入节点。

<ul id="test"><li>JavaScript</li><li>HTML</li></ul> 
<script type="text/javascript">
  var otest = document.getElementById("test");  
  var onode = document.createElement("li");
  onode.innerHTML = "PHP";
  otest.insertBefore(onode,otest.childNodes[0]);
</script>

输出：

PHP
JavaScript
HTML

删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法:
nodeObject.removeChild(node)
参数:
node ：必需，指定需要删除的节点。

5399744d000153a306060342.jpg

运行结果:

HTML
删除节点的内容: javascript

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

539975a800017c8e04790082.jpg

替换元素节点replaceChild()

replaceChild 实现 子节点(对象) 的替换。返回被替换对象的引用。
语法：
node.replaceChild (newnode,oldnew )
参数：
newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。

539557d70001c3ee07190429.jpg

效果: 将文档中的 Java 改为 JavaScript。
注意:

当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
newnode 必须先被建立。

创建元素节点createElement

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

var main = document.body;
//创建链接
function createa(url,text)
{
   var a = document.createElement("a");
   a.href=url;
   a.innerHTML = text;
   //a.style.color = "red";
   main.appendChild(a);
}
// 调用函数创建链接
 createa("http://www.imooc.com","慕课");

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

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

创建文本节点createTextNode

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

.message{    
    width:200px;
    height:100px;
    background-color:#CCC;}
    
</style>
</head>
<body>
<script type="text/javascript">
var element=document.createElement("p");
element.className="message";
var newnode=document.createTextNode("I love Javascript!");
document.body.appendChild(element);
element.appendChild(newnode)
</script>

浏览器窗口可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于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和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和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
一、值
offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

JS基本

变量命名、声明、赋值

表达式：

操作符

数组

流程控制语句

函数

函数调用

有参数的函数

返回值的函数

事件

鼠标单击事件( onclick ）

鼠标经过事件（onmouseover）

鼠标移开事件（onmouseout）

光标聚焦事件（onfocus）

失焦事件（onblur）

内容选中事件（onselect）

文本框内容改变事件（onchange）

加载事件（onload）

卸载事件（onunload）

JS内置对象

Date 日期对象

Math对象

Array 数组对象

练习

DOM

getElementsByName()方法

getElementsByTagName()方法

区别

getAttribute()方法

setAttribute()方法

节点属性

访问子节点childNodes

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

访问父节点parentNode

访问兄弟节点

插入节点appendChild()

插入节点insertBefore()

删除节点removeChild()

替换元素节点replaceChild()

创建元素节点createElement

创建文本节点createTextNode

浏览器窗口可视区域大小

网页尺寸

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读