Java Web学习笔记15——DOM对象
DOM：
概念：Document Object Model： 文档对象模型
将标记语言的各个组成部分封装为对应的对象：
Document: 整个文档对象
Element：元素对象
Attribute： 属性对象
Text：文本对象
Comment：注释对象
JavaScript通过DOM，就能够对HTML进行操作：
1）改变HTML元素的内容；
2）改变HTML元素的样式；
3）对HTML DOM事件作出反应；
4）添加和删除HTML元素；
DOM是W3C的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分。
Core DOM - 所有文档类型的标准模型。
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
XML DOM - XML文档的标准类型
HTML DOM - HTML 文档的标准模型
将所有的标签都包装成对象。
image： <img>
Button: <input type="button">
HTML中Element对象可以通过Document对象获取，而Document对象是通过Window对象获取的。
Document对象中提供了以下获取Element元素对象的函数：
获取Element元素的四种方式：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM</title>
</head><body><img id="h1" src="img/off.gif"> <br><br><div class="cls">传智教育</div> <br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>// 1. 获取Element元素// 1.1 获取元素- 根据ID获取 // var image = document.getElementById('h1');// alert(image);// 1.2 获取元素 - 根据标签获取// var divs = document.getElementsByTagName('div');// for(let i = 0; i < divs.length; i++) {// alert(divs[i]);// }// 1.3 获取元素 - 根据name获取// var hobbys = document.getElementsByName('hobby');// for(let i = 0; i < hobbys.length; i++) {// alert(hobbys[i]);// }// 1.4 获取元素 - 根据class属性获取var divs = document.getElementsByClassName('cls');for(let i = 0; i < divs.length; i++) {alert(divs[i]);}</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM</title>
</head><body><img id="h1" src="img/off.gif"> <br><br><div class="cls">传智教育</div> <br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>// 1. 获取Element元素// 1.1 获取元素- 根据ID获取 // var image = document.getElementById('h1');// alert(image);// 1.2 获取元素 - 根据标签获取// var divs = document.getElementsByTagName('div');// for(let i = 0; i < divs.length; i++) {// alert(divs[i]);// }// 1.3 获取元素 - 根据name获取// var hobbys = document.getElementsByName('hobby');// for(let i = 0; i < hobbys.length; i++) {// alert(hobbys[i]);// }// 1.4 获取元素 - 根据class属性获取// var divs = document.getElementsByClassName('cls');// for(let i = 0; i < divs.length; i++) {// alert(divs[i]);// }// 2. 查询参考手册，属性和方法var divs = document.getElementsByClassName('cls');var div1 = divs[0];div1.innerHTML = "传智教育666";</script>
</html>案例：
通过DOM操作，完成如下效果：
1、点亮灯泡；
2、将所有的div标签的标签体内容后面加上：very good；
3、使所有的复选框呈现选中的状态。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM-案例</title>
</head><body><img id="h1" src="img/off.gif"> <br><br><div class="cls">传智教育</div> <br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>//1. 点亮灯泡 src的属性值var image = document.getElementById('h1');image.src = "img/on.gif";//2. 将所有div标签的内容后面加上var divs = document.getElementsByTagName('div');for(let i = 0; i < divs.length; i++) {const div = divs[i];div.innerHTML += "<font color='red'>very good</font>"; }//3. 使所有的复选框呈现选中状态var hobbys = document.getElementsByName('hobby');for(let i = 0; i < hobbys.length; i++) {const hobby = hobbys[i];hobby.checked = true;}</script>
</html>两步操作：
1）获取需要操作的元素对象；
2）查找参考手册，查看这些元素的属性和方法，来完成元素的控制。
属性和方法，就是对象思想。
相关文章：
Java Web学习笔记15——DOM对象
DOM： 概念：Document Object Model： 文档对象模型 将标记语言的各个组成部分封装为对应的对象： Document: 整个文档对象 Element：元素对象 Attribute： 属性对象 Text：文本对象 Comment&a…...
中电联系列一：rocket手把手教你理解中电联协议！
分享《一套免费开源充电桩物联网系统，是可以立马拿去商用的！》 第1部分：总则 Charging and battery swap service information exchange for electric vehicles Part 1:General 前 言 T/CEC102—2016《 电动汽车充换电服务信息交换》分为四…...
（面试官问我微服务与naocs的使用我回答了如下，面试官让我回去等通知）微服务拆分与nacos的配置使用
微服务架构 正常的小项目就是所有的功能集成在一个模块中，这样代码之间不仅非常耦合，而且修改处理的时候也非常的麻烦，应对高并发时也不好处理，所以 我们可以使用微服务架构，对项目进行模块之间的拆分，每一…...
冯喜运：6.7今日黄金原油行情分析及独家操作策略
【黄金消息面分析】：周三（6月5日），金价回升逾1.2%，收盘报每盎司2,355.49美元，全面收复前一交易日的跌幅。周三当天前公布的美国民间就业数据弱于预期，增强了美联储将在今年晚些时候降息的预期&a…...
Android 蓝牙概述
一、什么是蓝牙 蓝牙是一种短距离（一般10m内）无线通信技术。蓝牙技术允许固定和移动设备在不需要电缆的情况下进行通信和数据传输。 “蓝牙”这名称来自10世纪的丹麦国王哈拉尔德(Harald Gormsson)的外号。出身海盗家庭的哈拉尔德统一了北欧四分五裂的国…...
、rfind()、index()、rindex())
Python3 笔记：字符串的 find()、rfind()、index()、rindex()
1、find() 方法检测字符串中是否包含子字符串 str ，如果指定 beg（开始） 和 end（结束） 范围，则检查是否包含在指定范围内，如果指定范围内如果包含指定索引值，返回的是索引值在字符串中…...
【研发日记】Matlab/Simulink软件优化(二)——通信负载柔性均衡算法
文章目录 前言 背景介绍 初始代码 优化代码 分析和应用 总结 前言 见《【研发日记】Matlab/Simulink软件优化(一)——动态内存负荷压缩》 背景介绍 在一个嵌入式软件开发项目中，需要设计一个ECU节点的CAN网路数据发送，需求是在500k的通信波特率上&a…...
Python 设计模式（行为型）
文章目录 策略模式场景示例 迭代器模式场景示例 访问者模式场景示例 观察者模式场景示例 命令模式场景示例 模板方法模式场景示例 模板方法模式场景示例 事件驱动模式场景示例 责任链模式场景示例 中介者模式场景示例 状态模式场景示例 策略模式 策略模式（Strategy…...
电商API商品数据采集接口||助力电商企业采集商品大数据提高开发效率
提高开发效率：电商API接口允许不同的应用程序之间高效地进行交互，节省了大量的人力物力成本，使得开发者可以将更多时间和精力集中于自身的核心业务。 增加数据安全性：通过对数据进行安全加密，API接口实现了对数据的保护…...
Day34 事件聚合器实现消息过滤功能
当前章节，实现了消息事件过滤功能 在上一章节中，我们发现在Login视图页和Main视图页都使用了同一个事件聚合器，导致在Login视图页发送的消息也被Main 视图主页所接收，这违反了事件传递的意图和模块化设计的原则。为了解决这个问题，我们需要为事件聚合器引入消息过滤的…...
前端 JS 经典：Reflect 本质
1. 什么是 Reflect Reflect 可以调用对象的基本方法（内部方法），在 ES6 之前我们是没有任何方法去直接调用对象的基本方法的。只能间接调用，间接调用它又会给你做一些额外得事。 2. 对象的基本方法 什么是对象的基本方法呢&…...
accelerate 的一个tip：early stopping 处可能存在的bug
在分布式训练中进行提前停止时，如果每个进程都有特定的停止条件（例如验证损失），这可能不会在所有进程中同步。 因此，可能在进程 0 中发生中断，而进程 1 则不会——>这将导致代码无限期挂起，直…...
企业数据挖掘建模平台极简建模流程
泰迪智能科技企业数据挖掘建模平台是企业自主研发，面向企业级用户的快速数据处理构建模型工具。平台底层算法基于R语言、Python、Spark等引擎，使用JAVA语言开发，采用 B/S 结构，用户无需下载客户端，可直接通过浏览器进…...
使用pkg打包了一个使用了sqlite3的nodejs项目，启动后闪退
从截图来看，问题出在 sqlite3 模块上。说明在打包过程中，sqlite3 模块的 .node 文件没有正确加载。 紧急解决方法： 其实就是exe文件还需要node_modules中的sqlite3 依赖，我们直接在系统顶级放一个node_modules，且其中只…...
网络编程(UPD和TCP)
//发送数据 //UDP协议发送数据 package com.example.mysocketnet.a02UDPdemo;import java.io.IOException; import java.net.*;public class SendMessageDemo {public static void main(String[] args) throws IOException {//发送数据//1.创建DatagramSocket对象(快递公司)//…...
cesium 之 flyTo、setView、lookat
orientation配置项的参数 cesium中，朝向orientation，通常使用heading、pitch、roll这三个参数来描述 heading 通过调整heading的值，使相机朝向特定的方向朝向方向说明【北：0， 东：π/2弧度， …...
超速解读多模态InternVL-Chat1.5 ，如何做到开源SOTA——非官方首发核心技巧版（待修订）
解读InternVL-chat1.5系列 最近并行是事情太杂乱了，静下心来看一看优秀的开源项目,但是AI技术迭代这么快，现在基本是同时看五、六个方向的技术架构和代码，哪个我都不想放，都想知道原理和代码细节，还要自己训练起来&am…...
Vue 组件_动态组件+keep-alive
文章目录 Vue 动态组件 keep-alive知识点讲解业务场景实例代码实现keep-alive Vue 动态组件 keep-alive 知识点讲解 通过 Vue 的 <component> 组件和特殊的 is 属性实现的。 <!-- curentComponent 改变时组件也改变 --> <component :is"componentMap[…...
深入理解Redis：多种操作方式详解
Redis（Remote Dictionary Server）是一款高性能的开源键值存储系统，广泛应用于缓存、会话管理、实时分析等领域。它支持多种数据结构，如字符串、哈希、列表、集合和有序集合等，提供了丰富的操作命令。本篇博客将详细介绍…...
stm32太阳能追光储能系统V2
大家好，我是 小杰学长 stm32太阳能追光储能系统V2. 增加了命令行交互和内置AT指令解析框架 （就是可以用电脑串口发送at指令控制板子的所有功能） 改动了spi 换成硬件 改动了硬件电源 增加了pcb原理图 附带上pcb源文件 增加了freertos 互斥锁…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
UE5 学习系列（三）创建和移动物体
这篇博客是该系列的第三篇，是在之前两篇博客的基础上展开，主要介绍如何在操作界面中创建和拖动物体，这篇博客跟随的视频链接如下： B 站视频：s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式（Singleton Pattern&#…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
uniapp中使用aixos 报错
问题： 在uniapp中使用aixos，运行后报如下错误： AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲
文章目录 前言第一部分：体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分：体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中（图1）： mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值，最大值左侧的数值严格单调递增，最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值，最小值左侧的数值严格单调递减，最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...