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

Javascript BOM,DOM 知识简介

news 来源：原创 2025/8/13 21:50:26

JSON

一种数据交换格式,作为数据载体,传输数据, Json比xml 更简单,可读性更高.
js的对象和Json可以相互转换.

//json定义格式:
var varName='{"key1":value1,"key2":value2}';

value的数据类型为数字,字符串(在双引号中),布尔值,数组(在方括号中),对象(在花括号中),null.
外面用单引号包裹,里面的键key用双引号.

    var json = '{"name":"warren","age":1}';  var w=JSON.parse(json)//将json字符串转化为js对象.  console.log(w.name);console.log(JSON.stringify(w));;//将js对象转化为json字符串

BOM

是一套操作浏览器窗口的 API,用于控制浏览器的行为
组成：
window（窗口对象）
navigator（浏览器信息）
screen（屏幕信息）
history（历史记录）
location（地址栏）
window是所有BOM对象的顶级对象.

常见的 `window` 方法

方法	作用
`window.open(url, name, features)`	打开新窗口
`window.close()`	关闭当前窗口
`window.alert(msg)`	弹出警告框
`window.confirm(msg)`	弹出确认框（返回 `true/false`）
`window.prompt(msg, defaultText)`	弹出输入框
`window.setTimeout(fn, delay)`	延迟执行代码
`window.setInterval(fn, interval)`	循环执行代码
`window.clearTimeout(id)`	清除 `setTimeout`
`window.clearInterval(id)`	清除 `setInterval`

// 弹出提示框
window.alert("你好，BOM！");// 3 秒后执行代码
setTimeout(() => {console.log("3秒后执行");
}, 3000);// 每 2 秒打印一次
let interval = setInterval(() => {console.log("每2秒执行一次");
}, 2000);// 5 秒后停止循环
setTimeout(() => {clearInterval(interval);
}, 5000);//地址栏对象
location.href="https://www.bilibili.com/";//为href属性赋值,浏览器会自动跳转到新页面.

DOM

基本概念:

文档对象模型, 将标记语言的各个组成部分封装成对象.
JavaScript通过DOM对HTML进行操作.
Document :整个文档对象
Element:元素对象
Attribute :属性对象
Text:文本对象
Comment:注释对象
浏览器解析后,会形成DOM树.
一个页面就是一个DOM文档(document).
页面中的标签就是元素(element).

获取元素

//根据id获取,返回单个Element对象
document.getElementById(id);//根据标签名获取,返回Element对象数组
document.getElemetsByTagName('div');//根据name属性获取,返回Element对象数组
document.getElementsByName('hobby');//根据class属性值获取,返回Element对象数组
document.getElemetByClassName('cls');

操作文本

element.innerText：返回元素的纯文本内容，不包括 HTML 标签。
element.innerHTML：返回元素内的所有 HTML 内容（包括标签).

删除节点

现代浏览器支持的方法:

   var element = document.getElementById('p');element.remove();

这种方法兼容性更好，适用于所有浏览器:

   var element = document.getElementById('p');element.parentNode.removeChild(element);

  <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');// 创建新的 <p> 元素var newP = document.createElement('p');newP.id = "newP";             // 设置 idnewP.innerText = "Hello, Kuangshen!";  // 设置文本// 将新元素添加到 list 容器中list.appendChild(newP);</script>

setAttribute()

// 1. 获取 DOM 元素
var element = document.getElementById("myElement");// 2. 设置属性
element.setAttribute("class", "active");
element.setAttribute("data-id", "123");
element.setAttribute("title", "这是一个标题");

第一个参数是属性名称。
第二个参数是要设置的属性值（字符串形式）。

如果属性已存在，则更新它的值,不存在则新建并设置。

Javascript BOM,DOM 知识简介

JSON 一种数据交换格式,作为数据载体,传输数据, Json比xml 更简单,可读性更高.js的对象和Json可以相互转换. //json定义格式: var varName{"key1":value1,"key2":value2};value的数据类型为数字,字符串(在双引号中),布尔值,数组(在方括号中),对象(在花括…...

编程日记 2025/8/13 21:50:26

记第一次跟踪seatunnel的任务运行过程四——getJobConfigParser().parse()的动作

前绪记第一次跟踪seatunnel的任务运行过程三——解析配置的具体方法getLogicalDag 正文书接上文 ImmutablePair<List<Action>, Set<URL>> immutablePair getJobConfigParser().parse(null);在前一篇文章中说到getLogicDag()方法的第一行（如…...

