JavaScript如何获取元素？

最新推荐文章于 2023-05-06 22:22:03 发布

原以为_Prophet

最新推荐文章于 2023-05-06 22:22:03 发布

阅读量109

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/L00H07Y02/article/details/116167425

版权

JavaScript如何获取元素？

1.根据id获取元素

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

返回值是一个元素对象

<body>
<input type="button" id="btn">
<script>
    var obj = document.getElementById("btn");
    obj.onclick = function () {
      
        alert("小仙女");
    };
</script>
</body>

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

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

返回值是一个伪数组


<body>
<input type="button" id="btn">
<div id="dv">
    <p>哈哈</p>
    <p>嘿嘿</p>
</div>
<script>
    document.getElementById("btn").onclick = function () {
        var pObj = document.getElementsByTagName("p");
        for (var i = 0; i < pObj.length; i++) {
            pObj[i].innerText = "一起";
        }
    };
</script>

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

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

返回值是一个伪数组


<script>
    document.getElementById("btn").onclick = function () {
        var inputs = document.getElementsByName("name1");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].value = "我是小仙女";
        }
    };

</script>

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

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

返回值是一个伪数组


<script>
    document.getElementById("btn").onclick = function () {
        var inputs = document.getElementsByClassName("text");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].value = "小仙女";
        }
    };

</script>