Java前端学习（一）JavaScript脚本语言基础

君知燕云归

已于 2022-05-17 16:40:03 修改

阅读量907

点赞数 1

分类专栏： Java一点通文章标签： javascript 前端 java

于 2022-05-10 20:11:18 首次发布

本文链接：https://blog.csdn.net/weixin_51760209/article/details/124243143

版权

Java一点通专栏收录该内容

8 篇文章 30 订阅

订阅专栏

前言

本章主要介绍了JavaScript相关的知识和应用，篇幅较长但干货满满，内容较为基础，适合初学者以及想要复习的家人们，希望本篇能帮助到你，我们的未来前程似锦。

一、JavaScript简介

1.应用

客户端应用
可以将客户端的JavaScript脚本程序嵌入或链接到HTML文件。
服务器端应用
JavaScript可以用来开发服务器端的Web应用程序。当用户通过浏览器请求URL时，服务器执行JavaScript脚本程序，将生成的数据以HTML格式返回浏览器。

2.特点

（1）脚本编程语言：与HTML代码结合在一起，通常由浏览器解释执行。
（2）嵌套在HTML中：通常位于标签之间。
（3）弱数据类型：JS定义变量时无需指定该变量类型，在使用时随其值的改变而改变。
（4）基于对象的语言： JavaScript的许多功能来自于脚本环境中对象的方法与脚本的相互作用。
（5）安全性：在HTML页面中JavaScript不能访问本地硬盘，也不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。
（6）跨平台：在HTML页面中JavaScript的执行环境依赖于浏览器本身，只要安装了支持JavaScript的浏览器， JavaScript程序就可以执行。
（7）基于事件：事件驱动是指在页面中执行某种操作时所产生的动作。

3.示例

在HTML中嵌入JavaScript：
在HTML中通过<script>… </script >引入JavaScript代码。当浏览器读取到<script >标记时，解释执行其中的脚本。在使用< script >标记时，需通过Language属性指定<script >块中包含的是何种类型的脚本。<script>标签既可以位于<head>内，也可以位于<body>内。

//js文件也可以作为外部文件。html文件如下：
<html>
        <head>
	<title>嵌入JavaScript代码</title><!-- 定义页面标题 -->
        </head>
        <body>
	<script type="text/javascript" src="1.js"></script>
        </body>
</html>
//js文件如下：
document.write("Hello World!");   //在页面上显示一行文字

4.补充

1、内嵌形式，<script>标签可以位于<head>标签内，又可以位于<body>标签内。代码由上向下执行，最好把<script>写在<body>框架的最后，以保证框架加载全。
2、外部形式，<script type= “text/javascript” src=“***.js”><\script>。注意，此时在script中间不要再写代码，写了也无效。
3、变量相关注意点：（1）只声明，不赋值：返回undefined未定义。（2）不声明，不赋值：报错。（3）不声明，仅赋值：默认为全局变量（不提倡）。

二、语法基础

1.数据类型

字母要严格区分大小写。

常量
数值型(整数、浮点数)
字符串
布尔型
空值null
……
变量
使用关键字“var”声明变量。如 var name ;
变量分为全局变量和局部变量，全局变量定义在函数体之外，局部变量定义在函数体之内，只对该函数可见。
标识符
标识符的命名规则与Java基本相同（开头为字母、_或$）。

2.表达式和运算符

表达式
算术表达式、字符串表达式、赋值表达式、布尔表达式等。
运算符
算术运算符：+、-、*、/、%（取余数）、++、–
关系运算符：<、<=、>、>=、= =、!=
逻辑运算符：&、|、^、!
字符串运算符：+（连接）
赋值运算符：=
条件运算符：condition? true_result:false_ result

PS:
（1）数值比较，是比较其大小。
（2）字符比较，是比较ASCII码值的大小。
（3）汉字比较，是比较其Unicode编码值的大小（可以通过charCodeAt()获取编码值）。
（4）==和!=只比较值不比较类型，三个等于号既比较值又比较类型。

3.流程控制语句

分支结构：if语句；switch语句
循环结构：for语句；while语句；do while语句；break语句

分支语句：

