javascript对DOM的常用操作

一,DOM对象:
1:访问节点:
访问HTML元素用getElementsByTagName("ul");
getElementById("cssLi");

2:遍历节点
   var oUL=document.getElementById("myList");
   var DOMString="";
   if(oUL.hasChildNodes())
 {
   var oCh=oUL.childNodes;
   for(var i=0;i<oCh.length;i++)
     {
  DOMString+=oCh[i].nodeName+"\n";
     }
 }
      alert(DomString);
3:获取节点属性
 
 var myImag=document.getElementsByTagName("img")[0] //获取第0张图片
 alert(myImg.getAttribute("title"))  //获取第0张图片的title属性
 
4:创建节点

 function creatP()  //创建P节点
 {
   var oP=document.createElement("p");
   var oText=document.createTextNode("这是一段感人的故事") ;
   oP.appendChild(oText);
   document.body.appendChild(op);
 }
5:innerHTML属性
  该属性表示某个标记之间的所有内容,包括代码本身,该属性可以读取,同时也可以写
 function myDOMInnerHTML()
 {
   var myDiv=document.getElementById("myTest");
           alert(myDiv.innerHTML);      //直接显示innerHTML的内的标记和内容
           myDiv.innerHTML="<img src='01.jpg' title='情人坡'>" //修改innerHTML属性,可以直接添加代码
 }

二,事件
1 监听函数
   (1)简单的监听函数
 window.onload=function()
 {
   var oP=document.getElementById("myP")  //找到对象
   oP.onclick=function()
     {
  alert("我被点击了");
     }
 }
    (2)IE的监听函数
  window.onload=function()
  {
       var oP=document.getElementById("myP");   //找到对象
     oP.attachEvent("onclick",fnClick);     //添加监听函数
         }
         function fnClick()
  {
    alert("我被点击了");
    //oP.detachEvent("onclick",fnClick);   //点击了一次后删除监听函数
         }
     (3)标准DOM的事件监听(Firefox)
  window.onload=function()
  {
           var oP=document.getElementById("myP");   //找到对象
    oP.addEventListener("click",fnClick1,false);     //添加监听函数,注意是click,false代表冒泡型事件
           oP.addEventListener("click",fnClick2,false);
   }
  function fnClick1()
 {
   alert("我被fnClick1点击了");
         // oP.removeEventListener("click",fnClick2,false);  删除监听函数
 }
          function fnClick2()
 {
   alert("我被fnClick2点击了");
 }
 2事件对象
    (1)通常为了兼容两种浏览器,通常采用下面的方法
      oP.onclick=function(oEvent)
 {
   if(window.event)
      oEvent=window.event;
 }
      (2)事件类型
        window.onload=function()
 {
         var oImg=document.getElementsByTagName("img")[0];
    oImg.onclick=handle;
          oImg.onmouseover=handle;
 }
  function handle(oEvent)
 {
    var oDiv=document.getElementById("display");
    if(window.event)
      oEvent=window.event;     //处理兼容性,获得事件对象
     if(oEvent.type=="click")
               oDiv.innerHTML+="你点击了我"
            if(oEvent.type=="mouseover")
  oDiv.innerHTML+="你移动到了我的上方";
 }
  
三, 动态添加表格和删除表格

    添加: window.onload=function()
 {
    var oTr=document.getElementById("talbe").inserRow(2);  //插入一行,位置是第三行
    var aText=new Array();
      aText[0]=document.createTextNode("fresheggs");
      aText[1]=document.createTextNode("W610");
      aText[2]=document.createTextNode("Nov 5th");
             for(var i=0;i<aText.length;i++)
  {
     var oTd=oTr.insertCell(i);
     oTd.appendChild(aText[i]);
  }
 }
   删除: window.onload=function()
 {
   var oTable=document.getElementById("talbe");
   oTable.deleteRow(2);   //只删除一行,位置是第三行,后面的行号自动补齐
     oTable.rows[2].deleteCell(1);  //只删除一个单元格,后面的单元格也自动补齐

 }

   隔行换色
      <script language="javascript">
       window.onload = function(){
  var oTable = document.getElementById("oTable");  //获取表格的ID
      for(var i=0;i<oTable.rows.length;i++){
  if(i%2==0)  //偶数行时
   oTable.rows[i].className = "altrow";
            }
               }
        </script>

四, 表单基础
      加入<lable>标记后可以友好地提示,如
    <lable for="name">姓名:<input type="text" name="txtname"/></lable> 
     onmouseover="this.focus()"  获得焦点
     onfocus="this.select()"

五,异常处理

    1: window.onerror=function()  //如果试先定义了这个函数,如果javascript中有错,会自己调用
    {
 alert("出错啦!");
    }

    2: try{
           alert("this is an example");
     alert(fresheggs)   //未定义
         }catch(exception)
         {
  var sError="";
  for(var i in exception)
  {
   sError+=i+":"+exception[i]+"\n";
  }
  alert(sError);
         }
     

六, Ajax
       (1)创建:
       var xmlHttp;   
       function createXMLHttpRequest()
       {
   if(window.ActiveXObject)
           {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
    else if(window.XMLHttpRequest)
    {
     xmlHttp=new XMLHttpRequest();
    }
 }
      (2)建立请求:
 xmlHttp.open("GET","a.aspx",true); 
      (3)异步对象链接服务器
        xmlHttp.onreadystatechange=function()
 {
   if(xmlHttp.readyState==4&&xmlHttp.status==200)
          alert("服务器:"+xmlHttp.responseText);
 }
       (4)send()发送
        xmlHttp.send(null);  //通过Get提交