DOM操作与JavaScript元素获取-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_58562753/article/details/121552425

三个方法优先顺序：优先使用getElementBuId,然后getElementByName,最后getElementByTagName.
因为越往后查询范围越大，可能需要过滤。

*以上三个方法，一定要在页面查询完成之后执行。才能查询到标签对象。
代码从上往下执行。如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //语句 读到就马上执行 此时后面的标签还未执行
        alert(document.getElementById("btn01"));//查询不到对象

        //页面加载完成，就会执行此方法
        window.onload = function (){
            alert(document.getElementById("btn01"));//查询到对象
        }

        function selectAll(){
            var inputs = document.getElementsByTagName("input");
            //因为点击按钮的时候，浏览器已经读完了代码。所以可以查询到对象
            alert(document.getElementById("btn01"));//查询到对象
            for (i = 0 ; i < inputs.length ; i++){
                inputs[i].checked = true;
            }
        }

    </script>
</head>
<body>
        //读到此标签 ， 才创建对象
        <input type="checkbox" >1<br>
        <input type="checkbox" >2<br>
        <button id="btn01" onclick="selectAll">
        全选
        </button>

</body>
</html>

createElement：需要使用JavaScript创建HTML标签，并显示在页面上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //需要使用JavaScript创建HTML标签，并显示在页面上。

        //页面加载完成再执行
        window.onload = function (){
           var divObj = document.createElement("div");
           divObj.innerHTML = "赋值";//在内存中
            //在<body></body>中添加子元素
           document.body.appendChild(divObj);//页面显示
        }

    </script>
</head>
<body>

</body>
</html>


1.getElementById  通过标签的id属性获取标签对象的集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function clickFun(){
            //当我们要对一个标签进行操作时，先要获取这个标签对象。  通过id获取标签对象
            var elementById = document.getElementById("username");
            //获取当前内容
            var usernameText = elementById.value;
            //验证 5-12位 字母，数字，下划线  正则表达式
            var patt = /^\w{5,12}$/;

            var elementById1 = document.getElementById("usernameCheck");
            //innerHTML 表示起始标签和结束标签之间的内容  这个属性可读可写
            elementById1.innerHTML = "用户名合法";
            elementById1.innerHTML = "用户名不合法";
            //test方法用于测试某个字符窜是否匹配规则
            //匹配true 不匹配false
            if(patt.test(usernameText)){
                //alert("true");
                elementById1.innerHTML = "用户名合法 <img src='right.png' width='18' height='18'>";
            }else{
                //alert("false");
                elementById1.innerHTML = "用户名不合法<img src='wrong.png' width='18' height='18'>";
            }
        }

    </script>
</head>
<body>
        用户名<input type="text" id="username" value="a123">
        <span id="usernameCheck" style="color: red"></span>
        <button onclick="clickFun()">校验</button>

</body>
</html>

2.getElementsByName 通过标签的name属性获取标签对象的集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function selectAll(){
            //获取标签对象集合
            var hobbies = document.getElementsByName("hobby");
            //checked表示复选框状态   可读可改
           for (i = 0;i < hobbies.length; i++){
               hobbies[i].checked = true;
           }

        }
        function selectNone(){
            var hobbies = document.getElementsByName("hobby");
            //checked表示复选框状态   可读可改
            for (i = 0;i < hobbies.length; i++){
                hobbies[i].checked = false;
            }

        }
        function selectReverse(){
            var hobbies = document.getElementsByName("hobby");
            //checked表示复选框状态   可读可改
            for (i = 0;i < hobbies.length; i++){
                hobbies[i].checked = !hobbies[i].checked;
                // if(hobbies[i].checked){
                //     hobbies[i].checked = false;
                // }else{
                //     hobbies[i].checked = true;
                // }
            }
        }
    </script>
</head>
<body>
    <input type="checkbox" name="hobby" value="cpp" checked="checked">c++
    <input type="checkbox" name="hobby" value="java" checked="checked">java
    <input type="checkbox" name="hobby" value="JavaScript" checked="checked">JavaScript
    </br>
    <button onclick="selectAll()">全选</button>
    <button onclick="selectNone()">全不选</button>
    <button onclick="selectReverse()">反选</button>

</body>
</html>

3.getElementsByTagName 通过标签类型获取标签对象的集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function selectAll(){
           var inputs = document.getElementsByTagName("input");
           for (i = 0 ; i < inputs.length ; i++){
               inputs[i].checked = true;
           }
        }
    </script>
</head>
<body>
        <input type="checkbox" name="hobby" value="cpp" checked="checked">c++
        <input type="checkbox" name="hobby" value="java" checked="checked">java
        <input type="checkbox" name="hobby" value="JavaScript" checked="checked">JavaScript
        </br>
        <button onclick="selectAll()">全选</button>


</body>
</html>