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

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

news 2025/11/19 7:40:39

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

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/9/18 15:40:29

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/11/17 0:02:42

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/11/1 8:36:48

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2025/11/17 4:07:39

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2025/11/17 7:26:36

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2025/11/18 20:09:55

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

编程新知 2025/11/6 1:34:07