<html>
    <head>
        <title>你喜欢什么颜色？</title>
        <script language="JavaScript">
	var color = prompt("您喜欢哪种颜色，red还是blue？","");
	var adjective;
	var fontcolor;
	if (color == "red") {
		adjective = "活泼吧。";
		fontcolor="red";
	} else if (color == "blue") {
		adjective = "酷吧。";
		fontcolor="blue";
	} else {
		adjective = "困惑吧。";
		fontcolor="others";
	}
	var sentence = "您喜欢" + fontcolor + "？ 您很" + adjective;
        </script>
    </head>
    <body>
        <script language="JavaScript">
	document.writeln(sentence);
        </script> 
    </body>
</html>

循环语句：

<html>
    <head>
        <title>无标题文档</title>
        <script language="JavaScript">
	var width = prompt("想显示几个x呀?");//获取表单信息传给width
	var a_line="";
	var loop;
	for(loop=0;loop < width;loop++){
	 	a_line = a_line + "爱你们吆" + "　";
	}
        </script>
    </head>
    <body>
        <script language="JavaScript">
	     document.write (a_line);
        </script> 
    </body>
</html>

4.函数

函数：可以封装在那些在程序中可能要多次用到的模块，也可以作为事件驱动的结果而调用的程序，这样可以实现将一个函数与事件驱动相关联。
使用关键字“function”来定义
eval()：计算字符串表达式的值 例如：eval(“1+1”)=2；eval(“1<2”)=true；
parseFloat()：将字符串转换为浮点数
parseInt()：将字符串转换为整数

