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

JavaScript基础（BOM对象、DOM节点、表单）

news 2026/2/8 20:19:45

BOM对象

浏览器介绍

BOM：浏览器对象模型

  • IE
  • Chrome
  • Safari
  • FireFox

三方

  • QQ浏览器
  • 360浏览器

window对象

window代表浏览器窗口

window.innerHeight
734
window.innerWidth
71
window.outerHeight
823
window.outerWidth
782

Navigator对象（不常用）

navigator.appName        //获得当前应用名
'Netscape'
navigator.appVersion        //当前浏览器的版本
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0'
navigator.userAgent        
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0'
navigator.platform        //获得系统版本
'Win32'

注：navigator对象，可被人为修改，不建议使用这些属性来判断和编写代码

screen代表屏幕的尺寸

screen.width
1536px
screen.height
864px

location代表当前页面的url信息

location

host: "www.baidu.com"        //主机

href: "https://www.baidu.com/"        //当前位置指向

protocol: "https:"        //协议

reload: ƒ reload()        //刷新网页方法

//设置新的地址

location.assign('http://xxx.xxx.com')

document当前页面信息

HTML DOM文档树

1.document.title        //获得标题信息

2.获取具体的文档树节点

<body>
<dl id="lean"><dt>Java</dt><dd>JavaSE</dd><dd>JavaEE</dd>
</dl>
<script>'use strict'let dl=document.getElementById('lean');
</script>
</body>

3.获取cookie

document.cookie

服务器端可以设置cookie:httpOnly

4.history代表浏览器的历史记录

history.back()        //后退

history.forward()        //前进

DOM节点

DOM：文档对象模型

浏览器网页就是一个DOM树形结构

  • 更新：更新Dom节点
  • 遍历Dom节点：得到Dom节点
  • 删除：删除一个Dom节点
  • 添加：添加一个新的节点

要操作一个Dom节点，就必须先要获得Dom节点

获得Dom节点

document.getElementsByTagName("标签名")

document.getElementById("id名")

document.getElementsByClassName("类名")

<body>
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
<script>var h1=document.getElementsByTagName("h1")//获得Hh1标签节点var p1=document.getElementById("p1");//获得id选择器p1的节点var p2=document.getElementsByClassName("p2");//获得类选择器p2的节点
</script>
</body>

 

父节点选择器名.children，根据父节点获取子节点 

father.children            //获取所有子节点

father.firstChild        //获取第一个子节点

father.lastChild        //获取最后一个子节点

nextSibling        //同一树级别上的下一个节点

以上为原生代码，后期使用jQuery

更新DOM节点

innerText：修改文本的值

id1.innerText='459'

innerHTML：可以解析HTML文本标签

id1.innerHTML='<strong>456<strong>'

style：修改样式，需要操作JS

注意：

  • 属性值使用字符串
  • -转驼峰命名
<body>
<div id="id1"></div>
<script>var id1=document.getElementById('id1');id1.innerText='abc';    //修改id1节点的文本内容为abc
</script>
</body>

id1.style.color='red'        //将id1节点字体修改为红色

应用:找到id

获取DOM节点，并设置样式

删除DOM节点

删除节点：

  1. 获取父节点
  2. 通过父节点删除自己

parentElement:获取父节点

p1.parentElement        //通过子节点获取父节点

removeChild（）：删除子节点

father.removeChild(p1)        //通过父节点father删除子节点p1

综上：

<body>
<div id="father"><h1>标题一</h1><p id="p1">p1</p><p class="p2">p2</p>
</div>
<script>var p1=document.getElementById("p1");//获得id选择器p1的节点var father=p1.parentElement;//找到p1的父节点并命名为fatherfather.removeChild(p1)//删除父节点father的子节点p1
</script>
</body>

法二：通过父节点利用下标找到子节点

若想删除其中某个节点，如第一个节点，如下：

father.removeChild(father.children[0])

注意：删除多个节点时，children是时刻在变，下标会重新排序

插入DOM节点

我们获得某个DOM节点，假设这个DOM节点是空的，我们可以通过inner HTML就可以增加一个元素，若DOM节点原本就存在元素，不可用inner HTML，因为会导致原先的元素被覆盖。

appendChild（）：追加

