Javascript 获取Dom对象

最新推荐文章于 2024-05-17 13:52:13 发布

挚夕

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量70

点赞数

分类专栏： Javascript 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_52549425/article/details/131438483

版权

Javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

通过ID获取对象引用

document.getElementById(id);

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        function fun(){
            //根据id获取标签对象
            var obj = document.getElementById('userName');
            //获取文本用户名
            var userName = obj.value;
            //正则匹配：5-12位，允许数字、字母、下划线
            var pattern = /^\w{5,12}$/;
            if(pattern.test(userName)){
                alert('用户名合法');
            }else{
                alert('用户名非法');
            }
        }
    </script>
</head>
<body>
    用户名： <input  type="text" id="userName"/>
    <button onclick="fun();">校验</button>
</body>

通过name获取对象集合

document.getElementsByName(name);

例子
点击全选按钮，全勾选复选按钮
点击全不选按钮，全取消复选按钮勾选
点击反选按钮，没有复选按钮状态置反

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkedAll(){
            var hobbies = document.getElementsByName('hobby');
            for(var i = 0; i < hobbies.length; i++) {
                //checkbox 的 checked 属性可读可写
                hobbies[i].checked = true;
            }
        }
        function uncheckedAll(){
            var hobbies = document.getElementsByName('hobby');
            for(var i = 0; i < hobbies.length; i++) {
                //checkbox 的 checked 属性可读可写
                hobbies[i].checked = false;
            }
        }
        function f3(){
            var hobbies = document.getElementsByName('hobby');
            for(var i = 0; i < hobbies.length; i++) {
                //checkbox 的 checked 属性可读可写
                hobbies[i].checked = !hobbies[i].checked;
            }
        }
    </script>
</head>
<body>
    兴趣爱好:
    <input type="checkbox" name="hobby" value="java">java
    <input type="checkbox" name="hobby" value="cpp">c++
    <input type="checkbox" name="hobby" value="python">python
    <br/>
    <button onclick="checkedAll();">全选</button>
    <button onclick="uncheckedAll();">全不选</button>
    <button onclick="f3();">反选</button>

</body>

通过标签名获取对象集合

document.getElementsByTagName(tagName);

例子
使用 getElementsByTagName 实现全选。

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
      function checkedAll(){
          var hobbies = document.getElementsByTagName("input");
          for(var i = 0; i < hobbies.length; i++){
              hobbies[i].checked = true;
          }
      }
  </script>
</head>
<body>
    兴趣爱好:
    <input type="checkbox" value="java">java
    <input type="checkbox" value="cpp">c++
    <input type="checkbox" value="python">python
    <br/>
    <button onclick="checkedAll();">全选</button>
</body>