当前位置： 首页 > news >正文

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

news 2025/9/27 15:14:15

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>

相关文章：

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

Bom节点 代表浏览器对象模型&#xff08;Browser Object Model&#xff09;&#xff0c;它是浏览器提供的 JavaScript API&#xff0c;用于与浏览器窗口和浏览器本身进行交互 获取当前网页的URL&#xff1a; const currentURL window.location.href; console.log(currentURL…...

编程日记 2023/10/23 23:44:25

RDB.js：适用于 Node.js 和 Typescript 的终极对象关系映射器

RDB.js 是适用于 Node.js 和 Typescript 的终极对象关系映射器&#xff0c;可与 Postgres、MS SQL、MySQL、Sybase SAP 和 SQLite 等流行数据库无缝集成。无论您是使用 TypeScript 还是 JavaScript&#xff08;包括 CommonJS 和 ECMAScript&#xff09;构建应用程序&#xff0c…...

编程日记 2023/10/23 23:42:21

ROI的投入产出比是什么？

ROI的投入产出比是什么&#xff1f; 投入产出比&#xff08;Return on Investment, ROI&#xff09;是一种评估投资效益的财务指标&#xff0c;用于衡量投资带来的回报与投入成本之间的关系。它的计算公式如下&#xff1a; 投资收益&#xff1a;指的是投资带来的净收入&#x…...

编程日记 2023/10/23 23:39:18

Linux打包发布常用命令

1、先下载一个FileZilla Client远程连接工具&#xff0c;并连接我们需要连接的服务器 2、进入xshell连接对应的服务器&#xff0c;连接后若不知道项目位置&#xff0c;可使用此命令查看 ps -ef | grep java 此时会出现一大串代码&#xff0c;找到以我这为例&#xff1a;root…...

编程日记 2023/10/23 23:38:17

Docker Swarm 节点维护

Docker Swarm Mode Docker Swarm 集群搭建 Docker Swarm 节点维护 Docker Service 创建 1.角色转换 Swarm 集群中节点的角色只有 manager 与 worker&#xff0c;所以其角色也只是在 manager 与worker 间的转换。即 worker 升级为 manager&#xff0c;或 manager 降级为 worke…...

编程日记 2023/10/23 23:37:15

AS/NZS 1859.3：2017 木基装饰板检测

木基装饰板是指以木质材料为基材&#xff0c;比如刨花板&#xff0c;胶合板等木质人造板&#xff0c;表面贴有PVC膜&#xff0c;三聚氰胺纸&#xff0c;木饰面等装饰层压制而成的木质复合材料&#xff0c;主要用于墙面装饰&#xff0c;家具等领域。 AS/NZS 1859.3&#xff1a;…...

编程日记 2023/10/23 23:36:14

深入理解算法：从基础到实践

深入理解算法&#xff1a;从基础到实践 1. 算法的定义2. 算法的特性3. 算法的分类按解决问题的性质分类&#xff1a;按算法的设计思路分类&#xff1a; 4. 算法分析5. 算法示例a. 搜索算法示例&#xff1a;二分搜索b. 排序算法示例&#xff1a;快速排序c. 动态规划示例&#xf…...

编程日记 2023/10/23 23:35:14

华为OD 机智的外卖员（100分）【java】A卷+B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应20022部分考题以及新出的题目，A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载，请点击以下链接进入： 我用夸克网盘分享了「华为O…...

编程日记 2023/10/23 23:34:11

Node编写用户登录接口

目录 前言 服务器 编写登录接口API 使用sql语句查询数据库中是否有该用户 判断密码是否正确 生成JWT的Token字符串 配置解析token的中间件 配置捕获错误中间件 完整的登录接口代码 前言 本文介绍如何使用node编写登录接口以及解密生成token&#xff0c;如何编写注册接…...

编程日记 2023/10/23 23:33:11

vlookup函数踩坑（wps）

使用wps的朋友看过来 vlookup函数踩坑&#xff0c;vlookup&#xff08;查找值&#xff0c;查找范围&#xff0c;返回值的索引&#xff0c;精确查找or模糊查找&#xff09; 我们要查找的数据的那一列&#xff0c;必须是查找范围的第一列&#xff01; 案例&#xff0c;看下面的…...

编程日记 2023/10/23 23:32:10

老卫带你学---leetcode刷题(8. 字符串转换整数 (atoi))

8. 字符串转换整数 (atoi) 问题&#xff1a; 请你来实现一个 myAtoi(string s) 函数&#xff0c;使其能将字符串转换成一个 32 位有符号整数&#xff08;类似 C/C 中的 atoi 函数&#xff09;。 函数 myAtoi(string s) 的算法如下&#xff1a; 读入字符串并丢弃无用的前导空…...

