Cpp Lover

整理知识,记录成长轨迹

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

1、getElementById() (:Return an object reference to the identified element)
方法返回对拥有指定 ID 个对象的引用。

如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。

在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯

一的名称,然后就可以用该 ID 查找想要的元素。

2、Document:getElementsByName() (:Return a list of elements with the given name
            Return value is a Nodelist of elements
    )
getElementsByName() 方法可返回带有指定名称的对象的集合。

document.getElementsByName(name)该方法与 getElementById() 方法相似,但是它查询元素的 name

属性,而不是 id 属性。

另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属

性),所以 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

getElementById可与getElementsByTagName连用来取得多层次里面的东西 但是2个getElementById 是不能连用的,因为getElementById 是去全局拿id的!

3、getElementsByTagName() (:Return a list of elements with the given tag name)

方法可返回带有指定标签名的对象的集合。

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素

排列的顺序就是它们在文档中的顺序。
下面是我写的一个小例子:

 

<html>
    
<head>
        
<title>插入</title>
    
</head>
    
<script type="text/javascript">
         
function getValue()
          {
              
var x=document.getElementById("myHeader")
              alert(x.innerHTML)
          }
          
function getElements()
          {
             
var x=document.getElementsByName("sex");
              alert(x.length);
          }

          
function getTagElements()
          {
              
var x = document.getElementsByTagName("input");
              alert(x.length);
          }
         
     
</script>
    
<body>
        
<form name="Input">
            
<table align="center" width="50%" height="50%" border="1">
                
<tr>
                    
<td align="center" width="45%">
                        学号
                    
</td>
                    
<td align="center" width="55%">
                        
<input type="text" id=userid name="user" onblur="validate();">
                        
<div id=usermsg></div>
                    
</td>
                
</tr>
                
<tr>
                    
<td align="center" width="45%">
                        姓名
                    
</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="45%">
                        年龄
                    
</td>
                    
<td align="center" width="55%">
                        
<input type="text" name="age">
                    
</td>
                
</tr>
                
<tr>
                    
<td align="center" width="45%">
                        籍贯
                    
</td>
                    
<td align="center" width="55%">
                        
<input type="text" name="addr">
                    
</td>
                
</tr>

            
</table>
        
</form>
        
<h1 id="myHeader" onclick="getValue()">
            This is a header
        
</h1>
        
<p>
            Click on the header to alert its value
        
</p>
        
<input type="button" onclick="getElements()"
            value
="How many elements named 'sex'?" />
        
<Br>
        
<input type="button" onclick="getTagElements()"
            value
="How many tags named 'input'?" />

    
</body>
</html>

 

posted on 2010-04-28 00:10  quanhailee  阅读(2593)  评论(0编辑  收藏  举报