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>
  • 相关阅读:
    django 项目 crm 关于展示表的细节
    djagngo crm 项目 展示页面 和分页
    django项目 crm登录 注册
    django项目 crm表结构一些常用的字段
    django认证 auth
    django form组件
    json和ajax技术
    VS 2013编译64位版本QT 4.8.6及使用cmake为依赖QT生成VS项目时Could NOT find Qt4
    使用国内pypi源来安装python包
    [转]ubuntu 下无法启动chrome
  • 原文地址:https://www.cnblogs.com/xiamaojjie/p/12694477.html
Copyright © 2011-2022 走看看