编程日记 2023/10/23 23:31:07

了解事件冒泡

事件冒泡是指在网页中&#xff0c;当某个元素触发了一个事件时&#xff0c;这个事件会逐级向上传播到它的父元素&#xff0c;直至达到文档树的根节点。这种传播方式被称为事件冒泡。 为什么会有事件冒泡&#xff1f; 事件冒泡是为了方便处理多个嵌套元素的事件而引入的机制。…...

编程日记 2023/10/23 23:30:06

线性代数1：线性方程和系统

Digital Collection (staedelmuseum.de) 图片来自施泰德博物馆 一、前言 通过这些文章&#xff0c;我希望巩固我对这些基本概念的理解&#xff0c;同时如果可能的话&#xff0c;通过我希望成为一种基于直觉的数学学习方法为其他人提供额外的清晰度。如果有任何错误或机会需要我…...

编程日记 2023/10/23 23:29:04

“第四十八天” 计算机组成原理

数据结构学完了&#xff0c;不过也就是匆匆过了一遍&#xff0c;后面肯定还是要重来的。现在开始学机组了。 计算机发展历程&#xff1a; 计算机硬件唯一能识别的数据是二进制的 0/1&#xff0c;而在计算机中用低/高电平表示 0 / 1&#xff0c;也就是通过电信号传递数据&#x…...

编程日记 2023/10/23 23:28:01

【算法|贪心算法系列No.4】leetcode55. 跳跃游戏 45. 跳跃游戏 II

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…...

编程日记 2023/10/23 23:25:58

第九章 JDBC

文章目录 一. 单选题&#xff08;共5题&#xff0c;50分&#xff09;二. 判断题&#xff08;共5题&#xff0c;50分&#xff09; 一. 单选题&#xff08;共5题&#xff0c;50分&#xff09; (单选题) 下列选项&#xff0c;可用于存储结果集的对象是&#xff08;&#xff09; A.…...

编程日记 2023/10/23 23:24:56

Kubernetes基础概念及架构和组件

目录 一、kubernetes简介 1、kubernetes的介绍与作用 2、为什么要用K8S&#xff1f; 二、kubernetes特性 1、自我修复 2、弹性伸缩 3、服务发现和负载均衡 4、自动发布&#xff08;滚动发布/更新&#xff09;和回滚 5、集中化配置管理和密钥管理 6、存储编排 7、任务批…...

编程日记 2023/10/23 23:23:55

04.Finetune vs. Prompt

目录 语言模型回顾大模型的两种路线专才通才二者的比较 专才养成记通才养成记Instruction LearningIn-context Learning 自动Prompt 部分截图来自原课程视频《2023李宏毅最新生成式AI教程》&#xff0c;B站自行搜索 语言模型回顾 GPT&#xff1a;文字接龙 How are __. Bert&a…...

编程日记 2023/10/23 23:21:48

UG NX二次开发(C#)-采用NXOpen完成对象的合并操作

文章目录 1、前言2、Ufun实现布尔和操作的函数2.1 函数说明2.2 源代码3、采用NXOpen实现布尔和操作的函数3.1 函数说明3.2 源代码4、测试结果4.1 采用UFun 与NXOpen的结果4.2采用UFun 与NXOpen的对比说明1、前言 在UG NX中开发过程中，创建特征对象的时候往往会用到布尔操作，…...

编程日记 2023/10/23 23:20:47

测开不得不会的python之re模块正则表达式匹配

学习目录 正则表达式介绍 正则表达式的常用符号 python的re模块 findall()函数 finditer()函数 match()函数 search()函数 split()函数 正则表达式的介绍 Python 通过标准库中的 re 模块来支持正则表达式。 正则表达式作为高级的文本模式匹配、抽取、和搜索。简单地说…...

编程日记 2023/10/23 23:19:45

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2025/9/27 9:19:19

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/9/25 21:38:09

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/9/26 0:46:59

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/9/26 8:21:19

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2025/9/22 19:47:07

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

编程新知 2025/9/13 22:54:45

深入理解 React 样式方案

React 的样式方案较多，在应用开发初期，开发者需要根据项目业务具体情况选择对应样式方案。React 样式方案主要有： 1. 内联样式 2. module css 3. css in js 4. tailwind css 这些方案中，均有各自的优势和缺点。 1. 方案优劣势 1. 内联样式: 简单直观，适合动态样式和…...

编程新知 2025/8/10 6:04:02