JS（JavaScript）基本语法以及其它语法

最新推荐文章于 2024-06-24 23:21:12 发布

沐子**

最新推荐文章于 2024-06-24 23:21:12 发布

阅读量1.4k

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_43737870/article/details/113750510

版权

JS基本语法

1.JS内嵌在HTML中的任何位置，一般放在head或body。

<head>
<script type="text/javascript">
    .....js代码
</script>
</head>

2.在JS文件中，直接编写JavaScript代码，并嵌入在HTML

<script src="script.js"></script>

注意:
1.在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。
2.变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。
3.JS的代码，是按照顺序执行语句

3.JavaScript-流程控制语句
判断语句（if…else）

<script type="text/javascript">
   var myage = 18;
   if(myage>=18)  //myage>=18是判断条件
   { document.write("你是成年人。");}
   else  //否则年龄小于18
   { document.write("未满18岁，你不是成年人。");}
</script>

switch语句

<script type="text/JavaScript">
var myweek =3;//myweek表示星期几变量
switch(myweek)
{
 case 1:
 case 2:
 document.write("学习理念知识");
 break;
 case 3:
 case 4:
 document.write("到企业实践");
 break;
 case 5:
 document.write("总结经验");
 break;
default:
 document.write("周六、日休息和娱乐");
}
</script>

for语句

<script type="text/JavaScript">
var mymoney,sum=0;//mymoney变量存放不同面值，sum总计
for(mymoney=1;mymoney<=10;mymoney++)
{ 
  sum= sum + mymoney;
}
  document.write("sum合计:"+sum);
</script>

while循环

<script type="text/javascript">
var num=0;  //初始化值
while (num<=6)   //条件判断
{
  document.write("取出第"+num+"个球<br />");
  num=num+1;  //条件值更新
}
</script>

Do…while循环

<script type="text/javascript">
   num= 1;
   do
   {
     document.write("数值为:" +  num+"<br />");
     num++; //更新条件
   }
   while (num<=5)
</script>

4.JavaScript-函数

function 函数名()
{ 函数代码; }

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函数调用</title>
   <script type="text/javascript">
    function contxt() //定义函数
      {
         alert("哈哈，调用函数了!");
      }
    contxt();
   </script>
</head>
<body>
   <form>
      <input type="button"  value="点击我" onclick="contxt()" value="点击我!"/>  
   </form>
</body>
</html>

5.数组

语法：var myarr=new Array(); //定义数组
myarray.length; //获得数组myarray的长度
1.创建的新数组是空数组，没有值，如输出，则显示undefined。
2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。

第一种方法：

var myarray = new Array(66,80,90,77,59);//创建数组同时赋值

第二种方法：

var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）

一维数组的表示: myarray[ ]
二维数组的表示: myarray[ ][ ]

常用互动方法

1.JavaScript-输出内容（document.write）
第一种:输出内容用"“括起，直接输出”"号内的内容。

<script type="text/javascript">
  document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。
</script>

第二种:通过变量，输出内容

<script type="text/javascript">
  var mystr="hello world!";
  document.write(mystr);  //直接写变量名，输出变量存储的内容。
</script>

第三种:输出多项内容，内容之间用+号连接。

<script type="text/javascript">
  var mystr="hello";
  document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
</script>

第四种:输出HTML标签，并起作用，标签使用""括起来。

<script type="text/javascript">
  var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
  document.write("JavaScript");
</script>

在这里插入图片描述
2.JavaScript-警告（alert 消息对话框）

<script type="text/javascript">
   var mynum = 30;
   alert("hello!");
   alert(mynum);
</script>

注意:
1.在点击对话框"确定"按钮前，不能进行任何其它操作。
2. 消息对话框通常可以用于调试程序。
3. alert输出内容，可以是字符串或变量，与document.write 相似。

3.JavaScript-确认（confirm 消息对话框）

<script type="text/javascript">
    var mymessage=confirm("你喜欢JavaScript吗?");
    if(mymessage==true)
    {   document.write("很好,加油!");   }
    else
    {  document.write("JS功能强大，要学习噢!");   }

