zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    经典业务: 删除最老的文件
    The LIVE555TM HLS Proxy
    OpenGL
    OpenCV
    STUN, TURN, and ICE
    【AI学习总结】均方误差(Mean Square Error,MSE)与交叉熵(Cross Entropy,CE)损失函数
    SpringCloud中一些基本配置
    Redmibook笔记本触摸板失灵
    对称加密
    Java数字签名工具类
  • 原文地址:https://www.cnblogs.com/xiamaojjie/p/12694477.html
Copyright © 2011-2022 走看看