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

JavaScript-DOM-02

news 来源：原创 2025/7/1 9:57:04

自定义属性：


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.card{width: 100px;height: 100px;background-color: aqua;border: 1px solid black;}</style>
</head>
<body><!-- 固有属性  id class style src href  --><!-- 自定义属性 有时候我们希望自己存一些自己定义的属性 作用：存值 --><!--我们希望就是目前是有一列商品 但是我希望点击的时候 能够跳转到新的页面 肉眼可见没什么用，而是我们要想办法就是让程序也可以清晰可见 --><!-- 我们先自定义一个属性名为Product-id  然后我点击的时候我希望拿到这个属性--><div class="card" product-id="1">商品</div><div class="card">商品</div><div class="card">商品</div><div class="card">商品</div><div class="card">商品</div></body>
<script>//我们先去拿到所有的商品 var getProducts=document.querySelectorAll('.card')console.log(getProducts);getProducts.forEach(function (ele,index) {// 拿到每一个div对象console.log(ele);console.log(ele.className);// 重点：这里我们取自定义属性名的方法console.log(ele.getAttribute('product-id'));// 所以这里我们判断 记住 null就是为false在前端是这样的 我们用可以这种方法去存if(!ele.getAttribute('product-id')){// 大写驼峰不识别ele.setAttribute('product-id',index)}})</script>
</html>

事件:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 1.通过标签属性绑定点击事件  div onclick="函数调用"></div> 满足了三个条件 事件源：div 事件类型:onclick或者是一个鼠标键盘的行为  事件源程序：放到onclick里面的--><div onclick="testOne(this)">这是一行字</div><button class="btn">第二绑定方式</button><!--  --><span>xxxx</span><button class="demo-btn">这是第二个按钮</button><!-- 表单输入标签 --><input type="text" class="box"></body>
<script>// 事件重点中的重点 事件字面上来说就是可以被js检测到的行为，点击，拖拽，键盘，鼠标，对我这个网页的交互行为// 我们针对用户的行为去做代码上的指定事情// 表单标签就有输入事件// 事件的三大部分// 事件源：比如我点击一个按钮 这个按钮就是事件源// 事件类型：事件的触发方式：单击，双击 长按// 事件程序：对于这个事件源我要做什么事情，比如我点击一个按钮 右侧要打开一个列表 那么打开的这个过程就是我们要写的// 记住只要是事件 都包含两个参数 一个是事件参数event自带（保存一些事件相关信息） 一个是事件源的指向（this 本质就是自身的DOM对象）// 开发者工具切换设备仿真 鼠标点击 和手机触摸// 绑定的三种方式// 声明一个函数 源程序的function testOne(_this) {console.log('你触发了我，我真的谢谢你！！！');// 现在这个this指向整个html对象上去了  通过标签属性绑定的是没有this的 除非在()里面声明 需要手动传入console.log(_this.innerText);}// 2.通过DOM对象.事件的绑定var btn=document.querySelector('.btn')// 直接写事件 btn.onclick=function testTwo() {console.log("Two Two Two");}// 利用DOM对象.addEventListener 传两个参数 一个是绑定参数的类型 一个是源程序   那么第一个参数中如果是前缀有on的都可以不用写document.querySelector('span').addEventListener('click',function testThree() {console.log("this is the third Method");console.log(event);console.log(this.innerText);})
</script>
<script>//   鼠标悬浮事件 鼠标移进去就修改颜色样式var demoBtn=document.querySelector('.demo-btn')demoBtn.onmouseover=function(){console.log('dnksmxksmxksmsd');//但是移出去还没有设置变回来demoBtn.style.backgroundColor='red'}demoBtn.onmouseout=function(){demoBtn.style.backgroundColor='green'   }// 键盘事件一般是用在表单输入标签上面 以及我们可以设置如果输入非法字符就怎么样的一个思路 以及视频的快进（去判断按的按钮是否是左键右键 如果是前进几秒倒退几秒）var boxDom=document.querySelector('input')boxDom.onkeydown=function(){console.log(this);console.log(event);var test=''if(isNaN(event.key)){this.value=test}}// 文档对象也能添加事件 表示说当我进入整个网站页面 我点击哪个触发哪些事件</script>
</html>