str：在消息对话框中要显示的文本返回值: Boolean值
当用户点击"确定"按钮时，返回true
当用户点击"取消"按钮时，返回false

4.JavaScript-提问（prompt 消息对话框）

prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
语法: prompt(str1, str2);
参数说明：
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改
返回值:
1.点击确定按钮，文本框中的内容将作为函数返回值
2.点击取消按钮，将返回null

var myname=prompt("请输入你的姓名:");
if(myname!=null)
  {   alert("你好"+myname); }
else
  {  alert("你好 my friend.");  }

5.JavaScript-打开新窗口（window.open）

open() 方法可以查找一个已经存在或者新建的浏览器窗口。
语法：window.open([URL], [窗口名称], [参数字符串])
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

例如:打开http://www.imooc.com网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：

<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>

6.JavaScript-关闭窗口（window.close）

close()关闭窗口
用法：window.close(); //关闭本窗口
<窗口对象>.close(); //关闭指定的窗口

<script type="text/javascript">
   var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中
   mywin.close();
</script>

DOM操作

1.DOM概念

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

<a href="http://www.imooc.com">JavaScript DOM</a>

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

元素节点：标签
文本节点:向用户展示的内容，如li中的JavaScript、DOM、CSS等文本
属性节点:元素属性，如a标签的链接属性href=“http://www.imooc.com”

2.通过ID获取元素

语法: document.getElementById(“id”)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取元素</title>
<script type="text/javascript">
  var mychar= document.getElementById("con");          
  document.write("结果:"+mychar); //输出获取的P标签。 
</script>
</head>
<body>
<p id="con">JavaScript</p>
</body>

3.innerHTML 属性

用于获取或替换 HTML 元素的内容。语法:Object.innerHTML
注意:
1.Object是获取的元素对象，如通过document.getElementById(“ID”)获取的元素。
2.注意书写，innerHTML区分大小写。

<body>
<h2 id="con">javascript</H2>
<script type="text/javascript">
  var mychar= document.getElementById("con")          ;
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML="Hello world";  //修改p元素的内容
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>

4.改变 HTML 样式

语法:Object.style.property=new style;
注意:Object是获取的元素对象，如通document.getElementById(“id”)获取的元素。

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

5.显示和隐藏（display属性）

语法：Object.style.display = value
注意:Object是获取的元素对象，如document.getElementById(“id”)获取的元素。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  
		{  
		var mychar = document.getElementById("con").style.display="none";       
		}  
		function showtext()  
		{  
		var mychar = document.getElementById("con").style.display="block";      
		}
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" onclick="hidetext()" value="隐藏内容" /> 
       <input type="button" onclick="showtext()" value="显示内容" /> 
    </form>
</body>

6.控制类名（className 属性）

className 属性设置或返回元素的class 属性。
语法：object.className = classname
作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
    body{ font-size:16px;}
    .one{
		border:1px solid #eee;
		width:230px;
		height:50px;
		background:#ccc;
		color:red;
    }
	.two{
		border:1px solid #ccc;
		width:230px;
		height:50px;
		background:#9CF;
		color:blue;
	}
	</style>
</head>
<body>
    <p id="p1" > JavaScript1</p>
    <input type="button" value="添加样式" onclick="add()"/>
	<p id="p2" class="one">JavaScript2</p>
    <input type="button" value="更改外观" onclick="modify()"/>

	<script type="text/javascript">
	   function add(){
	      var p1 = document.getElementById("p1");
	      p1.className = "one";
	   }
	   function modify(){
	      var p2 = document.getElementById("p2");
	      p1.className = "two";
	   }
	</script>
</body>
</html>

事件

1.事件的概念

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

