Document getElementById的用法示例

发布时间:2020-03-09编辑:脚本学堂
本文介绍下,javascript编程中,有关getElementById的用法的一些例子,有需要的朋友参考学习下。

本节内容:
getElementById实例

说明:
getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。
用这个方法基本上可以控制页面所有标签,条件很简单,就是给每个标签分配一个ID号。
返回具有指定ID属性值的第一个对象的一个引用。

语法:
 

Element = document.getElementByIdx_x_x(“id”)

获得ID值=id的所有属性和方法
JS中经常使用它通过控件ID取得元素的值,如一个form里包含text、label等,他们都是FORM的元素,有一个分配的ID,getElementById()是取得这些元素的text值的。
 
例1:
 

复制代码 代码示例:
<html> 
  <head> 
  </head> 
  <body> 
    <input id="inTag" name="inName" value="bijian" type="text" /> 
    <input type="submit" value="获取值" onClick="getValue()"/> 
  </body> 
  <script language="javascript"> 
     window.onload = function run(){    
         var inTag = document.getElementByIdx_x("inTag");  
                  inTag.value = "hello!"; 
     } 
     
     function getValue() { 
              var inTag = document.getElementByIdx_x("inTag"); 
              alert(inTag.value); 
     } 
  </script> 
</html> 
 

例2:
 

复制代码 代码示例:
<html> 
  <head> 
      <title>getElementById-www.jb200.com</title> 
  </head> 
  <body> 
    <a id="mr" href="http://www.baidu.com/">百度</a> 
    <form name="myform"> 
        <input type="button" value="更换连接" onClick="change()"/> 
    </form> 
  </body> 
  <script language="javascript"> 
     function change() { 
             document.getElementByIdx_x("mr").innerHTML = "脚本学堂"; 
             document.getElementByIdx_x("mr").href="http://www.jb200.com/"; 
     } 
  </script> 
</html>  
 

例3:
 

复制代码 代码示例:
<html> 
  <head> 
      <title>getElementById-www.jb200.com</title> 
  </head> 
  <body> 
    <h1 id="divTest" onmousemove="s()" onmouseout="reset()" align="center">这是一个有感觉的标记</h1> 
  </body> 
  <script language="javascript"> 
     function reset() { 
             var divTest = document.getElementByIdx_x("divTest"); 
             divTest.innerHTML = "这是一个有感觉的标记"; 
     } 
     function s()  { 
             var divTest = document.getElementByIdx_x("divTest"); 
             divTest.innerHTML = "老鼠来了"; 
     } 
  </script> 
</html> 
 

例4:
 

复制代码 代码示例:
<html> 
  <head> 
      <title>getElementById4</title> 
  </head> 
  <body> 
    <font ID=main_title size=6><b>虚拟网络世界</b></font> 
  </body> 
  <script language="javascript"> 
     var n = 0; 
     function changefontcolor() { 
             nn=n%4; 
             switch(n) { 
                 case 0: 
                         main_title.color="red"; 
                         break
                 case 1: 
                         main_title.color="green"; 
                         break; 
                 case 2: 
                         main_title.color="blue"; 
                         break; 
                 case 3: 
                         main_title.color="yellow"; 
             } 
             n++; 
     } 
     //定时执行函数每秒钟调用changefontcolor()函数一次,改变大标题的颜色 
     setInterval("changefontcolor()",1000); 
  </script> 
</html> 
 

例5:
 

复制代码 代码示例:
<html> 
  <head> 
      <title>getElementById5</title> 
  </head> 
  <body onKeypress="showCapture()"> 
    <h1 ID="num" align="center">0000</h1> 
  </body> 
  <script language="javascript"> 
       var r; 
       function showNextNum() { 
               var m_num=Math.floor(Math.random()*(3000-1000))+1000; 
               num.innerHTML = m_num; 
       } 
       function showCapture() { 
               clearTimeout(r); 
       } 
     r = setInterval("showNextNum()",100); 
  </script> 
</html>