冒泡事件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="father">父亲<button class="child">孩子</button></div></body><script>// 冒泡事件触发的前提条件：// 嵌套层级上有相同的触发事件类型var father =document.querySelector('.father')var child=document.querySelector('.child')father.onclick=function(){console.log('点击了父亲');event.stopPropagation()}// 当我点击孩子的时候 父亲这时候也触发了两个都触发了 这个就是冒泡排序 一层一层往上触发 先自己 然后哪一层有 就往上触发child.onclick=function(){console.log('点击了孩子');// 所以我们必须禁止冒泡 因为假如一个界面一个商品的界面有几个立即购买，查看商品详情 那么我不可能点一下同时触发两次。只停止自己的//  所以这种嵌套我们必须每一个function里面都写event.stopPropagation()}</script>
</html>

默认事件：（了解框架帮我们做好了）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="https://cn.bing.com/?form=000047&ocid=msedgntp&pc=CNNDDB&cvid=682bcc6ea3704a9688bbb3a3b06ac7b3&ei=10"><input type="text"><!-- 只要这边有按钮就会有提交效果，跳转网页到action的网址路径中去 --><!--  如果我要输入值校验 来不及校验就走掉 我们要在标签提交前 去做校验 --><button>提交</button></form></body>
<script>// 该方法阻止默认事件 比较少用 但是冒泡事件用得会比较多document.querySelector('form button').onclick=function(){// 这样子我就可以安安心心地拿到所有值去判断event.preventDefault()}</script>
</html>

节点操作：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father{width: 100px;height: 100px;border: 1px solid black;}.title{width: 100px;height: 100px;background-color: aqua;}</style>
</head>
<body><!-- 一个标签（不是在js）一般都是元素节点 一个是文本节点 --><!-- innnerHTML两个都能够修改  --><!-- innerText只能够修改文本内容  --><div class="father"><div class="child">孩子 <span>x</span> <span>xxx</span></div><div class="brother">兄弟</div></div><div class="news-model"></div><!-- 创建一个按钮 与节点删除做测试 --><button onclick="del()">delll</button>
</body>
<script>// 现在就是要通过child去找它的兄弟 需要通过节点操作 因为如果有七八个的话没必要
// 节点操作后面也是很少用 但是这个克隆节点 比如说弹幕点击可以弹一个窗口回复（原来的位置保持不变）   或者说鼠标到弹幕停止滚动var chid=document.querySelector('.father .child')// 通过孩子可以找到父节点console.log(chid.parentElement);// 获取孩子的子节点 目前只有文本节点 我再加一个span 比较少去取文本console.log(chid.childNodes);// 一般用这种方法去取 子元素节点console.log(chid.children);// -----------------------------// 现在去拿到父亲节点var  father=document.querySelector('.father')// 拿到的是childconsole.log(father.firstElementChild);// 获取下一个相邻的兄弟console.log(chid.nextElementSibling);// child 找到里面的第一个span 然后可以一直往下找// console.log(chid.firstElementChild.nextElementSibling.nextElementSibling);// 优化 我们可以用这种方法直接找到最后一个span 基于已有childDOM对象再去找它内部的东西var  spanDOM=chid.querySelector('span:last-child')console.log(spanDOM);// 我们真正项目很少去写DOM// 就是说我们要把这些数据打到页面上去 之前的思路就是在body创建三个标签 然后分别设置样式 现在就是我们要根据这个数据去创建这样的标签// 1.先创建节点 括号表示要什么样的标签// 2.现在在代码上我们得想办法加到页面上去  现在上面创建一个存放新闻的面板var newDOMS=document.createElement('div')var data=["今天下雨","XXX","sjdjnsjd"]console.log(newDOMS);// 补充：我们一般是在加入之前 把标签的内容等构建好再加newDOMS.innerText='12235'newDOMS.classList.add('title')// 3.找到要添加的目标var targetNewModel=document.querySelector('.news-model')// 在内部往后加 一般是往后 括号填入创建好的 最初都是创建好的定死的，数据不可控 没办法根据数据的内容和数量去创建targetNewModel.appendChild(newDOMS)// 动态添加创建节点data.forEach(function (ele) {var newDOMS=document.createElement('div')newDOMS.innerText=ele// 在这边我们也可以去添加事件newDOMS.onclick=function(){console.log('别再点我了 谢谢');}newDOMS.classList.add('title')targetNewModel.appendChild(newDOMS)// 所以只要我有数据我就可以根据数据的量和数据的内容去创建，动态的把页面构建出来 现在的网站都这样 数据不是定死 刷新一下可能就变了 都是利用DOM去操作的})// 节点删除var btn11=document.createElement('button')btn11.innerText='mashang'// 加在body的最后面 只是测试document.querySelector('body').appendChild(btn11)function del(){console.log(btn11);// 调用该函数 删除 代码层面上还在 页面上已经不存在了 btn11.remove()}// 节点克隆// 我现在想要把整个father节点给它克隆出来  没有true的话克隆的只有当前father的元素   true的话就是father里面的元素也能够被克隆//   与被克隆毫无相关var getDivFatherByClone=document.querySelector('.father').cloneNode()console.log(getDivFatherByClone);</script>
</html>