2.鼠标单击事件( onclick ）----- onclick =“message()”

onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。

3.鼠标经过事件（onmouseover）----- οnmοuseοver=“message()”

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

4.鼠标移开事件（onmouseout）----- οnmοuseοut=“message()”

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

5.光标聚焦事件（onfocus）----- οnfοcus=“message()”

当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
  <script type="text/javascript">
    function message(){
	  alert("请选择，您现在的职业！");
	}
  </script>
</head>
<body>
请选择您的职业：<br>
  <form onfocus ="message()">
    <select name="career"> 
      <option>学生</option> 
      <option>教师</option> 
      <option>工程师</option> 
      <option>演员</option> 
      <option>会计</option> 
    </select> 
  </form>
</body>
</html>

6.失焦事件（onblur）-------onblur-=“message()”

onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

7.内容选中事件（onselect） -----οnselect=“message()”

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

8.文本框内容改变事件（onchange） ---- οnchange=“message()”

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

9.加载事件（onload）------ onLoad =“message()”

事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：
1.加载页面时，触发onload事件，事件写在标签内。
2.此节的加载页面，可理解为打开一个新页面时。如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。

10.卸载事件（onunload）

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

<script type="text/javascript">   
     window.onunload = onunload_message;   
     function onunload_message(){   
        alert("您确定离开该网页吗？");   
    }   
</script>

内置对象

1.Date 日期对象

日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒)

var Udate=new Date();  # 定义一个时间对象

在这里插入图片描述
2.返回/设置年份方法

get/setFullYear() 返回/设置年份，用四位数表示。

<script type="text/javascript">
var mydate=new Date(); 
var myyear= mydate.getFullYear(); 
document.write(mydate+"<br>");//输出当前时间
document.write(mydate.getFullYear()+"<br>");//输出当前年份
mydate.setFullYear(81); //设置年份
document.write(mydate+"<br>"); //输出年份被设定为 0081年。
document.write("年份:"+myyear);
</script>

3.返回星期方法

getDay() 返回星期，返回的是0-6的数字，0 表示星期天。

<script type="text/javascript">
  var mydate=new Date();
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六";
  var mynum=mydate.getDay();//返回值存储在变量mynum中
  document.write(mydate.getDay());//输出getDay()获取值
  document.write("今天是："+ weekday[mynum]);//输出星期几
</script>

4.返回/设置时间方法

get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。

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

String 字符串对象

1.长度

<script type="text/javascript">
    var message="I love JavaScript!";
    var mychar=message.toLowerCase();
    document.write("字符串为："+mychar+"<br>");
</script>

2.返回指定位置的字符

charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
1.字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。
2.如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。

<script type="text/javascript">
  var mystr="I love JavaScript!"
  document.write(mystr.charAt(2));
</script>

3.返回指定的字符串首次出现的位置

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

<script type="text/javascript">
  var str="I love JavaScript!"
  document.write(str.indexOf("I") + "<br />");
  document.write(str.indexOf("v") + "<br />");
  document.write(str.indexOf("v",8));
</script>

4.字符串分割split()

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

<script type="text/javascript">
var mystr="86-010-85468578";
document.write(mystr.split("-")+ "<br />");
document.write(mystr.split("")+ "<br />");
document.write(mystr.split("",3));
</script>

5.提取字符串substring()

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

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

6.提取指定数目的字符substr()

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

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

Math对象

在这里插入图片描述

1.向上取整ceil()

ceil() 方法可对一个数进行向上取整。语法:Math.ceil(x)

2.向下取整floor()

floor() 方法可对一个数进行向下取整。语法:Math.floor(x)

3.四舍五入round()

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

4.随机数 random()

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

Array 数组对象

在这里插入图片描述
1.数组连接concat()

concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
语法：arrayObject.concat(array1,array2,…,arrayN)

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

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

3.颠倒数组元素顺序reverse()

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

4.选定元素slice()

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

5.数组排序sort()

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

浏览器对象

在这里插入图片描述
1.计时器类型：

一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。

2.计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。语法:setInterval(代码,交互时间);
setInterval(“clock()”,1000) 或 setInterval(clock,1000)

3.取消计时器clearInterval()

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

<!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>

4.计时器setTimeout()

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

5.取消计时器clearTimeout()

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

