zoukankan      html  css  js  c++  java
  • getElementById和getElementsByTagName

    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>


  • 相关阅读:
    oracle 数据库服务名怎么查
    vmware vsphere 6.5
    vSphere虚拟化之ESXi的安装及部署
    ArcMap中无法添加ArcGIS Online底图的诊断方法
    ArcGIS中字段计算器(高级计算VBScript、Python)
    Bad habits : Putting NOLOCK everywhere
    Understanding the Impact of NOLOCK and WITH NOLOCK Table Hints in SQL Server
    with(nolock) or (nolock)
    What is “with (nolock)” in SQL Server?
    Changing SQL Server Collation After Installation
  • 原文地址:https://www.cnblogs.com/quanhai/p/1722559.html
Copyright © 2011-2022 走看看