美文网首页
DOM三种获得节点的方法

DOM三种获得节点的方法

作者: LOOK_LOOK | 来源:发表于2016-12-23 20:42 被阅读24次

(1)document.getElementById("myHead");

(2)document.getElementsByName("sex");

(3)document.getElementsByTagName("input");

<!DOCTYPE HTML>
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>JavaScript</title>  
</head>  
<body>  
        <form name="Input">
            <table align="center" width="500px" height="50%" border="1">
                <tr>
                    <td align="center" width="100px">
                        学号:
                    </td>
                    <td align="center" width="300px">
                        <input type="text" id=userid name="user" onblur="validate();">
                        <div id=usermsg></div>
                    </td>
                </tr>
                <tr>
                    <td align="center" width="100px">
                        姓名:
                    </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="30%">
                        年龄:
                    </td>
                    <td align="center" width="300px">
                        <input type="text" name="age">
                    </td>
                </tr>
                <tr>
                    <td align="center" width="100px">
                        地址:
                    </td>
                    <td align="center" width="300px">
                        <input type="text" name="addr">
                    </td>
                </tr>

            </table>
        </form>
        <h1 id="myHead" onclick="getValue()">
            看看三种获取节点的方法?
        </h1>
        <p>
            点击标题弹出它的值。
        </p>
        <input type="button" onclick="getElements()"
            value="看看name为sex的节点有几个?" />
        <Br>
        <input type="button" onclick="getTagElements()"
            value="看看标签名为input的节点有几个?" />
            
     <script type="text/javascript">
         function getValue()
          {
              var myH=document.getElementById("myHead");
              alert(myH.innerHTML);
          }
          function getElements()
          {
             var myS=document.getElementsByName("sex");
              alert(myS.length);
          }

          function getTagElements()
          {
              var myI=document.getElementsByTagName("input");
              alert(myI.length);
          }
         
     </script>        

    </body>
</html>

相关文章

  • DOM三种获得节点的方法

    (1)document.getElementById("myHead"); (2)document.getElem...

  • Vue底层原理

    传统开发 在最初的前端开发中,为了完成某个功能,我们需要通过js在HTML页面中获得dom节点,随后获得dom节点...

  • React.createRef

    React.createRef() 概述: 引用(Refs)提供了一个获得DOM节点或者创建在render方法中的...

  • 前端面试题总结(算法)

    javascript递归遍历所有DOM文档节点 javascript递归遍历所有DOM文档节点 HTTP 方法:G...

  • DOM样式操作

    DOM的理念:一切皆节点。方法和属性都是依赖于元素对象存在的。 DOM的节点有 文档节点、元素节点、属性节点、文本...

  • react源码3 - ref

    ref可以获取dom节点或者react元素的实例,一般有三种使用方法 1. string ref 使用方法就是在r...

  • DOM学习总结

    初识DOM DOM是Document Object Model,即是文档对象模型。 文档对象模型有三种节点关系。分...

  • DOM编程艺术笔记/看完才发现书的版本老旧,不过思想是对的

    思想脉络: DOM->一切都是节点->元素节点/属性节点/文本节点->三种主要节点的增删改查 JavaScript...

  • DOM 属性和方法

    1. DOM (文档对象模型)2. 获取元素中的方法 3. 节点和节点之间的关系 4. 动态 DOM 方法 5. ...

  • DOM BOM 常用API小记

    DOM 1.元素节点: 元素节点element: 更精确的获得元素的标签名(全大写) 属性节点attribute:...

网友评论

      本文标题:DOM三种获得节点的方法

      本文链接:https://www.haomeiwen.com/subject/vugkvttx.html