编程日记 2025/8/9 18:57:30

鸿蒙APP采用WebSocket实现在线实时聊天

本文配套视频： 鸿蒙APP基于websocket实时聊天功能_哔哩哔哩_bilibili 1. 案例环境： 鸿蒙APP采用ArkTS语法编写，API14环境，DevEco Studio 5.0.7.210编辑器开发后台接口基于SpringBoot，后台前端基于Vue开发核心技术采用…...

编程日记 2025/8/12 8:21:26

【2步解决】phpstudy开机自启（自动启动phpstudy、mysql、nignx或apache、自动打开网址）

重启执行最终效果图： 一、场景线下部署，需要开启自动动，并打开网址http://localhost/。二、操作步骤 ①、新建start.txt，并修改为start.bat，使用记事本编辑，粘贴上方代码如下： echo off:…...

编程日记 2025/8/13 7:25:31

一周学会Flask3 Python Web开发-SQLAlchemy删除数据操作-班级模块

锋哥原创的Flask3 Python Web开发 Flask3视频教程： 2025版 Flask3 Python web开发视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 首页list.html里加上删除链接： <!DOCTYPE html> <html lang"en"> <head><meta c…...

编程日记 2025/8/9 8:07:47

从过拟合到强化学习：机器学习核心知识全解析

Langchain系列文章目录 01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南 02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖 03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南 04-玩转 LangChai…...

编程日记 2025/8/12 16:16:32

uniapp-x 之useAttrs只读

数据类型： useAttrs在web端拿到的是obj，app拿到的是map 是否可以修改内部元素： 否，只读这意味着你想这样写代码将会无效 let attrsuseAttrs();console.log("attrs",attrs, attrs instanceof Map)//appif(attrs ins…...

编程日记 2025/8/13 14:54:23

MySQL 8 主从同步安装与配置

拟机，由 CentOS 换成了 Ubuntu，用 Xteminal 连接之后，为了方便改配置文件，把文件权限改成 666 了，结果因为这个调半天，一直以为是网络问题或者是配置问题。要注意为了防止配置文件被未经授权的用户修改&…...

编程日记 2025/8/8 14:09:32

【人工智能】人工智能安全（AI Security）

人工智能安全（AI Security） 是指保障人工智能系统免受各种攻击、滥用和错误操作的措施与技术。随着人工智能的广泛应用，AI的安全性问题变得越来越重要。AI安全不仅关注系统本身的稳定性与安全性，还涉及到如何确保AI的决策和行为是…...

编程日记 2025/8/11 4:43:43

Shp文件转坐标并导出到Excel和JSON(arcMap + excel)

思路总结: 准备: 一个shp文件 (单个面, 多个面建议使用Python代码, 自己弄太复杂) 使用arcMap工具, 将面通过要素折点转点工具转为点 Shp文件转坐标 (Python) 第一步: 这样就得到了一个点文件. 第二步: 得到x, y坐标使用工具添加xy坐标这样在属性表中就会多出两列第…...

编程日记 2025/8/10 16:03:52

【数据结构】线性表简介

0.本篇问题线性表，顺序表，链表什么关系？它们是逻辑结构还是存储结构？线性表的基本操作有哪些？ 线性表是具有相同数据元素的有限序列。表中元素有先后次序，每个元素占有相同大小的存储空间。一、线性…...

编程日记 2025/8/6 6:53:57

基于FPGA的制冷型红外成像电路设计（论文+图纸）

1.总体设计对于本次课题基于FPGA的制冷型红外成像电路设计，其主要包括两个功能，第一就是红外图像的显示，第二就是红外图像中各点温度的测量。首先对于红外图像的显示来说，一般根据红外探测器根据阵列的大小可以显示出不同的清…...

编程日记 2025/8/6 10:14:57

Spring Boot 集成 Lua 脚本：实现高效业务逻辑处理

1. 前言 1.1 什么是Lua Lua是一种轻量级、高性能的脚本语言，常用于游戏开发、嵌入式系统、配置文件解析等领域。Lua语法简洁，易于学习和使用，且具有强大的扩展性。 1.2 Spring Boot与Lua集成的意义将Lua集成到Spring Boot应用中，可以实现动态配置业务逻辑、简化复杂业…...

编程日记 2025/8/10 14:53:00

cursor使用

