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>


  • 相关阅读:
    进行编译时提示'error: unrecognized command line option "-std=gnu11"'如何处理?
    linux shell中如何批量添加一行内容到某些文件的末尾?
    linux内核中的电源管理接口
    linux内核中i2c驱动中slave模式接口的调用
    git clone时报错“Failed to connect to 127.0.0.1 port 2453: Connection refused”如何处理?
    第 8 章 输入框和导航组件
    第 7 章 图标菜单按钮组件
    第 6 章 辅组类和响应式工具
    第 5 章 栅格系统
    第 4 章 表单和图片
  • 原文地址:https://www.cnblogs.com/quanhai/p/1722559.html
Copyright © 2011-2022 走看看