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>
  • 相关阅读:
    (十三)页面权限控制
    (十二)用户管理模块
    Vue笔记:生命周期和钩子函数
    (十一)第三方图标库
    (十)动态加载菜单
    windows下php配置环境变量
    docker在mac下安装及配置阿里云镜像加速
    pm2-web监控
    PHP判断两个矩形是否相交
    ubuntu下安装ffmpeg扩展
  • 原文地址:https://www.cnblogs.com/xiamaojjie/p/12694477.html
Copyright © 2011-2022 走看看