引入私有文档设置-> Features->下滑找到Docs url后边多加一个 / 可以拉取url下所有的页面(子页面，子目录)，不加只拉取url当前页面使用选择 Docs 回车选择文档直接解析链接链接回车搜索引擎 web 对比git版本差异 git 选择其中一个 g…...

编程日记 2025/8/12 5:30:17

时间序列预测（十九）——卷积神经网络（CNN）在时间序列中的应用

有关CNN的介绍可以参考以下博文： 卷积神经网络（CNN）详细介绍及其原理详解-CSDN博客三万字硬核详解：卷积神经网络CNN（原理详解项目实战经验分享）_cnn卷积神经网络-CSDN博客 CNN笔记：通俗…...

编程日记 2025/8/9 8:50:38

uniapp-x js 限制

1.String(str) 不允许，android模拟室报错，找不到String 2.JSON.parse不接受泛类型 export const genData function<T> (initData:T) : T {return JSON.parse<T>(JSON.stringify(initData))!;//不可以，必须明确类型 } error: …...

编程日记 2025/8/6 17:55:04

Matlab 基于磁流变阻尼器的半主动车辆座椅悬架模糊控制研究

1、内容简介略 Matlab 175-基于磁流变阻尼器的半主动车辆座椅悬架模糊控制研究可以交流、咨询、答疑 2、内容说明略 3、仿真分析略 4、参考论文略...

编程日记 2025/7/14 8:03:47

QQuick3D-Model的实例化

QQuick3D-Model的实例化 Model的实例化 Model类继承于Node类；如果想让一个Model（模型）可以渲染，至少需要一个Mesh(网格)和material（材质）Mesh(网格)：Qt内置了矩形（Rectangle&#…...

编程日记 2025/8/13 15:41:39

二分算法刷题

1. 初识总结：二分算法题的细节非常多，容易写出死循环。使用算法的条件不一定是数组有序，而是具有“二断性”；模板三种后面会讲。朴素二分二分查找左端点二分查找右端点 2. 朴素二分题目链接：704. 二分查找 - 力扣…...

编程日记 2025/8/13 17:26:59

# RAG 框架 # 一文入门全链路RAG系统构建与优化 —— 架构、策略与实践

本文全面阐述了RAG系统从数据收集、数据清洗（包括领域专有名词处理）、智能数据分块与QA对生成，到向量化、向量数据库选择与配置，再到检索方式及重排序，直至整合输出、监控反馈和安全保障的全流程。通过这一完整方案&am…...

编程日记 2025/8/4 1:37:03

网络运维学习笔记（DeepSeek优化版） 017 HCIA-Datacom综合实验02

文章目录综合实验2sw3sw4gwcore1（sw1）core2（sw2）ISP 综合实验2 sw3 vlan 2 stp mode stp int e0/0/1 port link-type trunk port trunk allow-pass vlan 2 int e0/0/2 port link-type trunk port trunk allow-pass vlan 2 int e…...

编程日记 2025/8/3 17:41:25

Flutter——Android与Flutter混合开发详细教程

目录 1.创建FlutterModule项目，相当于Android项目里面的module库；2.或者编辑aar引用3.创建Android原生项目3.直接运行跑起来 1.创建FlutterModule项目，相当于Android项目里面的module库； 2.或者编辑aar引用执行 flutter build a…...

编程日记 2025/8/6 20:52:33

java手机号、邮箱、日期正则表达式

Java正则核心API Java中用 java.util.regex 包的两个类： Pattern：编译正则表达式Matcher：执行匹配操作 1. 验证手机号 String regex "1[3-9]\\d{9}"; boolean isValid "18812345678".matches(regex); // true2. 提取…...

编程日记 2025/8/5 16:20:26

0x04.若依框架微服务开发（含AI模块运行）

微服务本地开发硬件资源有限，所以会将核心微服务组件先部署在服务器上比如：mysql，redis，注册中心Nacos，网关Gateway，认证中心Auth和upms模块以及低代码生成模块。 mysql、redis部署前篇已讲，这…...

编程日记 2025/8/6 4:54:32

数据库管理-第302期国产类RAC架构数据库网络连接方式（20250314）

数据库管理302期 2025-03-14 数据库管理-第302期国产类RAC架构数据库网络连接方式（20250314）1 Oracle RAC2 DMDSC3 YAC4 KES RAC总结数据库管理-第302期国产类RAC架构数据库网络连接方式（20250314） 作者：胖头鱼的鱼…...

编程日记 2025/8/6 13:10:40

ctf web入门知识合集

文章目录 01做题思路02信息泄露及利用robots.txt.git文件泄露dirsearch ctfshow做题记录信息搜集web1web2web3web4web5web6web7web8SVN泄露与 Git泄露的区别web9web10 php的基础概念php的基础语法1. PHP 基本语法结构2. PHP 变量3.输出数据4.数组5.超全局变量6.文件操作 php的命…...

编程日记 2025/8/10 5:07:52

CSS3-流星雨

1. 绘制标签 <div class"container"><span></span> </div>2. 设置div背景在百度上搜索一幅星空的图片 <style>* {/* 初始化 */margin: 0;padding: 0;}body {/* 高度100% */height: 100vh;/* 溢出隐藏 */overflow: hidden;}.contai…...

编程日记 2025/8/8 1:10:41

【leetcode hot 100 199】二叉树的右视图

解法一：层级遍历，右侧看到的节点就是每一层最后一个元素 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }…...

