JavaWeb—js（3）
Bom
dom: document object model(文档对象模型),
是处理html、xml的标准编写接口。
节点和元素
整个页面也就是整个文档我们称之为文档节点;
文档节点使用document来表示;
页面中的所有标签我们称之为元素，使用element来表示;
如此处的文本、属性、注释等，我们称之为节点，使用node进行表示;即注释也叫注释节点、文 本也叫文本节点、属性也叫属性节点;元素也可以称为元素节点。
获取元素对象
/*通过document 对象 获取元素*///通过id获取元素对象 传入id的名称//id不能重复let div = document.getElementById('one');console.log(div)// 通过class名获取元素对象 返回的是一个数组//如果要去操作具体的对象，需要通过索引获取到对象let div2 = document.getElementsByClassName('box1');console.log(div2)//通过标签的名称获取元素对象 返回一个数组let liList= document.getElementsByTagName('li');console.log(liList)//通过name属性的值获取元素 返回一个数组 （了解）let nameList = document.getElementsByName('dzh');console.log(nameList)//通过选择器获取一个元素对象let box1 = document.querySelector('.box1');console.log(box1)//通过选择器获取多个元素对象var box2= document.querySelectorAll('div');console.log(box2)操作文本超文本
// 通过class名获取元素对象 返回的是一个数组//如果要去操作具体的对象，需要通过索引获取到对象let div = document.getElementsByClassName('box1');console.log(div)console.log(div[0].innerText)//操作元素的文本内容// div[0].innerText=' <span>我是span</span>';//操作元素的 超文本内容div[0].innerHTML='<span class="one">我是span</span>'操作对象的属性
id和class
//操作元素对象的属性// 对象名.属性名console.log(div.id)div.id='two';//操作类名console.log(div.className)//覆盖class名// div.className='box2'// 添加类名div.classList.add('box2')// 删除类名// div.classList.remove('')//替换类名// div.classList.replace('')操作自定义属性
//获取到所有的li 给每一个li添加一个唯一的index标识let liList= document.getElementsByTagName('li');for (let i = 0; i < liList.length; i++) {const element = liList[i];// 设置属性名和属性值element.setAttribute('index',i)console.log(element.getAttribute('index'))}
操作元素行内样式
//设置当前元素的行内样式
div.style.color='red';
div.style.width='100px';
div.style.height='100px'// font-size fontSize background-color backgroundColor
div.style.backgroundColor='green';
获取元素的外部样式
//获取元素的外部样式
console.log(window.getComputedStyle(div).backgroundColor)
console.log(window.getComputedStyle(div).width)
操作checkbox的checked属性
//先判断 有没有选中if(checkbox.checked){//如果是选中 就取消选中checkbox.checked=false;btn.innerText='点击选中'}else{checkbox.checked=true;btn.innerText='点击取消选中'}节点操作
<!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><button onclick="del()">删除</button><button onclick="replace()">替换</button></body>
<script>// 创建一个元素节点 传入元素的名称let div = document.createElement('div');div.style.width='100px'div.style.height='100px'div.style.backgroundColor='red'//创建文本节点， 等同于 innerText属性
// let text = document.createTextNode('我是div');
// div.appendChild(text)
div.innerText='我是div'console.log(div)//获取到body标签的对象let body = document.querySelector('body');console.log(body)//追加子节点body.appendChild(div)function del(){//点击按钮 删除div节点//前提需要有这个节点，否则会报错body.removeChild(div)}function replace(){//点击按钮 将原来的div节点 替换成 span节点let span= document.createElement('span');span.style.color='pink';span.style.fontSize='25px'span.innerText='我是span'//(插入的节点，被替换的节点) //要保证 被替换节点存在body.replaceChild(span,div)}//查看当前元素的所有子节点let childList = body.childNodesconsole.log(childList)
</script>
</html>
相关文章：
JavaWeb—js（3）
Bom dom: document object model(文档对象模型), 是处理html、xml的标准编写接口。 节点和元素 整个页面也就是整个文档我们称之为文档节点; 文档节点使用document来表示; 页面中的所有标签我们称之为元素，使用element来表示; 如此处的文本、属性、注释等&…...
PLSQL Day4
--使用显式游标更新行，对所有salesman增加500奖金： declare cursor s_cursor is select * from emp where job SALESMAN for update; begin for e_s in s_cursor loop update emp set comm nvl(comm,0)500 where current of s_cur…...
git合并报错：git -c core.quotepath=false -c log.showSignature=false merge r
这个错误通常发生在 Git 尝试合并两个没有共同祖先的历史时，比如在合并不同的分支或仓库时，可以尝试以下几种方法： 允许不相关历史的合并: git merge release-3.6 --allow-unrelated-histories这个选项告诉 Git 允许合并两个没有共同历史的分…...
云原生存储：使用MinIO与Spring整合
在现代云原生应用开发中，高效、可靠的存储解决方案是至关重要的。MinIO是一个高性能、分布式的对象存储系统，它与Amazon S3兼容，非常适合在Kubernetes等云原生环境中使用。本文将详细介绍如何在Spring Boot应用中整合MinIO，并提供…...
等保测评新趋势：应对数字化转型中的安全挑战
随着信息技术的飞速发展，数字化转型已成为企业提升竞争力、优化运营效率的重要手段。然而，这一转型过程中，企业也面临着前所未有的安全挑战。等保测评（信息安全等级保护测评）作为保障信息系统安全的重要手段࿰…...
使用esptool工具备份ESP32的固件（从芯片中备份下来固件）
本文以Windows电脑为例 板子为esp32-c3 1下载python 可在官网中下载,此处不进行讲解 使用如下代码查看是否安装了 Python（终端输入） python 2下载esptool 在终端输入如下代码即可下载 使用 pip（推荐）: 在你已经安装的 Pyth…...
JS进阶-解析赋值
学习目标： 掌握解析赋值 学习内容： 解构赋值数组解构对象解构筛选数组filter方法（重点） 解构赋值： 解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值。 分为： 数组解构对象解…...
Java虚拟机面试题汇总
目录 1. JVM的主要组成部分及其作用？ 1.1 运行时数据区划分？ 1.2 哪些区域可能会发生OOM？ 1.3 堆和栈的区别？ 1.4 内存模型中的happen-before是什么？ 2. HotSpot虚拟机对象创建流程？ 2.1 类加载过程…...
C++休眠的方法
Windows的API函数 Sleep(INFINITE); 休眠时间为永久 Linux的API函数sleep 没有直接表示无限时间的参数，根据POSIX标准，sleep() 函数的参数应该是 unsigned int 类型，因此最大可以接受的参数值是 UINT_MAX，即 4294967295 秒。sleep…...
选择排序（C语言版）
选择排序是一种简单直观的排序算法 算法实现 首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置。 再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。 重复第二步&…...
基于CentOS Stream 9平台搭建FRP内网穿透
内网穿透方法很多，本文以github上很火的frp为例 1.frp官方 文档：https://gofrp.org/zh-cn/docs/overview/ 1.1 下载 https://github.com/fatedier/frp/releases 选中合适的版本 2. 服务端（服务器）搭建frps 需要公网IP服务器 选…...
Redis管理禁用命令
在redis数据量比较大时，执行 keys * ，fluashdb 这些命令，会导致redis长时间阻塞，大量请求被阻塞，cpu飙升，严重可能导致redis宕机，数据库雪崩。所以一些命令在生产环境禁止使用。 Redis 禁用命令…...
RFID智能锁控系统在物流安全运输中的应用与效益分析
一、物流锁控系统现状与挑战 1.1 传统锁控系统的局限性 安全性不足：机械锁容易被撬开或钥匙被复制，导致货物在运输过程中面临被盗风险。 无法实时追踪：一旦货物离开发货点，物流公司无法实时监控货物状态，增加了货物…...
WPF设置全局样式
目的 创建一个资源字典，自动引入到各个Window或者UserControl中，可以随意使用。或者引入多个控件包，为了做兼容，保证可以引用多个控件库。 1. 定义资源字典 首先，你需要创建一个XAML文件来定义你的资源字典…...
【福利】代码公开！咸鱼之王自动答题脚本
转载请注明出处：小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你，欢迎[点赞、收藏、关注]哦~ 微信或QQ打开咸鱼之王小程序，进入答题界面，运行main.py。期间不要动鼠标。 可自行更改代码来适配自己的需求~ 可以按照示例图片…...
ChatGPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建技术
在过去几年中，人工智能领域的发展迅猛，尤其是大语言模型的应用，为各行各业带来了前所未有的创新与突破。从ChatGPT-3.5的推出到GPT Store的上线，再到最新的多模态交互ChatGPT-4o，OpenAI不断引领科技潮流，推…...
使用clion刷leetcode
如何优雅的使用clion刷leetcode 安装插件：LeetCode Editor) 插件配置： 这样我们每打开一个项目，就会创建类似的文件 我们的项目结构： 我们在题解文件中导入头文件myHeader.h并将新建的文件添加到cmakelists.txt文件，…...
图解HTTP（5、与 HTTP 协作的 Web 服务器 6、HTTP 首部）
5、与 HTTP 协作的 Web 服务器 一台 Web 服务器可搭建多个独立域名的 Web 网站，也可作为通信路径上的中转服务器提升传输效率。 用单台虚拟主机实现多个域名 在相同的 IP 地址下，由于虚拟主机可以寄存多个不同主机名和域名的 Web 网站，因此…...
JS之防抖和节流
防抖 (debounce) 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 ps: 重置普攻，百度翻译要输完停止一定时间后才翻译。 没有防抖和节流的缺点： 函数触发…...
Open3D 点云PCA算法配准（粗配准）
目录 一、概述 1.1PCA配准的原理 1.2PCA配准的应用 二、代码实现 三、实现效果 3.1原始点云 3.2配准后点云 3.3变换矩阵 一、概述 PCA（Principal Component Analysis，主成分分析）是一种用于降维和特征提取的统计方法。在点云处理中，PCA可以用于点云配准（a…...
Python热重载工具Reloadium：实现函数级代码热更新与AI辅助开发
1. 项目概述：Reloadium，一个改变Python开发工作流的“时光机”如果你和我一样，是个常年泡在Python项目里的开发者，那你一定对“修改代码 -> 停止程序 -> 重新运行 -> 等待启动”这个循环深恶痛绝。尤其是在调试Web后端&a…...
阴阳师自动化脚本终极指南：如何用OnmyojiAutoScript一键托管你的日常游戏
阴阳师自动化脚本终极指南：如何用OnmyojiAutoScript一键托管你的日常游戏 【免费下载链接】OnmyojiAutoScript Onmyoji Auto Script | 阴阳师脚本 项目地址: https://gitcode.com/gh_mirrors/on/OnmyojiAutoScript 还在为阴阳师繁琐的日常任务而烦恼吗&#…...
终极指南：如何用3步清理Windows右键菜单，让电脑操作效率翻倍
终极指南：如何用3步清理Windows右键菜单，让电脑操作效率翻倍 【免费下载链接】ContextMenuManager 🖱️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是否曾被Windows右键菜单的…...
【Google全家桶AI功能2026终极前瞻】：20位谷歌AI Lab核心工程师闭门透露的7大颠覆性升级路径
更多请点击： https://intelliparadigm.com 第一章：Google全家桶AI功能2026升级全景图谱 2026年，Google正式将Gemini 3.5 Ultra深度集成至全系生产力产品中，实现跨端、实时、上下文感知的AI协同。核心升级聚焦于“意图理解前置化”…...
ARM CoreSight TRBPIDR寄存器详解与调试技巧
1. ARM CoreSight TRBPIDR寄存器概述在嵌入式系统调试领域，ARM CoreSight架构提供了一套完整的调试和追踪解决方案。其中TRBPIDR（Trace Buffer Peripheral Identification Register）系列寄存器是识别和配置追踪缓冲区的关键组件。这些寄存器遵…...
收藏这篇就够了！日薪 2700 护网 HW 面试攻略，2026 护网全流程提前吃透
前言 参与hvv的事情还是要想办法规避掉很多坑的。网络安全这个行业现阶段还是主要政策驱动，后面应该是客户意识，现在用户教育成本明显比以前低太多。 1.关于HVV的一个简单流程 首先我带大家从甲方和厂商的角度来分解一下整个护网流程的核心逻辑 第一阶段…...
PortAudio性能测试与调优：如何实现最低延迟音频处理的完整指南
PortAudio性能测试与调优：如何实现最低延迟音频处理的完整指南 【免费下载链接】portaudio PortAudio is a cross-platform, open-source C language library for real-time audio input and output. 项目地址: https://gitcode.com/gh_mirrors/po/portaudio …...
InputTip：提升表单体验的动态输入引导组件设计与实战
1. 项目概述：一个被低估的输入增强工具 在桌面应用开发中，我们常常会花费大量精力去构建复杂的业务逻辑和炫酷的界面，却容易忽略一个直接影响用户体验的细节： 输入引导 。回想一下，你是否遇到过这样的场景࿱…...
Factool开源框架：构建可信AI的事实核查自动化流水线
1. 项目概述：从“事实核查”到“可信AI”的基石工具在信息爆炸的时代，我们每天都被海量的文本内容包围——新闻稿、分析报告、产品介绍、学术论文，甚至是AI模型自己生成的回答。一个核心的挑战随之而来：如何快速、准确地判断一段文…...
统一AI编程助手配置：使用agent-anatomy提升开发效率与一致性
1. 项目概述：一个配置文件夹，统一所有AI编程助手如果你和我一样，日常开发中会同时使用Claude Code、Cursor、GitHub Copilot等多个AI编程助手，那你一定也经历过同样的烦恼：每个助手都需要自己独立的配置文件。今天要介…...