History 对象

1.history对象

记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
语法：window.history.[属性|方法]

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

2.返回前一个浏览的页面

back()方法，加载 history 列表中的前一个 URL。语法：window.history.back();
注意：等同于点击浏览器的倒退按钮。back()相当于go(-1)

3.返回下一个浏览的页面

forward()方法，加载 history 列表中的下一个 URL。语法：window.history.forward();
注意：等价点击前进按钮。forward()相当于go(1)

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

go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。语法：window.history.go(number);
注意：和在浏览器中单击两次后退按钮操作一样。

5.Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。语法:location.[属性|方法]

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

7.serAgent

返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串) 语法：navigator.userAgent

8.screen对象

screen对象用于获取用户的屏幕信息。语法：window.screen.属性

9.屏幕分辨率的高和宽

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

screen.height 返回屏幕分辨率的高
screen.width 返回屏幕分辨率的宽

屏幕可用高和宽度

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

DOM对象，控制HTML元素

1.getElementsByName()方法

返回带有指定名称的节点对象的集合。语法：document.getElementsByName(name)
注意：所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

2.getElementsByTagName()方法

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

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>JavaScript</title>  
</head>  
<body>  
    
        <form name="Input">
            <table align="center" width="500px" height="50%" border="1">
                <tr>
                    <td align="center" width="100px">
                        学号:
                    </td>
                    <td align="center" width="300px">
                        <input type="text" id=userid name="user" onblur="validate();">
                        <div id=usermsg></div>
                    </td>
                </tr>
                <tr>
                    <td align="center" width="100px">
                        姓名:
                    </td>
                        <td align="center">
                        <input type="text" name="name">
                    </td>
                </tr>
                <tr>
                    <td align="center" width="%45">
                        性别:
                    </td>
                    <td align="center">
                        <input type="radio" name="sex" value="男">
                        男
                        <input type="radio" name="sex" value="女">
                        女
                    </td>
                </tr>
                <tr>
                    <td align="center" width="30%">
                        年龄:
                    </td>
                    <td align="center" width="300px">
                        <input type="text" name="age">
                    </td>
                </tr>
                <tr>
                    <td align="center" width="100px">
                        地址:
                    </td>
                    <td align="center" width="300px">
                        <input type="text" name="addr">
                    </td>
                </tr>

            </table>
        </form>
        <h1 id="myHead" onclick="getValue()">
            看看三种获取节点的方法?
        </h1>
        <p>
            点击标题弹出它的值。
        </p>
        <input type="button" onclick="getElements()"
            value="看看name为sex的节点有几个?" />
        <Br>
        <input type="button" onclick="getTagElements()"
            value="看看标签名为input的节点有几个?" />
            
     <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);
          }
         
     </script>

4.getAttribute()方法

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

5.setAttribute()方法

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
  <p id="intro">我的课程</p>  
  <ul>  
    <li title="JS">JavaScript</li>  
    <li title="JQ">JQuery</li>  
    <li title="">HTML/CSS</li>  
    <li title="JAVA">JAVA</li>  
    <li title="">PHP</li>  
  </ul>  
  <h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
  var Lists=document.getElementsByTagName("li");
  for (var i=0; i<Lists.length;i++)
  {
    var text=Lists[i].getAttribute("title");
    document.write(text +"<br>");
    if(text=="")
    {
    Lists[i].setAttribute("title","WEB前端技术");
    document.write(Lists[i].getAttribute("title")+"<br>");
    }
  }
</script>
</body>
</html>

6.节点属性

DOM 节点有三个重要的属性：

nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型
nodeName 属性: 节点的名称，是只读的。
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
nodeValue 属性：节点的值
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

7.访问子节点childNodes

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

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

firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.firstChild 说明：与elementNode.childNodes[0]是同样的效果。
lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回NULL。
语法：node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

9.访问父节点parentNode

获取指定节点的父节点语法：elementNode.parentNode
注意:父节点只能有一个。

10.访问兄弟节点

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

11.插入节点appendChild()