编程日记 2025/8/8 20:08:29

Unity进阶课程【二】Mask 组件的使用 UI遮罩效果以及透明抠图效果

Unity组件讲解 Mask 时隔多年，今天咱们继续进阶课程，这几年变化很大，但是一直还是从事Unity行业，行业虽难，依旧坚持，以后会养成习惯，定期更新，希望小伙伴们监督，有想学习…...

编程日记 2025/8/8 10:38:20

本地部署Jina AI Reader：用Docker打造你的智能解析引擎

本地部署Jina AI Reader：用Docker打造你的智能解析引擎 🌟 引言：为什么需要本地部署？📌 场景应用图谱🔧 部署指南（Linux环境）1. 环境准备2. Docker部署3. 验证服务状态 &#x1f680…...

编程日记 2025/8/10 5:49:44

【MyBatis Plus 逻辑删除详解】

文章目录 MyBatis Plus 逻辑删除详解前言什么是逻辑删除？MyBatis Plus 中的逻辑删除1. 添加逻辑删除字段2. 实体类的配置3. 配置 MyBatis Plus4. 使用逻辑删除5. 查询逻辑删除的记录 MyBatis Plus 逻辑删除详解前言 MyBatis Plus 是一个强大的持久化框架&#xf…...

编程日记 2025/8/9 20:54:14

Unity--GPT-SoVITS接入、处理GPTAPI的SSE响应流

GPT-SoVITS GPT-SoVITS- v2（v3也可以，两者对模型文件具有兼容） 点击后会进入新的游览器网页 ----- 看了一圈，发现主要问题集中在模型的训练很需要CPU，也就是模型的制作上，问题很多，如果有现有…...

编程日记 2025/8/7 20:17:42

一次Linux下 .net 调试经历

背景： Xt160Api, 之前在windows下用.net调用，没有任何问题。但是移植到Linux去后，.net程序调用 init(config_path) 总是报错 /root/test 找不到 traderApi.ini (/root/test 是程序目录) 然后退出程序解决过程: 于是考虑是不是参数传错了&…...

编程日记 2025/8/11 15:57:45

Manus 技术探索 - 使用 gVisor 在沙箱内运行 Ubuntu 容器并通过远程浏览器访问

在容器化技术中，gVisor 为运行不信任的工作负载提供了额外的安全隔离。本文将详细介绍如何利用 gVisor 运行带 GUI 的 Ubuntu 容器，并通过 VNC/NoVNC 实现远程浏览器访问，从而轻松控制容器内的桌面环境。 1. 安装 gVisor 如果你还没有安装 …...

编程日记 2025/8/8 8:02:08

PentestGPT 下载

PentestGPT 下载 PentestGPT 介绍 PentestGPT（Penetration Testing GPT）是一个基于大语言模型（LLM）的智能渗透测试助手。它结合了 ChatGPT（或其他 GPT 模型）与渗透测试工具，帮助安全研究人员自…...

编程日记 2025/8/13 9:14:22

Day07 -实例非http/s数据包抓取工具的使用：科来 wrieshark 封包监听工具

引入：由于我们day06正确为模拟器配置好了抓包环境，现在用bp去抓取模拟器web包是可以抓取到的，但是某些小程序 & pc端的app 都是有走非http/https协议的数据包的，那么我们就需要用不同的工具去抓取这些其他协议的数据包。工具…...