JavaScript-DOM-02

自定义属性： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>…...

编程日记 2025/7/1 9:57:04

跨部门项目管理优化：告别邮件依赖

1. 工具整合 1.1 协作平台集中化 1.1.1 一体化协作工具优势使用Microsoft Teams、Slack等一体化协作工具替代邮件，集成即时消息、文件共享、任务分配和视频会议功能，减少工具切换成本，提高沟通效率。 1.1.2 具体应用案例在Teams中创建项目频道，关联任务看板（Planner）…...

编程日记 2025/7/1 9:14:21

ADB常用语句

目录基本语句 pm 包管理操作查看文件夹内容查看文件内容删除文件 dumpsys查看系统服务状态 logcat保存日志日志级别基本语句查看是否安装成功 adb version查看是否连接成功 adb devices断开连接 adb disconnect进入安卓系统 adb shell 退出安卓系统 exit…...

编程日记 2025/7/1 8:39:00

阿里发布扩散模型Wan VACE，全面支持生图、生视频、图像编辑，适配低显存～

项目背景详述推出与目的 Wan2.1-VACE 于 2025 年 5 月 14 日发布，作为一个综合模型，旨在统一视频生成和编辑任务。其目标是解决视频处理中的关键挑战，即在时间和空间维度上保持一致性。该模型支持多种任务，包括参考到视频生成&a…...

编程日记 2025/7/1 9:00:01

谷歌开源轻量级多模态文本生成模型：gemma-3n-E4B-it-litert-preview

一、Gemma 3n模型概述 1.1 模型简介 Gemma 3n是Google DeepMind开发的一系列轻量级、最先进的开源模型。这些模型基于与Gemini模型相同的研究和技术构建，适合多种内容理解任务，如问答、摘要和推理等。 1.2 模型特点 Gemma 3n模型专为在资源受限设备上…...

编程日记 2025/7/1 1:24:01

【Linux】了解消息队列 system V信号量 IPC原理

🌻个人主页：路飞雪吖~ 🌠专栏：Linux 目录一、了解消息队列 ✨消息队列函数 🍔ftok() --- 系统调用设置key 🍔 msgget() 🍔msgctl() 🍔msgsnd() ✨消息队列的管理指令二、了…...

编程日记 2025/7/1 8:48:31

Git Clone 原理详解：为什么它比本地文件复制更快？ -优雅草卓伊凡

Git Clone 原理详解：为什么它比本地文件复制更快？ -优雅草卓伊凡今天有朋友问我：“为什么 git clone 下载文件这么快？而我在本地复制粘贴文件时，速度却慢得多？” 这个问题很有意思，因为它涉及…...

编程日记 2025/7/1 9:40:55

高级认知型Agent

目标：构建一个具备自主规划、多步推理、工具使用、自我反思和环境交互能力的智能代理，使其能够高效、可靠地完成复杂任务。核心理念： Agent的智能涌现于一个精密的认知循环：感知 (Perceive) -> 理解与规划 (Think/Plan - 想) -> 信息获取 (Search/Act - 查) -&g…...

编程日记 2025/7/1 4:20:20

网络爬虫（Web Crawler）详解

网络爬虫（Web Crawler）详解 1. 基本概念与核心目标定义：网络爬虫是一种自动化的程序，通过HTTP协议访问网页，提取并存储数据（如文本、链接、图片），并根据策略递归访问新链接。核心目标：数据采集：抓取特定网站或全网公开数据。索引构建：为搜索引擎提供页面内容（如…...

编程日记 2025/6/27 23:31:18

SQL 数值计算全解析：ABS、CEIL、FLOOR与ROUND函数深度精讲

一、问题拆解：数值计算需求分析 1.1 业务需求转换题目：在numbers表中计算每个数值的绝对值、向上取整、向下取整和四舍五入值。关键分析点： 需要对同一字段进行四种不同的数学运算每种运算对应一个特定的SQL数学函数需保持原始数据完整…...

编程日记 2025/7/1 9:57:03

智能导览系统多语言解说与AI问答功能：从deepseek到景区知识图谱的构建

本文面向文旅行业技术决策者、GIS 开发者、AI 算法工程师，旨在解决不够智能化导致游客体验不足的核心痛点，提供从技术选型到落地部署的全链路解决方案。如需获取智慧景区导览系统解决方案请前往文章最下方获取，如有项目合作及技术交流欢迎私…...

