JavaScript-获取页面元素的四种常用方法

骑猪看日落 2022-04-18 05:23 572阅读 0赞

## 1.根据id获取元素 ##

### document.getElementById("id属性的值"); ###

返回值是一个元素对象

案例：点击按钮弹框

<body>
        <input type="button" name="" id="btn" value="button">
        <script>
            var btnobj = document.getElementById("btn")
            btnobj.onclick = function () {
                alert("OK!");
            }
        </script>
    </body>

点击按钮后页面弹出提示框。

## 2.根据标签名字获取元素 ##

### document.getElementsByTagName("标签的名字"); ###

返回值是一个伪数组

案例:点击按钮改变多个p标签的文字内容

<body>
        <input type="button" value="button" name="" id="btn">
        <div id="div1">
            <p>abcd</p>
            <p>abcd</p>
            <p>abcd</p>
        </div>
        <script>
            //根据id获取按钮,注册点击事件,添加事件处理函数
            document.getElementById("btn").onclick = function(){
                //根据标签名字获取标签
                var changes = document.getElementById("div1").getElementsByTagName("p");
                 //循环遍历这个数组
                for(var i=0;i<=changes.length;i++){
                    //每个p标签,设置文字
                    changes[i].innerHTML = "ABCD";
                }
            }
        </script>
    </body>

## 3.根据name属性的值获取元素 ##

### document.getElementsByName("name属性的值"); ###

返回值是一个伪数组

案例:点击按钮,改变所有name属性值为name1的文本框中的value属性值

<body>
        <input type="button" value="button" name="" id="btn">
        <input type="text" value="hello" name="name1" id="">
        <input type="text" value="hello" name="name1" id="">
        <input type="text" value="hello" name="name1" id="">
        <script>
            //点击按钮,改变所有name属性值为name1的文本框中的value属性值
            document.getElementById("btn").onclick = function(){
                //通过name属性值获取元素-------表单的标签
                var input1 = document.getElementsByName("name1");
                for(var i=0;i<=input1.length;i++){
                    input1[i].value = "HELLO";
                }
            }
        </script>
    </body>

## 4.根据类样式的名字获取元素  ##

### document.getElementsByClassName("类样式的名字"); ###

返回值是一个伪数组

案例:修改所有文本框的值

<body>
        <input type="button" value="button" name="" id="btn">
        <input type="text" value="hello" class="text">
        <input type="text" value="hello" class="text">
        <input type="text" value="hello" class="text">
        <script>
            //点击按钮,改变所有name属性值为name1的文本框中的value属性值
            document.getElementById("btn").onclick = function(){
                //通过class属性值获取元素-------表单的标签
                var input1 = document.getElementsByClassName("text");
                for(var i=0;i<=input1.length;i++){
                    input1[i].value = "HELLO";
                }
            }
        </script>
    </body>