编程日记 2025/8/10 1:24:12

机器学习 [白板推导]（三）[线性分类]

4. 线性分类 4.1. 线性分类的典型模型硬分类：输出结果只有0或1这种离散结果； 感知机线性判别分析 Fisher 软分类：会输出0-1之间的值作为各个类别的概率； 概率生成模型：高斯判别分析GDA、朴素贝叶斯，主要…...

编程日记 2025/8/3 1:37:51

c# 查找相似颜色算法

下是一个基于欧几里得距离的C#颜色相似度查找算法实现，包含详细注释和优化策略： using System; using System.Collections.Generic;public class ColorMatcher {// 颜色容器 - 使用字典存储颜色ID到RGB的映射private readonly Dictionary<int, byte[]> _colorDictiona…...

编程日记 2025/8/9 5:07:02

【数据分析】读取文件

3. 读取指定列针对只需要读取数据中的某一列或多列的情况，pd.read_csv()函数提供了一个参数：usecols，将包含对应的columns的列表传入该参数即可。上面，我们学习了读取 "payment" 和 "items_count" 这…...

编程日记 2025/8/10 19:09:15

全星研发管理APQP软件系统：助力汽车零部件企业高效研发，打造核心竞争力

在竞争日益激烈的汽车零部件行业，产品质量和研发效率直接影响企业的生存与发展。APQP（先期产品质量策划）作为行业的研发管理框架，能够有效提升产品质量和研发效率。然而，传统的APQP管理方式往往面临流程繁琐、信息分散…...

编程日记 2025/8/13 9:55:34

ccf3501密码

//密码 #include<iostream> #include<cstring> using namespace std; int panduan(char a[]){int lstrlen(a);int s0;int zm0,sz0,t0;int b[26]{0},c[26]{0},d[10]{0},e0,f0;while(s<l&&l>6){if(a[s]<Z&&a[s]>A){b[a[s]-A];zm;}if(a[s…...

编程日记 2025/8/8 7:40:09

kali之netdiscover

kali之netdiscover Netdiscover 是 Kali Linux 中一款用于网络发现和主机扫描的工具。它通过主动发送 ARP 请求来识别局域网中的活动主机，并显示它们的 IP 地址、MAC 地址和网卡厂商信息。Netdiscover 特别适用于局域网内的主机发现和网络映射。 1. Netdiscover 的…...

编程日记 2025/8/8 4:27:54

Leetcode-2272. Substring With Largest Variance [C++][Java]

目录一、题目描述二、解题思路【C】【Java】 Leetcode-2272. Substring With Largest Variancehttps://leetcode.com/problems/substring-with-largest-variance/description/2272. 最大波动的子字符串 - 力扣（LeetCode）2272. 最大波动的子字符串…...

编程日记 2025/8/8 20:32:24

【AI】技术人如何系统学习AI大模型应用开发？

从理论认知到全栈落地的完整指南一、认知突破：理解大模型的技术本质（1-2周） 1.1 基础理论筑基必学内容大模型演进脉络：从Transformer到GPT-4的技术跃迁核心机制解析：注意力机制、位置编码、自监督学习关键能力边界…...

编程日记 2025/8/13 5:36:09

级联树SELECTTREE格式调整

步骤： 1、将全部列表设置成Map<Long, List<Obejct>> map的格式，方便查看每个父级对应的子列表，减少循环次数 2、对这个map进行递归，重新进行级联树的集合调整，将子集放置在对应的childs里面。 public Dyna…...

编程日记 2025/8/5 15:01:31

深入理解静态与动态代理设计模式：从理论到实践

静态代理设计模式 1.为什么需要代理设计模式？ javaEE分层开发中，哪个层次对于我们来讲最重要 DAO---->Service---->Controller JavaEE分层中，最为重要的是Service层 Service层包含了那些代码 Service层核心功能(几十行上百代码) 额外…...

编程日记 2025/8/6 0:36:36

NET进行CAD二次开发之二

本文主要针对CAD 二次开发入门与实践：以 C# 为例_c# cad-CSDN博客的一些实践问题做一些补充。一、DLL介绍在 AutoCAD 中，accoremgd.dll、acdbmgd.dll 和 acmgd.dll 都是与.NET API 相关的动态链接库，它们在使用.NET 语言（如 C#、VB.NET）进行 AutoCAD 二次开发时起着关…...

编程日记 2025/8/6 13:10:39