JAVAWeb04-DOM
1. DOM
1.1 概述
1.1.1 官方文档
地址: https://www.w3school.com.cn/js/js_htmldom.asp
1.1.2 DOM 介绍
- DOM 全称是 Document Object Model 文档对象模型
- 就是把文档中的标签,属性,文本,转换成为对象来管理

1.2 HTML DOM(文档对象模型)
- 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
- HTML DOM 树 对象[属性,方法/函数]

1.3 document 对象
1.3.1 document 说明
- document 它管理了所有的 HTML 文档内容
- document 它是一种树结构的文档。
- 有层级关系 在 dom 中把所有的标签 都 对象化 (得到这个 html 标签的—>对象–>操作)
- 通过 document 可以访问所有的标签对象
1.3.2 doucment 对象方法一览

文档地址: https://www.w3school.com.cn/js/js_htmldom_document.asp
1.3.3 应用实例
应 用 实 例 1:
点 击 hello world, 弹 出 窗 口 获 内 容
创 建 getElementById.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>getElementById的使用</title><!--1. 先得到 h1 的 dom对象, 通过 id 获取2. 对h1对应的dom对象操作即可--><script type="text/javascript">// function getValue() {//定义函数// //myHeader 就是dom对象// var myHeader = document.getElementById("myHeader");// //alert(myHeader);//HTMLHeadingElement// //解读 myHeader.innerText 获取到 myHeader的包含的文本// //看看 innerText , innerHTML// alert(myHeader.innerText);//文本 hello world// alert(myHeader.innerHTML);//html <div>hello world</div>// }//动态绑定,讲过老师,前面老师讲的 js事件章节//为了让小伙伴,听得明白一点,快速演示->回去看js事件window.onload = function () {//1. 获取 myHeader的dom对象var myHeader = document.getElementById("myHeader");//2. 给myHeader绑定 onclick的事件myHeader.onclick = function () {alert("动态绑定 内容是= " + myHeader.innerText);}}//理解了基本原理,其它的问题就是API层级</script>
</head>
<body>
<!-- 静态绑定一个点击事件 -->
<!--<h1 id="myHeader" οnclick="调用函数()"><div>hello world</div></h1>--><h1 id="myHeader"><div>hello world</div></h1>
<p>Click on the header to alert its value</p>
</body>
</html>
应用实例 2:
应 用 实 例 : 完 成 多 选 框 案 例

getElementsByName.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>getElementsByName 函数</title><script type="text/javascript">//完成全选function selectAll() {//1.获取到 sport 这一组复选框var sports = document.getElementsByName("sport");//sports 是什么? 是nodeList 即时一个集合//alert(sports);//2. 拿到[dom ,集合],操作【属性和方法api】泥瓦匠|工程师 清华// 遍历 sports, 修改for (var i = 0; i < sports.length; i++) {sports[i].checked = true;//选中}}//全不选function selectNone() {//1.获取到 sport 这一组复选框var sports = document.getElementsByName("sport");//sports 是什么? 是nodeList 即时一个集合//alert(sports);//2. 拿到[dom ,集合],操作【属性和方法api】//不要只做泥瓦匠,培养工程师思维 清华 ---》要培养架构思维// 遍历 sports, 修改for (var i = 0; i < sports.length; i++) {sports[i].checked = false;//全部不选中}}//反选 selectReversefunction selectReverse() {//1.获取到 sport 这一组复选框var sports = document.getElementsByName("sport");//2. 拿到[dom ,集合],操作【属性和方法api】泥瓦匠|工程师 清华 要培养架构思维// 遍历 sports, 修改for (var i = 0; i < sports.length; i++) {// if(sports[i].checked) {//js true// sports[i].checked = false;// } else {// sports[i].checked = true;//选中// }sports[i].checked = !sports[i].checked;}}</script>
</head>
<body>
你会的运动项目:
<input type="checkbox" name="sport" value="zq" checked="checked">足球
<input type="checkbox" name="sport" value="tq">台球
<input type="checkbox" name="sport" value="ppq">乒乓球 <br/><br/>
<button onclick="selectAll()">全选</button>
<button onclick="selectNone()">全不选</button>
<button onclick="selectReverse()">反选</button>
</body>
</html>
应用实例 3:
完 成 图 片 切 换 案 例