编程日记 2025/7/1 8:07:37

10.18 LangChain ToolMessage实战：多轮交互与状态管理全解析

使用 ToolMessage 管理工具调用输出关键词：LangChain ToolMessage, 工具调用管理, 多轮交互控制, 状态持久化, 输出解析 1. ToolMessage 的定位与价值在 LangChain v0.3 的 Agent 工作流中，ToolMessage 是专门用于管理工具调用输出的消息类型，主要解决以下核心问题： #m…...

编程日记 2025/7/1 9:14:18

linux基础操作11------（运行级别）

一.前言这个是linux最后一章节内容，主要还是介绍一下，这个就和安全有关系了，内容还是很多的，但是呢，大家还是做个了解就好了。二.权限掩码运行级别 0 关机运行级别 1 单用户 ，这个类似于windows安全…...

编程日记 2025/7/1 8:16:27

Python Ray 扩展指南

Python Ray 扩展指南 Ray 是一个开源的分布式计算框架，专为扩展 Python 应用程序而设计，尤其在人工智能和机器学习领域表现出色。它提供了简单的 API，使开发者能够轻松编写并行和分布式代码，而无需关注底层复杂性。以下是关于 Py…...

编程日记 2025/7/1 7:48:25

笑林广记读书笔记三

《锯箭杆》一人往观武场，飞箭误中其臂。请外科医治疗，医遂用小锯截其外露箭杆，即索谢礼。问：“内截箭头如何？” 医曰：“此是内科的事，你去找他们。” 白话翻译： 有…...

编程日记 2025/7/1 9:38:07

npm、pnpm、yarn 各自优劣深度剖析

在前端开发领域，包管理工具是开发者的得力助手，它们负责处理项目中的依赖安装、更新与管理。npm、pnpm、yarn 是目前最主流的三款包管理工具，它们在功能上有诸多相似之处，但在实际使用中又各有优劣。本文将结合包管理工具常见问题…...

编程日记 2025/7/1 9:17:31

Ulisses Braga-Neto《模式识别和机器学习基础》

模式识别和机器学习基础 [专著] Fundamentals of pattern recognition and machine learning / (美)乌利塞斯布拉加－内托(Ulisses Braga-Neto)著 ; 潘巍[等]译推荐这本书，作者有自己的见解，而且提供代码。问题是难度高，对于初学…...

编程日记 2025/6/27 22:51:31

python查询elasticsearch 获取指定字段的值的list

from elasticsearch import Elasticsearch from datetime import datetime, timedelta# 1.connect to Elasticsearch------------------------------------------------------------------------------------------------------ # prod连接到 Elasticsearch es_of_prod Elasti…...

编程日记 2025/6/27 23:35:32

百度Q1财报：总营收325亿元超预期智能云同比增速达42%

发布 | 大力财经 5月21日晚，百度发布2025年第一季度财报，显示一季度总营收达325亿元，百度核心营收255亿元，同比增长7%，均超市场预期。一季度，百度核心净利润同比增48%至76.3亿元，智能云持续强劲…...

编程日记 2025/6/27 22:00:55

BurpSuite Montoya API 详解

文章目录前言1. API 结构1.1 概述1.2 API文件源码解析 2. BurpExtension 接口3. MontoyaApi接口4. package burp.api.montoya.proxy4.1 Proxy 接口4.2 ProxyRequestHandler接口4.3 Demo 5. BurpSuite burpSuite()6. Extension extension()7. Http http()参考前言我们已经学…...

编程日记 2025/6/29 19:37:39

oracle使用SPM控制执行计划

一 SPM介绍 Oracle在11G中推出了SPM（SQL Plan management）,SPM是一种主动的稳定执行计划的手段，能够保证只有被验证过的执行计划才会被启用，当由于种种原因（比如统计信息的变更）而导致目标SQL产生了新的执…...

编程日记 2025/6/27 22:51:36

YCKC【二分查找专题】题解

数的范围题解点击跳转题目链接：数的范围比较经典的二分查找例题，不做过多赘述。注意看二分的对象以及最终想求什么：想求尽可能大 ，那么就是最大值类型的二分；想求尽可能小，就是最小值类型的二分。注意二分…...

编程日记 2025/6/30 1:41:12

【Java高阶面经：微服务篇】8.高可用全链路治理：第三方接口不稳定的全场景解决方案