list.appendChild(js)        //将js节点移动到list的子节点中

1.将id选择器js添加到list选择器的子节点中（在已存在的节点中操作）

createElement（）：创建新节点

2.创建新的节点

document.createElement（）        //创建新标签

<body>
<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div>
<script>var list=document.getElementById('list');var newP= document.createElement('p');//创建一个p标签newP.id='newP';//为p标签设置id为newPnewP.innerText='Hello,World！';//为p标签添加文字list.appendChild(newP);//将id为newP节点添加到list节点下
</script>
</body>

创建一个标签节点：通过setAttribute（key,value）属性，可以设置任意的值

利用JS为背景设置颜色

//创建style标签var myStyle=document.createElement('style');//创建空style标签myScript.setAttribute('type','text/css');//设置标签内容myStyle.innerHTML='body{    background-color: red;}';//为body设置红色背景document.getElementsByTagName('head')[0].appendChild(myStyle);//将style节点设置到head节点下

insertBefore(newNode,targetNode)：在目标节点前插入某节点

在list节点下的ee节点前插入js节点

list.insertBefore(js,ee);

<body>
<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div>
<script >var js=document.getElementById('js');var list=document.getElementById('list');var ee=document.getElementById('ee');
//insertBefore(newNode,targetNode)list.insertBefore(js,ee);
</script>
</body>

操作表单（验证）

表单form也是DOM树内的一个节点

  • 文本框        text
  • 下拉框        select
  • 单选框        radio
  • 多选框        checkbbox
  • 隐藏域        hidden
  • 密码框        password

表单的目的：提交信息

DOM节点.value：获得要提交的信息

input_test.value

给表单赋值：

单选框与多选框取值：

1.错误示范：对于单选框和多选框，boy_radio.value只能取到当前的值

2.只能通过if判断，当单选框被选中时，boy_radio.checked会返回true，如下：

提交表单

未加密情况下，在抓包时，可以看见表单提交的信息

function aaa() {var uname=document.getElementById('username');var upwd=document.getElementById('pwd');console.log(uname.value);console.log(upwd.value);}

1.通过绑定事件onclick被点击，利用MD5加密