提醒:为看到效果,请把图片放在相应的位置.
getElementsByTagName.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>getElementsByTagName</title><script type="text/javascript">function changeImgs() {//1. 得到所有的imgvar imgs = document.getElementsByTagName("img");//老师说 imgs 是 HTMLCollectionsalert("猫猫的数量是=" + imgs.length);//2. 修改src,遍历修改for (var i = 0; i < imgs.length; i++) {imgs[i].src = "./img/" + (i+4) +".png";}}//3课后作业->再评讲//思路//(1) input 增加id, 可以修改value//(2) 根据input 的 value值来决定是切换猫还是狗 if -- else if ---//(3) 其它自己先思考function changeImgs(){var input = document.getElementById("in")var catImg = ['./img/1.png','./img/2.png','./img/3.png']var dogImg = ['./img/4.png','./img/5.png','./img/6.png']if(input.value == "查看多少小猫,并切换成小狗"){var arr = document.getElementsByTagName("img")for(i=0;i<arr.length;i++){arr[i].src= dogImg[i];}}else{var arr = document.getElementsByTagName("img")for(i=0;i<arr.length;i++){arr[i].src= catImg[i];}}} function changeVal(){var input = document.getElementById("in")if(input.value == "查看多少小猫,并切换成小狗"){input.value = "查看多少小狗,并切换成小猫"}else{input.value = "查看多少小猫,并切换成小狗"}}</script>
</head>
<body>
<img src="./img/1.png" height="100">
<img src="./img/2.png" height="100">
<img src="./img/3.png" height="100">
<br/>
<input type="button" onclick="changeImgs()" value="查看多少小猫,并切换成小狗" id="in"/>
<br />
<button id="btn" onclick="changeVal()">点我改变切换内容</button>
</body>
</html>
应用实例 4:
添 加 小 猫 图 片 案 例

提醒:为看到效果,请把图片放在相应的位置.
createElement.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>createElement</title><script type="text/javascript">function addImg() {//创建一只小猫 图片,展示在页面//1. 创建一只小猫 图片 img,拿到对象好办->ssm -> springboot -> vuevar img = document.createElement("img");//alert(img);//?img.src = "./img/1.png";img.width = "100";//2. 展示, 添加到 doucment.bodydocument.body.appendChild(img);}</script>
</head>
<body>
<input type="button" onclick="addImg()"value="点击创建一只小猫~"/>
</body>
</html>
1.4 HTML DOM 节点
1.4.1 基本介绍
在 HTML DOM (文档对象模型)中,每个部分都是节点:
- 文档本身是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性是属性节点
- HTML 元素内的文本是文本节点
- 注释是注释节点
1.4.2 节点属性和方法一览
1.HTML DOM Element 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_all.asp
2.HTML DOM Document 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_document.asp
1.4.3 节点常用方法
- 通过具体的元素节点调用 getElementsByTagName() 方法,获取当前节点的指定标签名孩子节点
- appendChild( oChildNode ) 方法,可以添加一个子节点,oChildNode 是要添加的孩子节点
1.4.4 节点常用属性
- childNodes 属性,获取当前节点的所有子节点
- firstChild 属性,获取当前节点的第一个子节点
- lastChild 属性,获取当前节点的最后一个子节点
- parentNode 属性,获取当前节点的父节点
- nextSibling 属性,获取当前节点的下一个节点 (后一个)
- previousSibling 属性,获取当前节点的上一个节点 (前一个)
- className 用于获取或设置标签的 class 属性值
- innerHTML 属性,表示获取/设置起始标签和结束标签中的内容
- innerText 属性,表示获取/设置起始标签和结束标签中的文本
1.4.5 应用实例
需求: 完成以下功能(如图), 点击右侧的按钮,可以得到对应的节点
html-dom.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相关方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//老师使用动态注册/绑定来演示window.onload = function () {// 先获取btn01的domvar btn01 = document.getElementById("btn01");btn01.onclick = function () {// 查找id=java节点var java = document.getElementById("java");alert("java节点文本=" + java.innerText);}// 查找所有option节点 小技巧: ctrl+home 直接到页面最上面 ctrl + end 页面最下var btn02 = document.getElementById("btn02");btn02.onclick = function () {//查找所有option节点//老师梳理(id-->getElementById name-->getElementsByName 元素标签名->getElementsByTagName()var options = document.getElementsByTagName("option");alert(options); // object HtmlCollectionfor (var i = 0; i < options.length; i++) {alert("值= " + options[i].innerText);}}//查找name=sport的节点var btn03 = document.getElementById("btn03");btn03.onclick = function () {var sports = document.getElementsByName("sport");//NodeListfor (var i = 0; i < sports.length; i++) {//过滤if (sports[i].checked) {alert("运动是= " + sports[i].value);}}}//查找id=language 下所有li节点var btn04 = document.getElementById("btn04");btn04.onclick = function () {var lis = document.getElementById("language").getElementsByTagName("li");for (var i = 0; i < lis.length; i++) {alert(lis[i].innerText);//<li>xxx</li> <input value="xx"/>}}//返回id=sel01 的所有子节点[3种方法]var btn05 = document.getElementById("btn05");btn05.onclick = function () {//var options = document.getElementById("sel01").getElementsByTagName("option");//alert(document.getElementById("sel01").childNodes.length);//11=>object text//解读//1. 如果使用 document.getElementById("sel01").childNodes 获取的是object text 和 object htmloptionelement//2. 如果不希望得到text 对象,需要将所有的内容放在一行var childNodes = document.getElementById("sel01").childNodes;for (var i = 0; i < childNodes.length; i++) {if (childNodes[i].selected) {alert(i + " " + childNodes[i].innerText);}}alert("======================================================")//还有一个以前方法//解读//1. sel01 是 HtmlSelectElement => 本身就有集合特点var sel01 = document.getElementById("sel01");for (var i = 0; i < sel01.length; i++) {alert(sel01[i].innerText);}}//返回id=sel01 的第一个子节点var btn06 = document.getElementById("btn06");btn06.onclick = function () {//除了上面的方法外,还可以直接使用属性firstChildvar sel01 = document.getElementById("sel01");alert("xx=" + sel01.firstChild);//老师解读是按照 .childNodes 得到第一个子节点 //object textalert("yy=" + sel01[0]);//直接是得到第一个option节点 object htmloptionelement}//返回id=java 的父节点var btn07 = document.getElementById("btn07");btn07.onclick = function () {var java = document.getElementById("java");//alert(java.parentNode);// object HtmlUListElement.//alert(java.parentNode.innerHTML);////alert(java.parentNode.childNodes.length);//4var childNodes = java.parentNode.childNodes;for (var i = 0; i < childNodes.length; i++) {alert("语言= " + childNodes[i].innerText);//java php,c++ py,}}//返回id=ct 的前后兄弟节点var btn08 = document.getElementById("btn08");btn08.onclick = function () {//yydsvar ct = document.getElementById("ct");alert(ct.previousSibling.innerText);//object text , 输出undefinedalert(ct.previousSibling.previousSibling.innerText);//object htmloptionelement,艳红alert(ct.nextSibling.innerText);//object text, 输出undefinedalert(ct.nextSibling.nextSibling.innerText); //object HtmlOptionElement, 输出春花}//设置#person的文本域var btn10 = document.getElementById("btn10");btn10.onclick = function () {var person = document.getElementById("person");person.innerText = "这是我们最新的介绍";}}</script>
</head>
<body>
<div id="total"><div class="inner"><P>你会的运动项目:</P><input type="checkbox" name="sport" value="zq" checked="checked">足球<input type="checkbox" name="sport" value="tq">台球<input type="checkbox" name="sport" value="ppq">乒乓球 <br/><hr/><P>你当前女友是谁:</P><select id="sel01"><option>---女友---</option><option>艳红</option><option id="ct" value="春桃菇凉">春桃</option><option>春花</option><option>桃红</option></select><hr/><p>你的编程语言?</p><ul id="language"><li id="java">Java~~~</li><li>PHP</li><li>C++</li><li>Python</li></ul><br><br><hr/><p>个人介绍:</p><textarea name="person" id="person">个人介绍</textarea></div></div>
<div id="btnList"><div><button id="btn01">查找id=java节点</button></div><div><button id="btn02">查找所有option节点</button></div><div><button id="btn03">查找name=sport的节点</button></div><div><button id="btn04">查找id=language 下所有li节点</button></div><div><button id="btn05">返回id=sel01 的所有子节点</button></div><div><button id="btn06">返回id=sel01 的第一个子节点</button></div><div><button id="btn07">返回id=java 的父节点</button></div><div><button id="btn08">返回id=ct 的前后兄弟节点</button></div><div><button id="btn09">读取id=ct 的 value 属性值</button></div><div><button id="btn10">设置#person的文本域</button></div>
</div>
</body>
</html>相关文章:
JAVAWeb04-DOM
1. DOM 1.1 概述 1.1.1 官方文档 地址: https://www.w3school.com.cn/js/js_htmldom.asp 1.1.2 DOM 介绍 DOM 全称是 Document Object Model 文档对象模型就是把文档中的标签,属性,文本,转换成为对象来管理 1.2 HTML DOM(文档…...
C++内存管理基础知识
C 内存管理 C内存管理是一个重要的主题,因为它涉及到程序运行时资源的分配和释放。它可以分为三种类型:静态内存、栈内存和堆内存。 静态内存 静态内存(Static Memory):静态内存用于存储全局变量、静态变量和常量。这…...
命令执行漏洞概述
命令执行漏洞概述 命令执行定义命令执行条件命令执行成因命令执行漏洞带来的危害远程命令执行漏洞相关函数assert()preg_replace()call_user_func() a ( a( a(b)可变函数远程命令执行漏洞的利用系统命令执行漏洞相关函数system()exec()shell_exec()passthru(&#x…...
【初试复试第一】脱产在家二战上岸——上交819考研经验
笔者来自通信考研小马哥23上交819全程班学员 先介绍一下自己,我今年初试426并列第一,加上复试之后总分600,电子系第一。 我本科上交,本科期间虽然没有挂科但是成绩排名处于中下游水平。参加过全国电子设计大赛,虽然拿…...
PTA:C课程设计(7)
山东大学(威海)2022级大一下C习题集(7) 函数题7-6-1 递增的整数序列链表的插入7-6-2 查找学生链表7-6-3 统计专业人数7-6-4 建立学生信息链表 编程题7-7-1 查找书籍7-7-2 找出总分最高的学生 函数题 7-6-1 递增的整数序列链表的插…...
POSTGRESQL LINUX 与 PG有关的内存参释义
开头还是介绍一下群,如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题,有需求都可以加群群内有各大数据库行业大咖,CTO,可以解决你的问题。加群请联系 liuaustin3 ,在新加的朋友会分到2群(共…...
Docker的常见命令
前言:使用Docker得学会的几个常见命令 常见命令前置学习: docker --help这个命令必须得会因为,很多命令是记不住的,得使用他们的官方help下面是一些实例 docker load --help常见命令集合: 一: docker images #查看全部镜像 docker rmi #删除某个镜像(例如:docker rmi redis…...
详细介绍性能测试的方法(含文档)
性能测试是软件测试中的一个重要环节,其目的是评估系统在不同负荷下的性能表现,包括响应时间、吞吐量、并发数等指标。通常可以通过以下几种方法进行性能测试: 1、负载测试 负载测试是模拟多用户同时访问系统,测试系统在高并发、…...
深入剖析 Qt QHash :原理、应用与技巧
目录标题 引言QHash 基础用法基础用法示例基础用法综合示例 QHash 的高级用法迭代器:遍历 QHash 中的元素(Iterators: Traversing Elements in QHash )QHash和其他容器的对比QHash 和 std::unordered\_map QHash的底层原理和内存管理QHash 的…...
技术分享 | MySQL级联复制下进行大表的字段扩容
作者:雷文霆 爱可生华东交付服务部 DBA 成员,主要负责Mysql故障处理及相关技术支持。爱好看书,电影。座右铭,每一个不曾起舞的日子,都是对生命的辜负。 本文来源:原创投稿 *爱可生开源社区出品,…...
工业互联网业务知识
文章目录 背景第四次工业革命带动制造业产业升级主要工业大国不同路径 架构ISA95体系架构变革趋势基础通用架构数据采集平台 工业互联网应用软件工业互联网全要素连接产品视角:产销服务企业的业务流程企业数字化改造:车间级全要素连接 工业互联网的产品体…...
jsp+java自行车租赁租借和买卖系统
自行车租借和买卖系统 系统包括四个模块。1,系统模块,2,车辆管理模块,3.租借车管理模块,4,买卖车管理模块。 1,系统模块包括: 连接数据库,工作人员登录,退出。 2&#…...
Python3 字符串
Python3 字符串 字符串是 Python 中最常用的数据类型。我们可以使用引号( 或 " )来创建字符串。 创建字符串很简单,只要为变量分配一个值即可。例如: var1 Hello World! var2 "Runoob" Python 访问字符串中的值 Python 不支持单字符…...
Day943.持续集成流水线 -系统重构实战
持续集成流水线 Hi,我是阿昌,今天学习记录的是关于持续集成流水线的内容。 从团队协作的角度上来看,在版本发布过程中,经常出现测试依赖开发手工生成制品、版本发布也从开发本地出版本的问题。而且项目架构如果从单体演进至组件…...
How to use CCS to debug a running M4F core that was started by Linux?
参考FAQ:AM62x & AM64x: How to use CCS to debug a running M4F core that was started by Linux? 问题记录: 1.使用SD卡启动模式,板上运行Linux。 当Linux系统启动后,9表示M4F core: am64xx-evm login: root rootam64xx…...
216、组合总数III
难度:中等 找出所有相加之和为 n 的 k 个数的组合,且满足下列条件: 只使用数字1到9 每个数字 最多使用一次 返回 所有可能的有效组合的列表 。该列表不能包含相同的组合两次,组合可以以任何顺序返回。 示例 1: 输入: k 3, n 7…...
简单的重装系统教程
郁闷,最近电脑一直蓝屏重启,用 2 分钟就蓝屏一次,遂产生重装系统的想法。 准备 U盘(8G或以上) PE 工具: 微PE工具箱快速指引 | 微PE优盘使用说明书 (wepe.com.cn) 系统镜像: 官网 Windows 10 官网 Windows 11 M…...
机器学习---集成学习报告
1.原理以及举例 1.1原理 集成学习(Ensemble Learning)是一种机器学习策略,它通过结合多个基学习器(base learners)的预测来提高模型的性能。集成学习的目标是创建一个比单个基学习器更准确、更稳定的最终预测模型。这…...
教你如何将PDF文件转换成PPT演示文稿
在工作和学习中,我们可能需要将一些PDF文件转换成PPT演示文稿,以便于更好地展示和分享。虽然PPT和PDF是两种不同的文档格式,但是我们可以使用一些专业的软件或在线工具来实现这种转换。下面就让我们来教你如何将PDF文件转换成PPT演示文稿。 …...
涨点技巧: 谷歌强势推出优化器Lion,引入到Yolov5/Yolov7,内存更小、效率更高,秒杀Adam(W)
1.Lion优化器介绍 论文:https://arxiv.org/abs/2302.06675 代码:automl/lion at master google/automl GitHub 1.1 简单、内存高效、运行速度更快 1)与 AdamW 和各种自适应优化器需要同时保存一阶和二阶矩相比,Lion 只需要动量,将额外的内存占用减半; 2)由于 Lion…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...
零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中,UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
Map相关知识
数据结构 二叉树 二叉树,顾名思义,每个节点最多有两个“叉”,也就是两个子节点,分别是左子 节点和右子节点。不过,二叉树并不要求每个节点都有两个子节点,有的节点只 有左子节点,有的节点只有…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好,我是java1234_小锋老师,看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】,分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...
Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...
