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

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

news 2026/2/8 23:50:11

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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2026/2/8 4:37:17

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/12/14 22:32:59

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2026/2/8 20:41:48

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2026/2/5 5:05:56

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/2/8 5:28:24

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2026/2/7 4:21:44

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2026/2/8 21:57:26

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2026/2/2 18:33:19