JavaScript核心参考教程--客户端JavaScript

尽管JavaScript可以运行在不同的脚本执行引擎当中，在服务器端，ASP后台程序就可以使用JScript来编写。当然最广泛的还是JavaScript在客户端的应用。JavaScript除了可以访问本身内置的各种对象外，还可以访问浏览器提供的对象，通过对这些对象的访问，可以得到当前网页以及浏览器本身的一些信息，并能完成有关的操作。
浏览器窗口与网页文档之间，网页文档与文档元素之间是一种从属关系，他们关系如下：

浏览器的主要有以下对象：

Windows 对象。
Event 对象。
XMLHTTPRequest 对象。
Document 对象。
Screen 对象。
Navigator 对象。
Location 对象。
HTML标记通用属性。
Form 对象。
Input 对象。
Option 对象。
Image 对象。
Link 对象。
Anchor 对象。

这里我们主要对Window，Event，XMLHTTPRequest，Document，Screen，Navigator等主要对象进行介绍，其他的如Form，Input，Image，Option等对象，我们这里仅列出其属性和方法，不做过多介绍，因为它们的那些属性在HTML标记中都有说明。

 

1. 1. Window 对象

      Window 对象是浏览器脚本执行引擎的全局对象，它的属性和方法众多，我们先看一下它的方法和属性列表，不要被它吓到，其实常用的也就那么几个，后面我会专门有介绍，对于一些不太常用，需要的时侯可以回头来再看这个表。

      closed	一个只读的布尔值,声明了窗口是否已经关闭。
      defaultStatus	一个可读可写的字符串,声明了显示在状态栏中的默认消息。
      document	对描述窗口和框架中含有的文档的Document对象的只读引用。
      frames	Window对象的数组,每个Window对象在窗口中含有一个框架。
      history	对窗口或框架的History对象的只读引用。
      length	窗口或框架包含的框架个数,也是数组frames[]中的元素数。
      location	用于窗口或框架的Location对象。
      Math	对一个对象的引用,该对象含有各种算术函数和常量。
      name	一个字符串,存放了窗口的名字。
      navigator	对Navigator对象的只读引用,提供Web浏览器的版本信息和配置信息。
      opener	一个可读可写的属性,是对一个Window对象的引用,该对象含有调用open()方法的脚本以打开顶级浏览器窗口的脚本, 只有表示顶层窗口的Window对象的opener属性才有效,表示框架的Window对象的opener属性无效。
      parent	对一个Window对象的只读引用,这个Window对象包含当前的窗口或框架。
      screen	一个Screen对象,由浏览器中所有窗口共享。
      self	对窗口自身的只读引用,等价于window属性。
      status	一个可读可写的字符串,声明了浏览器状态栏中的当前内容。
      top	对一个顶级窗口的只读引用,顶级窗口包含了这个窗口。
      window	window对象等价于self属性,它包含了对窗口自身的引用。
      innerHeight,innerWidth	可读可写的属性,声明了窗口的文档显示区高度和宽度,以象素计, NS 支持。
      outerHeight,outerWidth	可读可写的属性,声明了整个窗口的高度和宽度,以象素计, Firefox, NS 支持。
      pageXOffset,pageYOffset	只读的整数,声明了当前文档向右和向下滚动过的象素数, Firefox, NS 支持。
      screenX,screenY	只读整数,声明了窗口左上角在屏幕的X坐标和Y坐标, Firefox, NS 支持。
      clientInformation	IE中与navigator属性同义，IE支持。
      event	一个Event对象,该对象存放窗口Window中最近发生事件的详细信息，IE支持。
      alert()	在对话框框中显示简单的消息。
      confirm()	用对话框询问一个回答为是或否的问题。
      prompt()	用对话框请求输入一个简单的字符串。
      setInterval()	周期性执行指定的代码。
      clearInterval()	取消周期性执行的代码。
      setTimeout()	在经过指定的时间之后执行代码。
      clearTimeout()	取消挂起超时操作。
      focus()	把键盘焦点赋予顶层浏览器窗口。
      blur()	把键盘焦点从顶层窗口中移走。
      open()	创建并打开一个新窗口。
      close()	关闭窗口。
      moveBy()	把窗口移动一个相对的数量。
      moveTo()	把窗口移动到一个绝对的位置。
      resizeBy()	把窗口大小调整指定的数量。
      resizeTo()	把窗口大小调整到指定的大小。
      scrollBy()	把窗口滚动指定的数量。
      scrollTo()	把窗口滚动到指定的位置。
      scroll()	滚动窗口中显示的文本。
      print()	模拟对浏览器Print按钮的点击。
      back()	其行为和用户点击了Back按钮一样, Firefox，NS支持。
      captureEvents()	指定直接发送给该窗口的事件类型, Firefox，NS支持。
      forward()	其行为和用户点击了Forward按钮一样, Firefox，NS支持。
      handleEvent()	为给定的Event对象调用合适的事件处理程序, Firefox，NS支持。
      home()	显示浏览器的主页，Firefox，NS支持。
      releaseEvents()	指定不再捕捉的事件类型, Firefox，NS支持。
      routeEvent()	将Event对象传递给下一个对它感兴趣的对象的合适的事件处理程序, Firefox，NS支持。
      stop()	模拟对浏览器Stop按钮的点击, Firefox，NS支持。
      navigate()	装载并显示出指定的URL, IE支持。
      onblur	当窗口失去焦点时调用该事件的处理程序。
      onerror	当发生JavaScript错误时调用该事件的处理程序。
      onfocus	当窗口获得焦点时调用该事件的处理程序。
      onload	当文档(或框架集)被完全装载进来时调用该事件的处理程序。
      onmove	当移动窗口时调用该事件的处理程序,仅NS支持。
      onresize	当调整窗口大小时调用该事件的处理程序。
      onunload	当浏览器离开当前文档(或框架集)时调用该事件的处理程序。

       

      最常用要数open方法和close方法了，我们先来看一下open方法的详细定义：
      
      window.open(url, target, style); 
      url：指定需要打开的文件的链接。
      target：指定要打开窗口的位置，一般有几个可选属性：_blank在新窗口打开页面，_self在当前窗口打开页面，_top在顶层窗口打开页面，另外还可以指定其他已命名的窗口。
      style：指定窗口显示的风格，因为它的参数众多，且都是可选的，我们用一个例子来说明它。假设我们指定style="height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300"，说明我们打开的新窗口的风格是：（高度100，宽度400，不显示工具栏，菜单栏，滚动条，URL栏，状态栏，并且不可改变大小，左上角在屏幕上的位置是(100，300)）
      返回值：该方法返回对新窗口的引用。这个方法颇受争议，万恶的弹出窗口就是它了。
      close 方法就比较简单，它主要用来关闭指定引用的窗口。
      现在，我们先来看一个例子。

      [javascript]  view plain copy

       

      1. var newWindow;  
      2. function openWindow(){  
      3.     newWindow = window.open("", "_blank", "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300");  
      4. }  
      5. function closeWindow(){  
      6.     if(newWindow){  
      7.         newWindow.close();  
      8.     }  
      9. }  
      openWindowcloseWindow

       

      如果你想轮询的执行某任务，比如在AJAX的程序中，轮询的检查服务器上的数据更新，或是希望经过指定的时间去执行某个操作，这个时候我们就需要用到setTimeout,setInterval哥俩了。而clearTimeout，clearInterval 专门用来取消它们。

      先来看看setTimeout函数的定义：

      功能：用于在指定的毫秒数后调用函数或计算表达式。
      语法：setTimeout(code,millisec)
      参数：

      • code：在定时时间到时要执行的JavaScript代码串。
      • millisec：设定的定时时间，用毫秒数表示。
      返回值：定时器的ID值，可用于clearTimeout()方法停止指定的定时器。

       

      注：setTimeout()只执行code一次。如果要多次调用，可使用setInterval()或者让code自身再次调用setTimeout()。

       

      setInterval函数的定义如下：

      功能：按照指定的周期（以毫秒计）来调用函数或计算表达式。
      语法：setInterval(code,millisec)
      参数：

      • code：在定时时间到时要执行的JavaScript代码串。
      • millisec：设定的定时时间，用毫秒数表示。
      返回值：定时器的ID值，可用于clearInterval()方法停止指定的定时器。

       

      注：setInterval()方法会不停地调用函数，直到用clearInterval()终止定时或窗口被关闭。

       

      我们来看一个例子，下面有两个个进度条，当点击startTimeout的时候，第一条进度条的长度会逐渐的增加，当点击endTimeout的时候，它就会停下来。当点击startInterval的时候，第二条进度条的长度会逐渐的增加，当点击endInterval之后，它也会停下来。
       
      startTimeoutendTimeout 
      
       
      startIntervalendInterval 
      这两个特效的实现，我们就用到了setInterval和setTimeout。以下是它的实现源码。
      [javascript]  view plain copy

       

      1. function progress(id){  
      2.     var bar = document.getElementById(id);  
      3.     var len = parseInt(bar.style.width);  
      4.     if(len > 300){  
      5.         len = 10;  
      6.     }     
      7.     bar.style.width = len + 1 + 'px';  
      8. }  
      9.   
      10. var timeoutHandler, intervalHandler;  
      11.   
      12. function startTimeout(){  
      13.     //每执行一次，progressBar1的width加1。  
      14.     progress('progressBar1');  
      15.     //100ms 后，调用startTimeout  
      16.     timeoutHandler = window.setTimeout(startTimeout, 100);  
      17. }  
      18.   
      19. function startInterval(){  
      20.     //每隔100ms，progressBar2的with加1.  
      21.     intervalHandler = window.setInterval("progress('progressBar2')", 100);  
      22. }  
      23.   
      24. function endTimeout(){  
      25.     clearTimeout(timeoutHandler);  
      26. }  
      27. function endInterval(){  
      28.     clearInterval(intervalHandler);  
      29. }  

       

      moveBy()，moveTo()，resizeBy()，resizeTo()，几个方法尽管用的不多，但是却很有意思，它可以控制窗口的大小和位置，我们使用一个例子来看它们的用法：

      [javascript]  view plain copy

       

      1. function moveWindow(){  
      2.     // 打开一个新的空白窗口。  
      3.     var ow = window.open("", "_blank", "height=300, width=500, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300");  
      4.     //1秒钟后，把它向下和向右分别移动100个像素。  
      5.     setTimeout(function(){  
      6.         ow.document.writeln("我向下和向右分别移动100个像素<br />");  
      7.         ow.moveBy(100, 100)  
      8.     }, 1000);  
      9.     //2秒钟后，把它左上角移到坐标(100, 100)处。  
      10.     setTimeout(function(){  
      11.         ow.document.writeln("我左上角的坐标是(100, 100)<br />");  
      12.         ow.moveTo(100, 100)  
      13.     }, 2000);     
      14.     //3秒钟后，把它的宽度减少100，高度增加100。  
      15.     setTimeout(function(){        
      16.         ow.document.writeln("我的宽度减少了100，高度增加了100。<br />");  
      17.         ow.resizeBy(-100, 100)  
      18.     }, 3000);     
      19.     //4秒钟后，把它的宽度和高度设置成300。  
      20.     setTimeout(function(){        
      21.         ow.document.writeln("我的宽度和高度和宽度是300。<br />");  
      22.         ow.resizeTo(300, 300)  
      23.     }, 4000);  
      24.     //5秒钟后，关闭弹出窗口。  
      25.     setTimeout(function(){        
      26.         ow.document.writeln("我要被关闭了。<br />");  
      27.         ow.document.close();  
      28.         ow.close();  
      29.     }, 5000);     
      30. }  
      moveWindow 
      在这个例子中，我们用到了一个还没学习的方法document.writeln，这个方法在后面会有介绍，它的主要功能是将一个或多个指定的字符串插入当前正在解析的文档中或插入由open()方法打开的文档流中。

       

      说到这里，我们不得不提一下浏览器中的对话框，它有三种，就是提示框，确认框，和输入框。使用alert()，confirm()，prompt()函数可以显示它们，由于它们比较简单，而篇幅有限，我们就用一个例子来介绍他们。

      [javascript]  view plain copy

       

      1. function showAlert(){  
      2.     alert('欢迎你光临我的博客！');  
      3. }  
      4. function showConfirm(){  
      5.     if(confirm("请确认你的操作")){  
      6.         alert('你确认了你的操作。');  
      7.     }else{  
      8.         alert('你取消了你的操作。');  
      9.     }  
      10. }  
      11. function showPrompt(){  
      12.     var str = prompt("请你输入Something！");  
      13.     alert("你输入的内容是:" + str);  
      14. }  
      showAlertshowConfirmshowPrompt

       

       

      Top

       

   2. Event 对象

      事件模型使得浏览器能响应用户的动作，现在的浏览器都实现了强壮的事件模型，使脚本可以更加智能地处理事件。遗憾的是，不同浏览器的下事件模型是不一致的，对于不同模型下的事件对象拥有的属性和方法也是不一致的，下面列出了不同模型下事件的属性和方法。

      IE事件模型

      altKey, ctrlKey, shiftKey	一个布尔值,指定事件发生时,Alt, Ctrl, Shift键是否被按下并保持住了。
      keyCode	对于键盘事件,该属性声明了被敲击的键生成的Unicode字符码。
      reason	对于datasetcomplete事件,reason存放数据传输事件的状态码,0(成功)、1(失败)、2(错误)。
      type	一个字符串,说明了事件的类型。
      returnValue	如果设置了该属性,它的值比事件处理程序真正的返回值优先级高。
      cancelBubble	如果事件处理程序想阻止事件传播到包容对象,必须把该属性设置成true。
      fromElement	对于mouseover和mouseout事件,该属性引用移出鼠标的元素。
      toElement	对于mouseover和mouseout事件,该属性引用移入鼠标的元素。
      srcElement	对生成事件的Window对象、Document对象或HTMLDocument对象的引用。
      srcFilter	对于filterchange事件,该属性声明改变的过滤器。
      clientX, clientY	声明了事件发生的位置相对于浏览器页面的X坐标和Y坐标。
      offsetX, offsetY	发生事件的地点在事件源元素的坐标系统中的X坐标和Y坐标。
      x, y	事件发生的位置的x坐标和y坐标(IE中它们声明了相对于用CSS动态定位的最内层包容元素的X坐标和Y坐标)。
      screenX, screenY	事件发生的地点相对于屏幕的X坐标和Y坐标。
      button	对于鼠标事件,button事件声明了被按下的鼠标按钮或按钮。

       

      Firefox, NS事件模型

      type	一个字符串,说明了事件的类型。
      width	只能由resize的事件设置,声明了调整过窗口的新高度或框架的新宽度。
      height	只能由resize的事件设置,声明了调整过窗口的新高度或框架的新高度。
      which	"对于键盘事件和鼠标事件来说,which声明的是按下或放开的键或鼠标按钮。
      target	对生成事件的Window对象、Document对象、Layer对象或HTMLDocument对象的引用。
      modifiers	声明了事件发生时按下并保持住的组合键,NS6 未定义该属性。
      layerX, layerY	事件相对于包容图层的X坐标和Y坐标。
      pageX, pageY	事件发生的位置相对于浏览器页面的X坐标和Y坐标。
      x, y	事件发生的位置的x坐标和y坐标(在NS4中其等价于layerX和layerY)。
      screenX, screenY	事件发生的地点相对于屏幕的X坐标和Y坐标。

       

      浏览器之间的斗争可害苦了我们这些开发者，为了兼容不同的浏览器，我们必须加入额外的判断语句。我们来看几个例子。 
      例子1：得到事件源元素，并得到事件发生的坐标。

      [javascript]  view plain copy

       

      1. function findEventSource(e){  
      2.     var evt = e.srcElement || e.target;  
      3.     var x = e.pageX || e.x;   
      4.     var y = e.pageY || e.y;  
      5.     alert("事件源: "+ evt.innerText + "/n坐标：(" + x + ", " + y + ")");  
      6. }  
      事件源1事件源2

       

      我们还可以动态的为元素绑定特定事件处理程序。不过不同的浏览器支持的函数又是不一致的。IE下支持attachEvent()方法，而Firefox下支持addEventListener()方法。
      attachEvent("eventType",fun)
      eventType是指事件类型,fun是指调用事件的函数
      addEventListener("eventType",fun,flag)
      addEventListener方法的前两个参数和attachEvent方法一样， flag参数则是一个boolean 值，指明该结点是否以DOM中所谓的捕捉模式来侦听事件。对于一个典型的事件侦听器来说，第三个参数应该为false（假）。 
      
      不仅可以为元素添加指定事件的处理程序，而且还可以为指定事件删除指定的处理程序。IE下可以使用detachEvent()方法，而Firefox下可以使用removeEventListener()方法。

      例子2：为元素绑定事件处理程序
      [javascript]  view plain copy

       

      1. var eventTestFunction = function(){  
      2.     alert("事件已经触发，测试成功。");  
      3. }     
      4. //为button MyEventTestButton 绑定事件处理程序。  
      5. function attachEventForTestButton(){      
      6.     //getElementById 方法可以拿到指定ID 的元素，将在DOM模型中介绍。  
      7.     var btn = document.getElementById('MyEventTestButton');  
      8.     if(btn.addEventListener){  
      9.         btn.addEventListener('click', eventTestFunction, false);  
      10.     }else{  
      11.         btn.attachEvent('onclick', eventTestFunction);  
      12.     }  
      13.     alert("事件绑定成功。");     
      14. }  
      15.   
      16. //为button MyEventTestButton 删除事件处理程序。  
      17. function detachEventForTestButton(){          
      18.     //getElementById 方法可以拿到指定ID 的元素，将在DOM模型中介绍。  
      19.     var btn = document.getElementById('MyEventTestButton');  
      20.     if(btn.removeEventListener){  
      21.         btn.removeEventListener('click', eventTestFunction, false);  
      22.     }else{  
      23.         btn.detachEvent('onclick', eventTestFunction);  
      24.     }  
      25.     alert("事件绑定取消。");     
      26. }  
      绑定事件取消绑定测试事件绑定

       

      Top
   3. XMLHTTPRequest组件

      XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用；但是，我们仍然很有必要理解这个对象的详细工作机制。下表列出了它的所有属性和方法。

      abort()	停止当前请求。
      getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回。
      getResponseHeader()	格式：getResponseHeader(header),返回指定名称的HTTP响应头。
      open()	格式：open(method, url, async)。method指示HTTP请求方式，参数可以是GET,POST或PUT, url指示请求资源的地址，参数可以是相对于URL或绝对值URL，async参数是否建立异步连接，默认为true, 建立对服务器的调用。
      send()	格式：send(content)，向服务器发送请求。
      setRequestHeader()	格式：setRequestHeader(header, value)，把指定首部设置为所提供的值，在设置任何首部之前必须先调用open()。
      onreadystatechange	用于指定状态改变时的事件处理函数，每个状态都会触发这个事件处理器。
      readyState	请求的状态。有5个可取值：0=未初始化、1=正在加载、2=已加载、3=交互中、4=完成。
      responseText	服务器的响应,表示一个串。
      responseXML	服务器的响应,表示为XML.这个对象可以解析为一个DOM对象。
      status	服务器响应的HTTP状态码。
      statusText	HTTP状态码的相应文本。

       

      为了使大家更好的理解它的原理和使用方法，我们跟着例子来学习。
      例1：创建XMLHTTPRequest对象。

      [javascript]  view plain copy

       

      1. // 为了兼容不同的浏览器，以下给出了创建XMLHttpRequest对象的方法。  
      2. function createXhrObject(){  
      3.     var _msxml_progid = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'], http;  
      4.     try{  
      5.         http = new XMLHttpRequest();  
      6.     }catch(e){  
      7.         for(var i=0; i<this._msxml_progid.length; ++i){  
      8.             try {                     
      9.                 http = new ActiveXObject(this._msxml_progid[i]);  
      10.                 break;  
      11.             } catch(ignore){}  
      12.         }  
      13.           
      14.     }  
      15.     return http;          
      16. }  
      例2：从指定的网站上获取信息。
      [javascript]  view plain copy

       

      1. function getGoogleInfo(){     
      2.     var xmlHttp = createXhrObject();      
      3.     var url = "/zhiqiangzhan/archive/2009/10/13/4663506.aspx";  
      4.     xmlHttp.open('HEAD', url, true);  
      5.     xmlHttp.onreadystatechange = function(){  
      6.         switch(xmlHttp.readyState){  
      7.             case 0:  
      8.                 alert('未初始化！');  
      9.                 break;  
      10.             case 1:  
      11.                 alert('正在加载！');  
      12.                 break;  
      13.             case 2:  
      14.                 alert('已加载！');  
      15.                 break;  
      16.             case 3:  
      17.                 alert('交互中！');  
      18.                 break;  
      19.             default:  
      20.                 var headers = xmlHttp.getAllResponseHeaders();  
      21.                 var str = headers;  
      22.                   
      23.                 if(xmlHttp.status == 200){  
      24.                     str += "Response:/n" + xmlHttp.responseText;  
      25.                 }else{  
      26.                     str += xmlHttp.status + " " + xmlHttp.statusText;  
      27.                 }  
      28.                 alert(str);  
      29.                 alert('已完成！');  
      30.                 break;                
      31.         }         
      32.     };  
      33.     xmlHttp.send(null);  
      34. }  
      获取网站信息

       

      Top
   4. Document对象

      Document对象也是最常用的对象之一，下表列出了它的常用属性和方法，不过此处列出的方法和属性都不是太常用，下篇我们将介绍DOM（文档对象模型），到时我们还将介绍document作为文档对象的另外的属性和方法，那些方法和属性可比现在的这些实用的多。

      alinkColor	一个字符串属性,指定了document中被激活的链接的颜色。
      anchors	一个Anchor对象数组,每个元素代表了文档中的一个锚。
      applets	一个Applet对象数组。
      bgColor	一个字符串,它是与文档关联在一起的cookie的值。
      domain	一个字符串,它指定了文档所属的Internet域。
      embeds	一个对象数组,每个元素表示一个由<embed>标记嵌入文档的数据。
      fgColor	一个字符串属性,指定document文本的默认颜色。
      forms	一个数组,元素是Form对象,每个元素代表出现在document中的一个表单。
      images	一个数组,元素是Image对象,每个元素代表用<img>嵌入文档的一个图像。
      lastModified	一个只读字符串,声明了最后一次修改文档的日期。
      linkColor	一个字符串属性,指定了文档中未被访问过的链接的颜色。
      links	一个数组,元素是Link对象,每个元素代表了文档中出现过的一个超文本链接。
      location	一个Location对象,含有当前文档的完整URL,是Window.location的同义词，不建议使用。
      plugins	数组embeds[]的同义词,不推荐使用。
      referrer	一个只读字符串,含有链接到当前文档的文档的URL(如果存在)。
      title	一个只读字符串,指定了当前文档的标题。
      URL	一个只读字符串,声明了文档的URL。
      vlinkColor	一个字符串属性,指定了document中已经访问过的链接的颜色。
      activeElement	一个只读属性,引用文档中当前活动的输入元素(即具有输入焦点的元素)，仅IE支持。
      all	一个数组,元素是文档中包含的所有元素，仅IE支持。
      charset	文档采用的字符集，仅IE支持。
      children	一个数组,元素是文档的所有直接子元素,以他们在源代码中的顺序存放，仅IE支持。
      defaultCharset	文档采用的默认字符集，仅IE支持。
      expando	如果将expando设置成false,可以阻止客户端对象的扩展，仅IE支持。
      parentWindow	包含文档的窗口，仅IE支持。
      readyState	文档装载的状态，仅IE支持。它有4个可用的值: uninitialized(还没有开始装载文档) loading(正在装载文档) interactive(装载的文档已经足够与用户进行交互) Complete(文档已经装载完毕)
      clear()	擦去文档的内容,反对使用。
      close()	关闭由open方法打开的文档流。
      open()	打开一个可供写入文档内容的流。
      write()	将一个或多个指定的字符串插入当前正在解析的文档中或插入由open()方法打开的文档流中。
      writeln()	与write()方法相似,只是在输入的字符串中插入一个换行符。
      captureEvents()	请求指定类型的事件，Firefox支持。
      getSelection()	返回当前选中的文档文本。
      releaseEvents()	停止捕捉指定类型的事件。
      routeEvent()	根据捕捉到的事件找到下一个与之相关的元素。
      elementFromPoint()	返回位于指定地点(X坐标,Y坐标)的元素，仅是IE。

       

      上面我们已经演示了writeln()方法，用于往文档中写入字符串，write()方法也类似，下面我们跟着例子来学习document的部分属性和方法

      [javascript]  view plain copy

       

      1. function showDemo(){  
      2.     // 打开一个新的空白窗口。  
      3.     var ow = window.open("", "_blank", "height=300, width=500, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300");  
      4.     // 设置标题  
      5.     setTimeout(function(){        
      6.         ow.document.write("设置页面的标题，同Blog页面标题一致。<br />");  
      7.         ow.document.title = document.title;       
      8.     }, 1000);  
      9.     // 设置字体颜色。  
      10.     setTimeout(function(){        
      11.         ow.document.write("设置文档字体颜色，红色。<br />");  
      12.         ow.document.fgColor = '#ff0000';          
      13.     }, 2000);     
      14.     // 设置背景颜色。  
      15.     setTimeout(function(){        
      16.         ow.document.write("设置文档背景颜色，黑色。<br />");  
      17.         ow.document.bgColor = '#000000';          
      18.     }, 3000);     
      19.     // 关闭文档输入。  
      20.     setTimeout(function(){        
      21.         ow.document.write("关闭文档输入。<br />");  
      22.         ow.document.close();          
      23.     }, 4000);  
      24.     // 文档关闭后，再次写入数据，原来的数据将被清空。  
      25.     setTimeout(function(){        
      26.         ow.document.write("文档关闭后，再次写入数据，原来的数据将被清空。。<br />");  
      27.         ow.document.close();          
      28.     }, 6000);  
      29. }  
      showDemo

       

      Top
   5. Screen 对象

      Screen 对象提供有关显示器的信息。常用来判别用户显示器的分别率，对象的所有属性都是只读的。

      availHeight, availWidth	声明了显示web浏览器的屏幕的可用高度和宽度,以象素计。
      availLeft, availTop	声明了屏幕最左侧的X坐标和Y坐标,这个坐标不是分配给暂存特性的空间的坐标。
      colorDepth	声明了浏览器分配的颜色数的以2为底的对数,可用于显示图像。
      pixelDepth	声明显示浏览器屏幕的颜色深度,以每象素的位数计。
      height, width	声明了显示web浏览器的屏幕的高度和宽度,以象素计。

       

      以下代码演示了如何显示用户的分辨率

      [javascript]  view plain copy

       

      1. //显示用户的分辨率  
      2. function showResolution(){  
      3.     alert("您当前电脑的分辨率是: " + screen.width + "×" + screen.height);  
      4. }  
      showResolution

       

       

   6. Navigator对象

      使用Navigator对象可以查看用户正在使用的浏览器的信息。

      appCodeName	一个只读字符串,声明了浏览器的代码名。
      appName	一个只读字符串,声明了浏览器的名字。
      appVersion	一个只读字符串,声明了浏览器的平台和版本信息。
      CookieEnabled	一个只读布尔值，指示是否支持Cookie。
      language	一个只读字符串,声明了浏览器版本使用的默认语言，Firefox，NS支持。
      mimeTypes	一个MimeType对象的数组,其中每个元素代表浏览器支持的一种MIME类型。
      platform	一个只读字符串,声明了运行浏览器的操作系统和(或)硬件平台。
      systemLanguage	一个只读字符串,声明了浏览器版本使用的默认语言，IE支持。
      userAgent	一个只读字符串,声明了浏览器用于HTTP请求的用户代理头的值。
      userLanguage	一个只读字符串,声明了用户想使用的语言，IE支持。
      plugins	一个Plugin对象的数组,其中每个元素代表浏览器已经安装的插件。

      
      
      [javascript]  view plain copy

       

      1. function showNavigatorInfo(){  
      2.     var result = '';  
      3.     for(var p in navigator){  
      4.         result += p + ': ' +  navigator[p] + '/n';  
      5.     }  
      6.     alert(result);  
      7. }  
      显示当前浏览器的信息
      
      下面的代码常用来判别浏览器的类型，既可以显示浏览器的型号，还可以显示浏览器的版本。 
      
      [javascript]  view plain copy

       

      1. var navigatorDetector = function() {  
      2.     var o = {  
      3.         ie:0,  
      4.         opera:0,  
      5.         gecko:0,  
      6.         webkit: 0,  
      7.         mobile: null,  
      8.         air: 0,  
      9.         caja: 0  
      10.     }, ua = navigator.userAgent, m;  
      11.       
      12.     if ((/KHTML/).test(ua)) {  
      13.         o.webkit=1;  
      14.     }  
      15.     m=ua.match(/AppleWebKit//([^/s]*)/);  
      16.     if (m&&m[1]) {  
      17.         o.webkit=parseFloat(m[1]);  
      18.         if (/ Mobile///.test(ua)) {  
      19.             o.mobile = "Apple";   
      20.         } else {  
      21.             m=ua.match(/NokiaN[^//]*/);  
      22.             if (m) {  
      23.                 o.mobile = m[0];   
      24.             }  
      25.         }  
      26.         m=ua.match(/AdobeAIR//([^/s]*)/);  
      27.         if (m) {  
      28.             o.air = m[0];   
      29.         }  
      30.     }  
      31.     if (!o.webkit) {   
      32.         m=ua.match(/Opera[/s//]([^/s]*)/);  
      33.         if (m&&m[1]) {  
      34.             o.opera=parseFloat(m[1]);  
      35.             m=ua.match(/Opera Mini[^;]*/);  
      36.             if (m) {  
      37.                 o.mobile = m[0];   
      38.             }  
      39.         } else { // not opera or webkit  
      40.             m=ua.match(/MSIE/s([^;]*)/);  
      41.             if (m&&m[1]) {  
      42.                 o.ie=parseFloat(m[1]);  
      43.             } else {   
      44.                 m=ua.match(/Gecko//([^/s]*)/);  
      45.                 if (m) {  
      46.                     o.gecko=1;   
      47.                     m=ua.match(/rv:([^/s/)]*)/);  
      48.                     if (m&&m[1]) {  
      49.                         o.gecko=parseFloat(m[1]);  
      50.                     }  
      51.                 }  
      52.             }  
      53.         }  
      54.     }  
      55.     m=ua.match(/Caja//([^/s]*)/);  
      56.     if (m&&m[1]) {  
      57.         o.caja=parseFloat(m[1]);  
      58.     }      
      59.     return o;  
      60. }();  
      61.   
      62. function getNavigatorInfo(){  
      63.     var str = '';  
      64.     for(var p in navigatorDetector){  
      65.         str +=  p + ': ' + navigatorDetector[p] + '/n';  
      66.     }  
      67.     alert(str);  
      68. }  
      运行代码

       

      Top
   7. Location 对象

      Location提供了关于当前打开窗口或者特定框架的url信息。

      hash	一个可读可写的字符串,指定了当前URL中的锚部分,包括前导散列符(#)。
      host	一个可读可写的字符串,指定了当前URL中的主机名和端口部分。
      hostname	一个可读可写的字符串,指定了当前URL中的主机名部分。
      href	一个可读可写的字符串,它声明了当前显示文档的完整URL。
      pathname	一个可读可写的字符串,声明了当前URL中的路径部分。
      port	一个可读可写的字符串,声明了当前URL中的端口部分。
      protocol	一个可读可写的字符串,声明了当前URL中的协议部分。
      search	一个可读可写的字符串,声明了当前URL中的查询部分。
      reload()	从缓存或服务器中再次把当前文档装载进来。
      replace()	用一个新文档替换当前文档,而不用在浏览器的会话历史中生成一个新的记录。

      显示Location信息
      [javascript]  view plain copy

       

      1. function showLocationInfo(){  
      2.     var str = "";  
      3.     for(var p in location){  
      4.         str += p + ': ' + location[p] + '/n';  
      5.     }  
      6.     alert(str);  
      7. }  
      显示Location信息

       

   8. HTML标记通用属性

      对于每个HTML标记，他们一般具有如下属性和方法

      all	该元素包含的所有元素的完整列表,以他们出现的顺序存放,该属性的行为与Document.all[]属性的行为一致,仅IE支持。
      children	一个数组,元素是文档的所有直接子元素,以他们在源代码中的顺序存放，IE支持。
      className	一个可读可写的字符串,声明了元素的class性质的值。
      document	包含该元素的document对象的引用，仅IE支持。
      id	一个可读可写的字符串,声明了id性质的值。
      innerHTML	一个可读可写的字符串,声明了元素含有的HTML文本,不包括元素自身的开始标记和结束标记。
      innerText	一个可读可写的字符串,声明了元素含有的纯文本,不包括元素自身的开始标记和结束标记。
      lang	一个可读可写的字符串,声名了element元素的lang的值。
      offsetHeight	元素和它的内容的高度,仅IE支持。
      offsetLeft	元素element的X坐标,相对于offsetParent指定的包容元素，IE支持。
      offsetParent	定义了声名坐标系统的包容元素，IE支持。
      offsetTop	元素element的Y坐标,相对于offsetParent指定的包容元素，仅IE支持。
      offsetWidth	元素和它的内容的宽度，仅IE支持。
      outerHTML	一个可读可写的字符串,声明了一个元素的HTML文本,其中包括元素自身的开始标记和结束标记, IE支持。
      outerText	一个可读可写的字符串,声明了一个元素的纯文本,其中包括元素自身的开始标记和结束标记, IE支持。
      parentElement	当前元素的直接父元素,该属性是只读的。
      sourceIndex	元素在包容它的Docuement.all[]数组中的下标, IE支持。
      style	元素的内联CSS样式性质。
      tagName	一个只读字符串,声明定义element的HTML标记的名字。
      title	一个可读可写的字符串,声明了定义element的HTML标记的title性质值。
      contains()	判断当前元素是否含有指定的元素。
      getAttribute()	获取一个命名性质的值。
      handleEvent()	把Event对象传递给适当的事件处理程序。
      insertAdjacentHTML()	把HTML文本插入到与当前元素邻接的文档中。
      insertAdjacentText()	把纯文本插入到与当前元素邻接的文档中。
      removeAttribute()	从元素中删除一个属性和它的值。
      scrollIntoView()	滚动文档,使该元素出现在窗口的顶部或底部。
      setAttribute()	设置元素的性质值。
      onclick	当用户点击该元素时调用。
      ondbclick	当用户双击该元素时调用。
      onhelp	当用户请求帮助(F1)时调用,仅在IE中有效)。
      onkeydown	当用户按下一个键时调用。
      onkeypress	当用户按下一个键或放开一个键时调用。
      onkeyup	当用户放开一个键时调用。
      onmousedown	当用户按下一个鼠标按钮时调用。
      onmousemove	当用户移动鼠标时调用。
      onmouseout	当用户把鼠标移开当前元素时调用。
      onmouseover	当用户把鼠标移过一个元素时调用。
      onmouseup	当用户放开一个鼠标按钮时调用。

       

      Top

       

   9. Form 对象

       

      action	表单的处理页面。
      elements	一个数组,元素是表单中的输入元素。
      encoding	可读可写的字符串,提交表单时传输数据的编码形式。
      length	表单中的元素个数,等价于elements.length。
      mothod	一个可读可写的字符串,它指定了提交表单数据所采用的方法。
      name	声名表单的名字,该属性可读可写。
      target	一个可读可写的字符串,指定了要显示提交表单的结果的窗口或框架的名字。
      reset()	把表单的所有元素重置为它们的默认值。
      submit()	提交表单。

       

      Top
   10. Input 对象

        

       checked	一个可读可写的布尔值,声明了Checkbox元素和Radio元素当前是否被选中。
       defaultChecked	一个只读的布尔值,声明了Checkbox或Radio的初始状态。
       defaultValue	声明了在该表单元素中出现的初始文本,在重置表单时可以使用这个值来恢复元素。
       form	一个只读属性,引用含有该元素的Form对象。
       length	对于Select表单元素,这个属性声明的是options[]数组中存放的选项数。
       name	一个只读的字符串,声明了该元素的名字。
       options	对于Select表单元素来说,这个数组存放的是Option对象。
       selectedIndex	对于Select来说,这个整数声明了当前选中的Select对象的选项。
       type	一个只读字符串,声明了表单元素的类型。
       value	一个字符串属性,声明了在提交表单时提交给服务器的值。
       blur()	一个字符串属性,声明了在提交表单时提交给服务器的值。
       click()	在表单元素上模拟鼠标点击。
       focus()	将键盘焦点赋予该元素。
       select()	对于显示可编辑文本的表单元素来说,选中其中出现的所有文本。
       onblur	将键盘焦点从元素中移开。
       onchange	对于非按钮表单元素来说,当用户输入了一个新值或选择了一个新值时调用。
       onclick	对于那些按钮表单元素来说,当用点击或选择了该按钮时调用。
       onfocus	当用户把键盘焦点给予该元素时调用。

        

       Top

        

   11. Option 对象

        

       defaultSelected	一个布尔值,声明在创建包含该属性的Select对象时,该选项是否被选中。
       index	一个只读整数,声明了选项在包含它的Select对象的options[]数组中的位置和下标。
       selected	一个可读可写的布尔值,声明了一个选项当前是否被选中了。
       text	一个字符串,声明了显示给用户的选项文本。
       value	一个可读可写的字符串,声明了如果在提交表单时option处于选中的状态,要传递给服务器的文本。

        

       Top
   12. Image 对象

        

       border	一个整数,声明了图像边线的宽度。
       complete	一个只读的布尔值,声明图像是否已经完全装载进来了。
       height	一个整数,声明了图像的高度,以象素计。
       length	表单中的元素个数,等价于elements.length。
       hspace	一个整数,声明了插入到图像左右的水平距离。
       lowsrc	声明了替代图像(一般较小)的URL,当用户的浏览器在低分辨率的显示器上运行时就显示该图像。
       name	声明图片的名称。
       src	声明图片的URL地址。
       vspace	一个整数,声明了插入到图像上下的垂直距离。
       width	一个整数,声明了图像的宽度,以象素计。
       onabort	如果用户放弃装载图像,则调用该事件处理程序。
       onerror	如果在装载图像过程中发生了错误,则调用该事件处理程序。
       onload	在成功的装载了图像时调用该事件处理程序。

        

       Top
   13. Link 对象

        

       hash	一个可读可写的字符串,指定了Link对象的锚部分,包括前导散列符(#)。
       host	一个可读可写的字符串,指定了Link的URL的主机名和端口部分。
       hostname	一个可读可写的字符串,指定了Link的URL的主机名部分。
       href	一个可读可写的字符串,指定了Link的完整URL。
       pathname	一个可读可写的字符串,声明了Link的URL的路径部分。
       port	一个可读可写的字符串,声明了Link的URL的端口部分。
       protocol	一个可读可写的字符串,声明了Link的URL的协议部分。
       search	一个可读可写的字符串,声明了Link的URL的查询部分。
       target	一个可读可写的字符串,指定了显示链接文档的Window对象的名称。
       text	声明了出现在链接的标记<a>和</a>之间的文本，仅NS支持。

       
       借助Link的属性，我们可以用来分析url的内容。
       [javascript]  view plain copy

        

       1. function analyzeURLInfo(){    
       2.     var url = "http://www.google.com:8080/?name=jame&id=13#250";  
       3.     var el = document.createElement('a');  
       4.     el.href = url;  
       5.     var str = "hash: " + el.hash + '/n';      
       6.     str += "host: " + el.host + '/n';  
       7.     str += "pathname: " + el.pathname + '/n';  
       8.     str += "protocol: " + el.protocol + '/n';  
       9.     str += "search: " + el.search + '/n';  
       10.     str += "target: " + el.target + '/n';     
       11.     alert(str);  
       12. }  
       URL分析

        

       Top
   14. Anchor对象

        

       name	Anchor对象的名字,该属性的值由<a>的name性质设置。
       text	该属性声明了锚标记<a>和</a>之间的纯文本(如果存在)。

        

       Top

转载于:https://www.cnblogs.com/zhaoxd/archive/2013/05/31/3110244.html