JavaScript点滴记录（二）

     知识梳理：

    接着上一次的来说，在javascript中还定义了判断是否具有子节点的方法：haschildNodes:例如：var booleanCityNodes=cityNode.hasAttributes();当然这里是判断是否具有属性子节点。不过用法大致差不多，这里就不做赘述了。对于属性节点，当我们获取之后可以直接进行set和get的操作的，具体做法是：节点名.setAttribute("name","value")；节点名.getAttribute("name")。

   创建和插入节点：

   创建节点：createElement方法：例如：

  var of=document.createElement("p");

   创建文本节点：

  var newNode=document.createTextNode("青岛");//创建了一个内容为青岛的的文本节点

   插入节点：包括插入到父节点的最后和插入到指定子节点的前一个。

 var newNode=document.createTextNode("青岛");
  //newNode.setAttribute("id", "newcity");
  cityNode.appendChild(newNode);

这里默认的就是插入到cityNode的节点中，并且作为其最后一个子节点。

  插入到指定节点的前一个用到insertBefore（）；

 var container = document.getElementById(“content”);
  var message = document.getElementById(“fineprint”);
  var para = document.createElement(“p”);
  container.insertBefore(para,message);

这里就是把para插入到message前面。

   综合案例

   下面用一个简单的省市联动的综合案例来练习javascript：

   省市联动，需要在body中定义两个下拉列表，一个是省份，一个是城市。代码如下：

  <select id="province"  size=1 οnchange="getCity()">
   <option  value= 0>山东</option>
   <option  value= 1>广东</option>
   <option  value= 2>四川</option>
  </select>
  <select  id="city" style="width:60px">
  </select>

    在网页加载的时候要将各个省份对应的城市加载，这里我们用数组把几个省份的城市存储：

 var arr=new Array();//定义一个数组来存储各个省份的城市
 arr[0 ]="济南,青岛,菏泽,济宁,潍坊"
 arr[1 ]="深圳,广州,东莞,"
 arr[2 ]="成都,绵阳,广安,卧龙,攀枝花"

function init()//初始化城市列表
   {
<span style="white-space:pre">	</span> 
<span style="white-space:pre">	</span>   var city=document.getElementById("city");//获取城市节点
<span style="white-space:pre">	</span>   var cityArr=arr[0].split(",");
<span style="white-space:pre">	</span>   for(var i=0;i<cityArr.length;i++)city[i]=new Option(cityArr[i],cityArr[i]);
<span style="white-space:pre">	</span>   }

   当我们选择好了省份后，城市的下拉列表根据省份的选中来确定自己填充哪些数据。

function getCity()//通过选择的省份给相应的城市列表填入下拉框
   {
	    var pro = document.getElementById("province");
	    var city = document.getElementById("city");
	    var index = pro.selectedIndex;//获得选中的省份的序列
	    var cityArr = arr[index].split(",");   
	    
	    city.length = 0;
	    //将城市数组中的值填充到城市下拉框中
	    for(var i=0;i<cityArr.length;i++)
	    {
	             city[i]=new Option(cityArr[i],cityArr[i]);
	         }
	   }

这样，一个简单的省市联动demo就完成了。

当然，我们还要在页面加载的时候就把城市的数据初始化，在body中加入οnlοad="init()"就可以了。

  运行截图：

  这里我又加了一个删除选中城市功能。