js操作页面元素(元素操作和定位元素)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="test1" class="bb" value="1"><br>
<input type="text" id="test2" class="bb" value="2"><br>
<input type="text" id="test3" class="bb" value="3"><br>
<a href="" id="link">百度一下</a>
</body>
</html>

获取元素的属性值

获取元素的文本值:

修改元素属性的值:

修改之前如图:

修改之后如图:

定位元素3种方法:

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //窗口绑定就绪事件
        window.onload = function(){
            alert(document.getElementById("test1").value);
        }
    </script>
</head>
<body>
    <input type="text" id="test1" class="bb" value="1"><br>
    <input type="text" id="test2" class="bb" value="2"><br>
    <input type="text" id="test3" class="bb" value="3"><br>
    <a href="" id="link">百度一下</a>
    <script>
        // TODO id 定位
        var ele1 = document.getElementById("test1");
        // alert(ele1.value)
        // TODO 根据样式定位元素
        var arr = document.getElementsByClassName("bb");
        for (i = 0; i<=arr.length;i++){
            // alert(arr[i].id)
        }
        // TODO 根据标签名定位
        var ele2 = document.getElementsByTagName("input");
        // alert(ele2[2].id)
        // TODO 修改元素的值
        var ele3 = document.getElementById("test3");
        // ele3.value = 5;
        // TODO 获取文本
        var ele4 = document.getElementById("link");
        alert(ele4.text);
    </script>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/xiamaojjie/p/12694477.html
今日推荐