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

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

news 2026/1/16 7:49:33

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

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2026/1/14 22:54:10

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2026/1/15 4:24:00

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2026/1/9 12:53:59

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2026/1/4 2:33:39

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2026/1/15 6:19:03

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/11/26 18:23:29

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/12/11 0:27:15