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 互斥锁…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误，它们的含义、原因和解决方法都有显著区别。以下是详细对比： 1. HTTP 406 (Not Acceptable) 含义： 客户端请求的内容类型与服务器支持的内容类型不匹…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架，支持"一次开发，多端部署"，可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务，为旅游应用带来…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端（Windows 使用 Git Bash，Mac/Linux 使用 Terminal）执行命令： ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明： -t rsa&#x…...
C++ 基础特性深度解析
目录 引言 一、命名空间（namespace） C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用（reference） C 中的引用 与 C 语言的对比 四、inline（内联函数…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件（System Property Definition File），用于声明和管理 Bluetooth 模块相…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如：Boss直聘（招聘方平台） 直接按照条件进行筛选 例如：…...
2023赣州旅游投资集团
单选题 1.“不登高山，不知天之高也；不临深溪，不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...