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

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

news 2025/9/26 13:26:54

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节点

删除节点：

获取父节点
通过父节点删除自己

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：浏览器对象模型 IEChromeSafariFireFox 三方 QQ浏览器360浏览器 window对象 window代表浏览器窗口 window.innerHeight 734 window.innerWidth 71 window.outerHeight 823 window.outerWidth 782 Navigator对象（不常用&am…...

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

Java Junit框架

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

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

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

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

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

Seaborn知识总结

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

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

springboot引入flowable：高版本mysql报错 <dependency><groupId>org.flowable</groupId><artifactId>flowable-spring-boot-starter</art…...

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

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

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

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

安装 Open WebUI

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

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

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

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

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

【后端】Docker一本通

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Redis大key

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

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

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

WPF高级 | WPF 与数据库交互：连接、查询与数据更新前言一、数据库交互基础概念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是一款专用于图像斑点检测于分析的工具，通过灰度值阈值分割和特征过滤，帮助在复杂背景中提取目标区域，并计算几何属性。效果图注意：在这里只有一张图像可以不使用模板匹配工具 CogBlobTool工具的功能斑点检测于…...

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

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

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

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

地震勘探——干扰波识别、井中地震时距曲线特点

目录干扰波识别反射波地震勘探的干扰波井中地震时距曲线特点干扰波识别有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。地震勘探中，有效波和干扰波是相对的。例如，在反射波…...

编程新知 2025/9/24 20:36:39

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

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

编程新知 2025/8/26 18:00:13

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

编程新知 2025/9/26 2:19:45

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时，与数据库的交互无疑是核心环节。虽然传统的数据库操作方式（如直接编写SQL语句与psycopg2交互）赋予了我们精细的控制权，但在面对日益复杂的业务逻辑和快速迭代的需求时，这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/7/25 10:29:46