<head><meta charset="UTF-8"><title>提交表单</title><!--md5工具类--><script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post"><p><span>用户名：<input type="text" id="username" name="username"></span></p><p><span>密码：<input type="password" id="pwd" name="pwd"></span></p><!--绑定事件 onclick 被点击--><button type="submit" onclick="aaa()">提交</button>
</form>
<script>function aaa() {var uname=document.getElementById('username');var upwd=document.getElementById('pwd');console.log(uname.value);console.log(upwd.value);//md5算法pwd.value=md5(pwd.value)console.log(upwd.value);}
</script>
</body>

2.利用onsubmit绑定一个提交检查的函数

onsubmit事件是HTML表单中的一个重要事件，它在表单提交时被触发。这个事件通常用于在发送数据到服务器之前执行JavaScript验证。

jQuery 

jQuery库，里面存在大量的JavaScript函数

引入jQueryCDN

在HTML文件中引入

使用方法：

$(CSS选择器).事件（）

 辅助文档：http://jquery3.yanzhihui.com/index.html

事件：

鼠标事件、键盘事件、其他 事件等，可在辅助文档 中查看

  • mousedown()        按下
  • mousemove()        移动

相关文章：

JavaScript基础（BOM对象、DOM节点、表单）

BOM对象 浏览器介绍 BOM&#xff1a;浏览器对象模型 IEChromeSafariFireFox 三方 QQ浏览器360浏览器 window对象 window代表浏览器窗口 window.innerHeight 734 window.innerWidth 71 window.outerHeight 823 window.outerWidth 782 Navigator对象&#xff08;不常用&am…...

编程日记 2025/3/2 12:38:21

Java Junit框架

JUnit 是一个广泛使用的 Java 单元测试框架&#xff0c;用于编写和运行可重复的测试。它是 xUnit 家族的一部分&#xff0c;专门为 Java 语言设计。JUnit 的主要目标是帮助开发者编写可维护的测试代码&#xff0c;确保代码的正确性和稳定性。 JUnit 的主要特点 注解驱动&…...

编程日记 2025/3/2 12:34:16

23种设计模式之《备忘录模式（Memento）》在c#中的应用及理解

程序设计中的主要设计模式通常分为三大类&#xff0c;共23种&#xff1a; 1. 创建型模式&#xff08;Creational Patterns&#xff09; 单例模式&#xff08;Singleton&#xff09;&#xff1a;确保一个类只有一个实例&#xff0c;并提供全局访问点。 工厂方法模式&#xff0…...

编程日记 2025/3/2 12:32:14

Seaborn知识总结

1、简介 &#xff08;1&#xff09;高级接口&#xff1a;Seaborn 提供了一组高级函数和方法&#xff0c;可以使得创建常见的统计图表变得简单&#xff0c;例如散点图、线性回归图、箱线图、直方图、核密度估计图、热图等等。无需像 Matplotlib 一样写大量的代码&#xff1b; …...

编程日记 2025/3/2 12:31:13

flowable中用户相关api

springboot引入flowable&#xff1a;高版本mysql报错 <!-- https://mvnrepository.com/artifact/org.flowable/flowable-spring-boot-starter --><dependency><groupId>org.flowable</groupId><artifactId>flowable-spring-boot-starter</art…...

编程日记 2025/3/2 12:30:12

java后端开发day23--面向对象进阶（四）--抽象类、接口、内部类

&#xff08;以下内容全部来自上述课程&#xff09; 1.抽象类 父类定义抽象方法后&#xff0c;子类的方法就必须重写&#xff0c;抽象方法在的类就是抽象类。 1.定义 抽象方法 将共性的行为&#xff08;方法&#xff09;抽取到父类之后。由于每一个子类执行的内容是不一样…...

编程日记 2025/3/2 12:28:09

安装 Open WebUI

2025.03.01 早上 我已经安装了ollama 和deeseek模型 &#xff08;本地部署流水账之ollama安装Deepseek安装-CSDN博客&#xff09;&#xff0c;然后需要个与模型沟通的工具&#xff08;这么说不知道对不对&#xff09;。 刚开始用的chatbox&#xff0c;安装很方便&#xff0c;…...

编程日记 2025/3/2 12:24:05

Llama 2中的Margin Loss：为何更高的Margin导致更大的Loss和梯度？

Llama 2中的Margin Loss&#xff1a;为何更高的Margin导致更大的Loss和梯度&#xff1f; 在《Llama 2: Open Foundation and Fine-Tuned Chat Models》论文中&#xff0c;作者在强化学习与人类反馈&#xff08;RLHF&#xff09;的Reward Model训练中引入了Margin Loss的概念&a…...

编程日记 2025/3/2 12:18:57

【后端】Docker一本通

长期更新补充&#xff0c;建议关注收藏点赞 目录 Docker概述安装部署Docker基本操作使用docker部署tomcat使用docker部署mysql Docker概述 docker是⼀个应⽤级隔离的虚拟化技术docker三大核心概念 镜像&#xff1a;是具有源的所有特征的⼀个标记⽂件 仓库&#xff1a;存放镜像…...

编程日记 2025/3/2 12:17:56

工程化与框架系列（13）--虚拟DOM实现

虚拟DOM实现 &#x1f333; 虚拟DOM&#xff08;Virtual DOM&#xff09;是现代前端框架的核心技术之一&#xff0c;它通过在内存中维护UI的虚拟表示来提高渲染性能。本文将深入探讨虚拟DOM的实现原理和关键技术。 虚拟DOM概述 &#x1f31f; &#x1f4a1; 小知识&#xff1…...

编程日记 2025/3/2 12:15:54

数据结构之各类排序算法代码及其详解

1. 排序的概念 排序是一种常见的算法概念&#xff0c;用于将一组数据按照特定的顺序进行排列。排序算法的目的是将一组数据按照递增或递减的顺序重新排列。常见的排序算法包括冒泡排序、插入排序、选择排序、快速排序、归并排序等。排序算法的选择通常取决于数据规模、数据分布…...

编程日记 2025/3/2 12:12:47

【洛谷贪心算法】P1090合并果子

为了使消耗的体力最小&#xff0c;每次都应该选择当前重量最小的两堆果子进行合并。可以使用优先队列&#xff08;小根堆&#xff09;来实现这个过程&#xff0c;优先队列可以自动维护元素的顺序&#xff0c;每次取出堆顶的两个元素&#xff08;即最小的两个元素&#xff09;进…...

编程日记 2025/3/2 12:09:45

【告别双日期面板！一招实现el-date-picker智能联动日期选择】

告别双日期面板&#xff01;一招实现el-date-picker智能联动日期选择 1.需求背景2.DateTimePicker 现状图3.日期选择器实现代码4.日期选择器实现效果图5.日期时间选择器实现代码6.日期时间选择器实现效果图 1.需求背景 在用户使用时间查询时&#xff0c;我们经常需要按月份筛选…...

编程日记 2025/3/2 12:08:44

现今大语言模型性能（准确率）比较

现今大语言模型性能（准确率）比较 表头信息：表的标题为“大语言模型性能比较结果”（英文：Table 1: Large Language Model Performance Comparison Results），表明该表是用于对比不同大语言模型的性能。列信息： 模型：列出参与比较的不同大语言模型名称，包括LLAMA3（70B）…...

编程日记 2025/3/2 12:07:43

程序诗篇里的灵动笔触：指针绘就数据的梦幻蓝图（水文，勿三）

大家好啊&#xff0c;我是小象٩(๑ω๑)۶ 我的博客&#xff1a;Xiao Xiangζั͡ޓއއ 很高兴见到大家&#xff0c;希望能够和大家一起交流学习&#xff0c;共同进步。 这一节我们来学习指针的相关知识&#xff0c;学习内存和地址&#xff0c;指针变量和地址&#xff0c;包…...

编程日记 2025/3/2 12:05:41

在 UniApp 中实现中间凸起 TabBar 的完整指南

如何在 UniApp 中设置中间 TabBar 凸起效果 在移动应用开发中&#xff0c;TabBar 是常见的导航组件&#xff0c;而中间凸起的 TabBar 按钮则是一种流行的设计风格&#xff0c;常用于突出重要功能&#xff08;如发布、拍照等&#xff09;。UniApp 提供了 midButton 属性&#x…...

编程日记 2025/3/2 12:04:40

Redis大key

Redis大key基本概念&#xff0c;影响 Redis 大 key 指在 Redis 中存储了大量数据的键&#xff0c;它会对 Redis 的性能和内存管理产生影响。 大key的定义与value的大小和元素数量有关&#xff0c;但这个定义并不是绝对的&#xff0c;而是相对的&#xff0c;具体取决于系统的使用…...

编程日记 2025/3/2 12:03:39

WPF高级 | WPF 与数据库交互：连接、查询与数据更新

WPF高级 | WPF 与数据库交互&#xff1a;连接、查询与数据更新 前言一、数据库交互基础概念1.1 数据库简介1.2 数据访问技术 二、WPF 与数据库连接2.1 连接字符串2.2 建立连接 三、WPF 中的数据查询3.1 使用ADO.NET进行数据查询3.2 使用 Entity Framework 进行数据查询3.3 使用…...

编程日记 2025/3/2 12:01:36

CogBlobTool工具

CogBlobTool是一款专用于图像斑点检测于分析的 工具&#xff0c;通过灰度值阈值分割和特征过滤&#xff0c;帮助在复杂背景中提取目标区域&#xff0c;并计算几何属性。 效果图 注意&#xff1a;在这里只有一张图像可以不使用模板匹配工具 CogBlobTool工具的功能 斑点检测于…...

编程日记 2025/3/2 12:00:34

C# WinForm程序中如何调试dll接口

公司的SF系统是自主开发的。不同的机种会有不同数据记录保存的需求&#xff0c;尤其是客户SQE更是各种奇思妙想......于是做了一个接口&#xff0c;实践之下效果还不错呢。 每每总是忘记怎么调试接口&#xff0c;特记录下备查。首先要将&#xff0c; 1 DLL项目与WinForms项目…...

编程日记 2025/3/2 11:57:30

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

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

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2026/2/8 5:22:04

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/2/7 13:17:38

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/12/3 9:38:15

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2026/2/6 20:07:35

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2026/1/28 1:40:03

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2026/1/25 13:33:35