一、第三方接口治理的核心挑战与架构设计 1.1 不稳定接口的典型特征维度表现影响范围响应时间P99超过2秒，波动幅度大（如100ms~5s）导致前端超时，用户体验恶化错误率随机返回5xx/429，日均故障3次以上核心业务流程中断，交易失败率上升协议不一致多版本API共存，字段定义不…...

编程日记 2025/6/27 23:40:03

关于FPGA 和 ASIC设计选择方向的讨论

FPGA 和 IC 设计怎么选？哪个发展更好？ 一句话总结： 如果你学历极高，追求高薪资、愿意投入长期学习，目标是进入大型芯片公司，建议走 IC（ASIC）设计；如果你更看重灵活性、创…...

编程日记 2025/6/29 2:11:09

项目中常用的docker指令

1. docker ps 查看当前正在运行的容器。 docker ps -a 这将列出所有容器，包括停止运行的。 2. docker exec 在已经运行的容器中执行命令的工具启动一个交互式 Bash 会话 docker exec -it my-container bash介绍 docker exec 命令 docker exec 是 Docker 提供的…...

编程日记 2025/6/27 23:13:01

以加减法计算器为例，了解C++命名作用域与函数调用

************* C topic: 命名作用域与函数调用 ************* The concept is fully introducted in the last artical. Please refer to 抽象：C命名作用域与函数调用-CSDN博客 And lets make a calculator to review the basic structure in c. 1、全局函数 A…...

编程日记 2025/6/30 2:07:41

MySQL EXPLAIN 使用详解与执行计划分析优化

MySQL EXPLAIN 使用详解与执行计划分析优化一、什么是 EXPLAIN？ EXPLAIN 是 MySQL 提供的 SQL 语句分析工具，可以显示 SQL 语句在执行时的执行计划，包括表的访问顺序、使用的索引、连接类型、扫描行数等。通过分析 EXPLAIN 的输出结果&…...

编程日记 2025/6/27 22:51:38

Arthas：Java诊断利器实战指南

在Java应用开发和运维中，线上问题排查往往是一场与时间的赛跑。传统的日志分析、重启大法或JVM工具（如jstack、jmap）虽然有效，但存在操作复杂、无法实时追踪等问题。Arthas作为阿里巴巴开源的Java诊断工具，凭借无需重启…...

编程日记 2025/6/27 5:56:08

一文读懂迁移学习：从理论到实践

在机器学习和深度学习的快速发展历程中，数据和计算资源成为了制约模型训练的关键因素。当我们面对新的任务时，重新训练一个从头开始的模型往往耗时耗力，而且在数据量不足的情况下，模型的性能也难以达到理想状态。这时，…...

编程日记 2025/6/27 23:30:56

ElasticSearch安装

ElasticSearch 脑图知识图谱地址：ProcessOn Mindmap|思维导图简介 ES是一个开源的分布式搜索和分析引擎，基于 Apache Lucene 构建，专为处理海量数据设计，支持实时搜索、分析和可视化。排行第一的搜索引擎官网地址&#xff1…...

编程日记 2025/6/27 22:51:29

c#中添加visionpro控件(联合编程)

vs添加vp控件创建窗体应用右键选择项点击确定加载CogAcqfifoTool工具拍照设置参数保存.vpp 保存为QuickBuild或者job, ToolBlock 加载保存的acq工具实例化相机工具类 //引入命名空间 using Cognex.VisionPro; //实例化一个相机工具类 CogAcqFifoTool cogAcqFifoTool n…...

编程日记 2025/6/30 20:04:58

MySQL主键与外键详解：数据关系的基石与守护者

引言在数据库设计中，主键（Primary Key）和外键（Foreign Key）是构建数据关系模型的核心工具。它们不仅保障了数据的唯一性和完整性，还实现了跨表数据关联的逻辑闭环。本文将通过实例解析这两大关键概念&…...

编程日记 2025/6/29 6:52:44

Go语言打造：超高性能分布式唯一ID生成工具

一、简介这是一个超高性能唯一ID生成工具，支持docker一键部署，提供API接入功能支持高性能生成Snowflake ID、Sonyflake ID、UUID v1、UUID v4、XID、KSUID以及自定义ID的服务可以用来生成订单编号、学号、高标准唯一标识、有序ID等等开源地址参考&#…...

编程日记 2025/7/1 4:19:21

列表计量单位显示

列表计量单位显示 E:\javaDev\tender-project-vben5\apps\web-antd\src\views\tender\material\data.ts import type { FormSchemaGetter } from #/adapter/form; import type { VxeGridProps } from #/adapter/vxe-table;import { getDictOptions } from #/utils/dict; impor…...

编程日记 2025/6/27 2:39:53

相关文章：