<html>
   <head>
	<title>无标题文档</title>
	<style type="text/css">
	<!--body {background-color: #9966CC;}-->
	</style>
   </head>
   <body> 
	<script language="JavaScript">
		function showname(name){
 			return "我叫"+name;
 		}
	 	document.write(showname("wqy"));
		var zz=eval("1+2");
	 	document.write("1+2=",zz);
	</script>
    </body>
</html>

三、对话框

1.对话框

alert：警告对话框
在这里插入图片描述

<html>
        <head>
	<title>警告</title>
        </head>
        <body>
	<script language="javascript">
		alert("警告窗口！");
	</script>
        </body>
</html>

confirm：确认对话框，返回一个bool值
在这里插入图片描述

<html>
        <head>
	<title>确认对话框</title>
        </head>
        <body>
	<script language=javascript>
		var learned;
		var show_text;
		learned=confirm("学习过java?");
		show_text = learned?"是":"否";
		document.write(show_text);
	</script>
        </body>
</html>

 <head>
	<title>确认对话框</title>
	<script>
		function confirmtest(){
 			if(confirm("确定删除该文件？")){
   		 		 document.form1.submit();
   		}}
	</script>
        </head>
        <body>
	<form name="form1" action="1.jsp" method="post">
		<input type="button" name="button1" value="删除文件" onclick="confirmtest()">
        	</form>
        </body>

prompt：输入对话框，返回对框框中输入的值，没有值输入则返回空值null
在这里插入图片描述

<html>
        <head>
	<title>prompt对话框</title>
  	<script language="javascript">
  		var userName = prompt("请输入你的名字：");
  		document.write("你好,"+userName+"!");
  	</script>
        </head>
        <body>
        </body>
</html>

四、事件驱动

事件：用户对浏览器内所进行的某种动作称为事件（Event）。
事件驱动：由鼠标或热键引发的一连串的动作称为事件驱动（Event Driver）。
事件处理程序：对事件进行处理的程序或函数，称为事件处理程序（Event Handler）。是指当一个事件发生后要做什么处理。JavaScript有常见的20多种事件，**每一种事件都有其专用的事件处理过程的定义方式。**例如，事件Load的事件处理程序就是OnLoad，事件Click的事件处理程序就是OnClick。

1.常见事件

在这里插入图片描述

2.事件的处理方法

（1）使用HTML标记，为组件增加一个属性。<tag on事件=”事件处理程序”/>
（2）使用JS语言。
<script>
对象.on事件=事件处理程序
</script>

<html>
       <head>
	<title>处理事件-HTML标记方式</title>
	<script language=javascript>
		function alts() {
	   		 alert("你要小心了!");
		}
	</script>
        </head>
        <body>
	<form name="form1">
  		<input type="button" value="问侯" onclick="alert('您好!');"/><br/><br/>
 		<input type="button" value="警告" onclick="alts();"/><br/><br/>
 		<input type="button" value="百度" onclick="window.open('http://www.baidu.com')"/>
	</form>
        </body>
</html>

五、内置对象

可以使用四种对象，即内置对象、浏览器对象、自定义对象和ActiveX对象。
内置对象和浏览器对象经常使用，而自定义对象不常用到，典型的如jQuery（即一个JavaScript 类库，简化了JavaScript 编程），ActiveX对象用于在浏览器中实现某些特殊功能，如安装插件等。

1.Array数组对象

数组对象的创建

与Java语言不同的是：在JavaScript中，定义数组时不需要指定数组的数据类型，而且可以将不同类型的数据存放到一个数组中。
语法：
new Array();
new Array(size);
new Array(element0,element1…elementn);
（1）使用无参构造函数创建数组时，返回一个空数组，数组长度为0；
（2）使用一个参数的构造函数Array(size)创建数组时，返回一个长度为size的数组，且数组中的元素均为undefined；
（3）使用多个参数的构造函数创建数组时，使用参数指定的值来初始化数组，数组的长度等于参数的个数。

<script>
var num=new Array();
num[0]="a";
num[1]="b";
var food=new Array("川菜","鲁菜","粤菜");
var movie=new Array(8);
var foods=["兰州拉面","宫保鸡丁","西湖醋鱼"];
</script>

数组对象的属性

constructor：返回对创建此对象的构造函数的引用
length：数组的长度
prototype：为对象添加属性和方法

constructor属性：当获取constructor属性时，会返回其所指向的构造函数。
arrayConstructor.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <script type="text/javascript">
       var words=new Array("a","b","c");
       if(words.constructor==String)
       {
        alert("words是个字符串！");
       }
       else if(words.constructor==Array)
       {
        alert("words是个数组对象，数组中元素的个数是："+words.length+"\n------------------\n"+words.constructor);
       }
       else if(words.constructor==Date)
       {
        alert("words是个日期对象！");
       }
   </script> 
</body>
</html>

运行结果：
在这里插入图片描述

数组对象的常用方法

（1）contact()方法：该方法用于连接两个或多个数组，返回合并后的新数组，而原数组保持不变。

语法格式：
arrayObject.concat(param1,param2,…,paramN)
注意：
concat()方法至少需要提供一个param参数；
参数param可以是具体的值，也可以是数组对象；
多个参数之间使用逗号隔开；
concat()方法返回的是合并后的新数组，原数组保持不变。
例：words.concat(newMovie);

（2）join()方法：用于把数组中的所有元素放入一个字符串中，并通过分隔符隔开。

语法格式：
arrayObject.join(separator)
注意：
参数separator可选，作为数组元素之间的分隔符，默认为逗号；
join()方法的返回形式是字符串，使用separator分隔符将数组中的元素进行连接。
例：words.join(“_”) //元素间使用下划线进行分割。

（3）push()方法：push()方法用于向数组末尾添加一个或多个元素，返回数组的新长度。

语法格式：
arrayObject.push(newElement0,newElement1,…newElementN)
注意：
newElement参数至少有一个；
push()方法将返回数组的新长度；
根据参数的顺序将参数依次追加到数组的尾部，无须创建新的数组。

（4）slice()方法：slice()方法用于从数组中返回选定的元素。

语法格式：
arrayObject.slice(start,[end])
注意：
参数start是必须的，表示元素选取的开始位置；
参数end可选，表示元素选取的结束位置（不包括end）,当参数end省略时，将选取从start开始到数组末尾的所有元素；
start和end允许取负数，-1表示字符串的最后一个字符，-2表示倒数第二个字符，以此类推。

（5）sort()方法：sort()方法用于对数组的元素进行排序。

语法格式：
arrayObject.sort([sortby])
注意：
参数sortby是函数，可选，用于规定排序的方式；
当参数sortby省略时，会按照字符编码的顺序进行排序；
数组在原始数组基础上进行排序，不会生成新的副本；

（6）splice()方法：splice()方法用于向数组中添加1~n个元素或从数组中删除元素。

语法格式：
arrayObject.splice(index,howmany,[item1,…,itemN])
注意：
参数index必须，规定添加或删除元素的指定位置，index为负数时，从数组末尾向前计数，例如-1表示字符串的最后一个字符，-2表示倒数第二个字符，其他以此类推。
参数howmany必须，表示要删除元素的数量，0代表不删除数据；
参数列表item1，…，itemN可选，表示向数组中添加或替换的新元素；
该方法在原数组基础上实现，不会生成新的副本。

二维数组

在JS中，没有二维数组或多维数组，不能通过new Array()方式来创建二维数组，可以通过在一维数组中存放另一个数组来模拟实现二维数组。数组中存放的数据可以是数值型、字符型、布尔型、对象和数组等类型。
示例1：
var array=new Array();
array[0]=new Array(1,2,3);
array[1]=[4,5,6];
array[2]='情不知所起，一往而深。’;
array[3]=88;
示例2：
var movies=[[1,2,3],[4,5,6],[7,8,9]];

2.String字符串对象

String对象：该对象提供了对字符串进行处理的属性（只有一个：length）和方法。例如：toLowerCase()、toUpperCase()、substr()。

字符串对象的创建
（1）字面量方式创建一个字符串

var name=“如鱼得水”; //类型为string类型
var address="中国云南昆明 "; //类型为string类型
PS:使用单引号或双引号均可生成一个字符串。

（2）new方式
new方式创建字符串对象是通过调用String()构造函数来完成的，并返回一个String对象。

var movieName=new String(“想见你”); //类型为String对象
var bestFriend=String(“酱酱”); //类型为string类型

在JavaScript中，string 和 String 的区别如下：
在这里插入图片描述
在JavaScript中，允许使用“对象.属性”的形式对属性进行操作。
2. 字符串对象的常用方法

字符串中常用的方法有indexOf()、lastIndexOf()、slice()、subString()和split()。
（1）indexOf()：indexOf()方法用于检索子串在字符串中首次出现的位置。

语法格式：
stringObject.indexOf(searchValue,[fromIndex])

在这里插入图片描述
（2）lastIndexOf()：lastIndexOf()方法用于从后向前对字符串进行检索，并返回子串在字符串中首次出现的位置。

语法格式：
stringObject.lastIndexOf(searchValue,[fromIdex])

在这里插入图片描述
（3）slice()：slice()方法用于从字符串中抽取一部分内容。

语法格式：
stringObject.slice(start,[end])

在这里插入图片描述

（4）subString()：substring()方法与slice()方法相似，也是从字符串中抽取一部分。

语法格式：
stringObject.substring(start,[stop])

在这里插入图片描述

（5）split()：split()方法用于把一个字符串分割成一个字符串数组。

语法格式：
stringObject.split(separator,[howmany])

在这里插入图片描述
（6）转义字符

3.Date日期对象

Date对象：该对象没有提供直接访问的属性，主要提供获取和设置日期和时间的方法。例如，getFullYear() 、getMonth() 、getDate () 、getDay () 。

Date对象的创建
JavaScript通过日期对象（Date）来操作日期和时间。通过日期对象的构造函数创建一个系统当前时间或指定时间的日期对象。

语法格式：
new Date();
new Date(millisenconds);
new Date(yyyy,MM,dd);
new Date(yyyy,MM,dd,hh,mm,ss);
new Date(MM/dd/yyyy hh:mm:ss);
new Date(“month dd,yyyy”);
new Date(“month dd,yyyy hh:mm:ss”);

在这里插入图片描述

Date对象的常用方法

（1）setFullYear()方法：setFullYear()方法用于设置年份（包括月份和日期）。

语法格式：
dataObject.setFullYear(year,month,day)

在这里插入图片描述
（2）setHours()方法：用于设置指定时间的小时（包括分钟、秒、毫秒）

语法格式：
dataObject.setHours(hour,min,sec,millisec)

在这里插入图片描述

4.Math数学对象

Math对象：该对象的作用是执行常见的算数任务。例如：abs()、max()、min()等。

Math对象的创建
与String、Date不同，Math对象没有提供构造方法，可以直接使用Math对象。
Math对象的常用方法
Math对象还提供一些用作算术运算的方法，例如取绝对值、正弦、余弦、反正弦和反余弦。

5.RegExp正则表达式对象

正则表达式是一种字符串匹配的模式，通过单个字符串来描述和匹配一系列符合某个句法的规则。

RegExp对象的创建
创建一个RegExp对象有两种方式：直接量方式和构造函数方式。

语法格式：
var reg=/pattern/attributes;//直接量方式
var regExp=new RegExp(pattern,attributes);//构造函数方式
注意：
参数pattern是一个字符串或表达式，表示正则表达式的模式；
参数attributes是一个可选的字符串，取值包括“g”、"i"和“m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

在这里插入图片描述
示例：

当使用 RegExp()来创建一个正则表达式对象时，需要对元字符中的斜线（\）进行转义。相对而言，直接量方式比构造函数方式更加简洁。

正则表达式中的pattern部分可以包括元字符、括号表达式以及量词等。
常见的元字符如下：
在这里插入图片描述
常见的括号表达式如下：

常见的量词如下：

不仅能单独使用元字符、括号表达式或量词来创建一个RegExp对象，还可以将以上三者混合使用来创建RegExp对象。
2. RegExp对象的常用方法
正则表达对象常用的方法：
在这里插入图片描述
（1）exec()方法：exec()方法用于检索字符串中正则表达式的匹配情况，当匹配成功时返回匹配内容及其所在位置.

语法格式：
var result=RegExpObject.exec(string)

在这里插入图片描述
（2）test()方法：test()方法用于检索字符串中正则表达式的匹配情况，当匹配成功时返回true，否则返回false。

语法格式：
RegExpObject.test(string)
注意：
参数string是必须的，表示被检索的字符串；
当参数string与正则表达式匹配时，返回true;
当参数string与正则表达式不匹配时，返回false。

在这里插入图片描述
（3）compile方法

String和RegExp
在String对象中，有以下三种方法可以使用RegExp对象作为方法的参数：search(regExp)用于检索与正则表达式相匹配的子串，replace(regExp,replaceText)用于替换字符串中与指定正则表达式匹配的内容，match(regExp)用于检索与正则表达式相匹配的信息。

6.自定义对象

原始方式
使用原始方式创建一个JavaScript对象，步骤为：首先创建一个Object对象，然后为对象添加所需的属性和方法。

语法格式：
var object=new Object();
object.propertyName=value;
object.methodName=functionName|function(){};
注意：
使用Object类创建一个对象object；
propertyName表示为object对象所添加的属性名；
methodName表示为object对象所添加的方法名，其值可以是事先定义的函数名或匿名函数。

在这里插入图片描述

构造函数方式

语法格式：
function ClassName([param1][,param2]…)
{
this.propertyName=value;
this.methodName=functionName|function(){…};
//其他方法
}

在这里插入图片描述

<script>
function Goods(name,type,price,color)
{
	this.name = name;
	this.type = type;
	this.price = price;
	this.color = color;
	this.showinfo = function(){
	alert("-商品名称:"+this.name + "\n 商品类型：" + this.type + "\n 商品价格："+ this.price + "\n 商品颜色:"+ this.color);
	}；
	this.showColor = showColor;
	function showColor(){
	alert(M商品颜色："+this.color);
	}
}
//创建对象实例
var goodsl = new Goods("M男士衬衣","男装",200,"白色")；
var goods2 = new Goods("女士花裙","女装",700,"红色")；
//方法的调用
goodsl.showinfo();
goods2.showColor();
</script>

通过构造函数创建对象时，会重复生成对象所引用的函数，为每个对象都创建一个独立的函数版本。
3. 原型方式
原型方式通过prototype属性为对象添加新的属性或方法。

语法格式：
object.prototype.name=value;

在这里插入图片描述
4. 混合方式

<script>
fuction Goods(){}
Goods.prototype.name="红心火龙果";
Goods.prototype.type="水果类";
Goods.prototype.price="10";
Goods.prototype.color="粉红色";
Goods.prototype.showInfo=function(){
	alert("-商品名称:"+this.name + "\n 商品类型：" + this.type + "\n 商品价格："+ this.price + "\n 商品颜色:"+ this.color);
};
var goods=new Goods();
goods.showInfo();
</script>

原型方式不仅能为自定义对象添加属性和方法，还能对内置对象进行扩展。
5. JSON方式
在这里插入图片描述

（1）eval()方式
eval方法通常将字符串当作一个语句块来处理，使用括号的方式将JSON字符串强制转换成JSON对象。

//Json字符串
<script>
var movieStr='{'
	+'name:"小时代",'
	+'type:"爱情",'
	+'price:80,'
	+'showInfo:function():{'
		+'document.write("影片名称："+this.name+",影片类型："+this.type+"票价："+this.price);'
	+'}'
+'}';
var movie=eval("("+movieStr+")");
movie.showInfo();
</script>

上述代码中，将JSON字符串转成JSON对象前，需在JSON字符串两侧添加一对括号“()”,然后用eval()方法将该字符串强制转换成JSON对象。
在这里插入图片描述

在这里插入图片描述
（2）Funtion对象方式

JSON方式也可以与原型方式、构造函数方式混合使用。

六、浏览器对象

BOM：Browser Object Model，浏览器对象模型，提供了与浏览器窗口交互的功能。其中window对象是BOM模型中的顶层对象，其他对象都是该对象的子对象。BOM模型如下图所示。
在这里插入图片描述
DOM： Document Object Model，属于BOM的一部分，用于对BOM中的核心对象document进行操作。DOM模型如下图所示。

1.浏览对象（BOM）

在这里插入图片描述

window对象：表示浏览器中打开的窗口
属性：name、status等
方法：open()、close()等

<html>
    <head>
        <title>浏览器对象</title>
        <script language="javascript">
	function f(){
 		window.open
("demo1.html","test","toolbar=no,left=200,top=100,menubar=no,width=100,height=100,resizable=no")
	}
        </script>
    </head>
    <body>
        <script language="javascript">
	window.status="请看这里！";
        </script>
        <form>
	<input name="button" type="button" value="open" onclick=f()>
	<input name="button" type="button" value="close" onclick=window.close()>
        <form>
    </body>
</html>

location对象：location既是对象，也是window对象的属性。
（1）window对象的 location 属性包含了当前页面的地址 (URL) 信息，获取或设置现有文档的url。
（2）location作为对象，有reload()重新加载等方法。

<html>
        <head>
	<title>浏览器对象</title>
       </head>
        <body>
  	<script language="javascript">
  		alert(window.location);
  	</script>
        </body>
</html>

结果返回当前页面的地址信息。

<html>
        <head>
	<title>history</title>
        </head>
        <body>
  	<script language="javascript">
  		function goto()
  		{
		 	 window.location="js3.html";
		 }
  	</script>
  	<input name="" type="button" onClick="goto()" value="转向" />
        </body>
</html>

实现单击按钮直接跳转js3.html。

history对象
属性：
length 存储在记录清单中的网页数目。
current 当前网页的地址。
next 下一个历史记录的网页地址。
previous 上一个历史记录的网页地址。
方法：
back 回到客户端查看过的上一页。
forward 回到客户端查看过的下一页。
go（整数或URL字符串）前往历史记录中的某个网页。

<html>
        <head>
	<title>history</title>
        </head>
       <body>
  	<script language="javascript">
  		function goback()
  		{
			  history.back();
	 	 }
 	 </script>
	  <input name="" type="button" onClick="goback()" value="返回" />
       </body>
</html>

frame对象
每一个框架对象相当于窗口(window)对象，因此框架对象可以使用窗口对象的所有属性和方法。
document对象：指当前的文档对象。
属性：image、form等
方法：document.write()：向客户端浏览器输出内容
navigator对象：包含有关浏览器的信息，如浏览器的版本号、名称等。

2.文档对象（DOM）

什么是DOM？

通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
D：document，指HTML或XML这类标记文档。
O：object，指HTML元素转成的JS对象。
M：model，将文档想成一个倒树，每一个部分（元素、内容、属性、注释）都是一个节点。

DOM 是这样规定的：

整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
除此之外，还有注释节点等
只要知道一个节点，就可按关系找到其它节点。

定位某一对象的方法：

1、基于DOM（基于name）：
window.document.form1.userName.value.length //太复杂，且每个元素必须有name!
2、基于ID：
var v = document.getElementById(“id”)//推荐
3、基于标签名：
var x = document.getElementsByTagName (“p”)
4、基于名字：
var x = document.getElementsByName (“name”)

<html>
        <head>
	<script language="javascript">
		function getValue()
	  	{
 			 var x=document.getElementById("myHeader")
 	 		alert(x.innerHTML)
 	 	}
	</script>
        </head>
        <body>
	<h1 id="myHeader" onclick="getValue()">This is a header</h1>
	<p>Click on the header to alert its value</p>
        </body>
</html>