JavaScript中Bom节点和表单的获取值

Bom节点

  • 代表浏览器对象模型(Browser Object Model),它是浏览器提供的 JavaScript API,用于与浏览器窗口和浏览器本身进行交互

  • 获取当前网页的URL:

  • const currentURL = window.location.href;
    console.log(currentURL);
  • 设置和获取Cookies:

  • // 设置一个名为 "username" 的 Cookie
    document.cookie = "username=John Doe";
    ​
    // 获取 Cookie 值
    const username = document.cookie;
    console.log(username);
    ​
  • 导航到其他页面:

  • window.location.href = "跳转页面的地址";
  • 获取浏览器信息

  • const web = window.navigator.appName;
    const web_v = window.navigator.appVersion;
    console.log(`浏览器名称: ${web}, 版本: ${web_v}`);

  • id1.style.color = 'red'; //属性使用 字符串 包裹
    id1.style.fonSize = '20px';// 驼峰命名问题
    id1.style.padding = '2em';

    获取表单的获取值

    • 文本框 text

    • 下拉框 <select>

    • 单选框 radio

    • 多选框 checkbox

    • 隐藏框 hidden

    • 密码框 password

    • <form action="post">
          <P>
              <span>用户名:</span>
              <input type="text" id="username">
          </P>
          <P>
              <span>性别:</span>
              <input type="radio" name="sex" value="man" id="boy">男
              <input type="radio" name="sex" value="girl" id="boy">女
          </P>
       </form>
       <script>
             let input_text = document.getElementById('username');
        </script>

    •    输出的语句是input_text.value,将文本框的文字输出

      boy_text.checked 
      true
      girl_text.checked
      false
      • 如上代码: radio的选择框选择男选择框的用checked,不能用value

  • 密码加密

  • <script scr="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5/2.10.0/js/md5.min.js"></script>//引用mp5加密网站
    </head>
    ​
    <body>
        <form ation="#" method="post">
            <p>
                <span>用户名:</span>
                <input type="text" id="username" name="username">
            </p>
            <p>
                <span>密码:</span>
                <!-- password可以让密码隐蔽 -->
                <input type="password" id="password" name="password">
            </p>
            <!-- 绑定事件onlick被点击 -->
            <button type="submit" onlick="aaa()">提交</button>
        </form>
        <script>
            function aaa() {
                let uname = document.getElementById('username');
                let pwd = document.getElementById('password');
                console.log(uname.value);
                console.log(pwd.value);
                // pwd.value = '*******';
                pwd.value = md5(pwd.value);
                console.log(pwd.value);
            }
        </script>
    </body>
  • 隐藏密码加密

  • <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script scr="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5/2.10.0/js/md5.min.js"></script>
    </head>
    ​
    <body>
        <!-- onsubmit=绑定一个提交检测的函数,true ,false 将这个结果返回给表单,使用onsubmit 接收
        onsubmit = "return aaa()" -->
        <form action="http://www.baidu.com" method="post" onsubmit="return aaa()">
            <p>
                <span>用户名:</span>
                <input type="text" id="username" name="username">
            </p>
            <p>
                <span>密码:</span>
                <input type="password" id="input-password" name="password">
            </p>
            <input type="hidden" id="md5-password" name="password">
            <button type="submit">提交</button>
        </form>
    ​
        <script>
            function aaa() {
                let name = document.getElementById('username');
                let pwd = document.getElementById('input-password');
                let mp5pwd = document.getElementById('md5-password');
                pwd.value = md5(pwd.value);
                mp5pwd.value = md5(pwd.value);//将加密的密码在进行隐藏
                // 可以校验判断表单内容,true就是通过提交,false,阻止提交
                return true;
            }
        </script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值