HTML--JavaScript操作DOM对象
目录
本章目标
一.DOM对象概念
编辑
二.节点访问方法
常用方法：
层次关系访问节点
三.节点信息
四.节点的操作方法
操作节点的属性
创建节点
删除替换节点
五.节点操作样式
style属性
class-name属性
六.获取元素位置
总结
本章目标
- 了解DOM的分类和节点间的关系
- 熟练使用JavaScript操作DOM节点
- 访问DOM节点 能够熟练的进行节点的创建、添加、删除、替换等
- 能够熟练的设置元素的样式
- 能够灵活运用JavaScript获取元素位置的属性来完成网页效果
一.DOM对象概念
在JavaScript中，DOM是JavaScript操作网页内容和结构的接口。DOM对象是HTML文档中的各个元素和节点的表示。通过DOM对象，我们可以访问和操作网页中的元素、属性和事件。
DOM对象层次结构类似于一颗树，根节点是document对象，代表整个HTML文档。各个节点通过父子关系连接起来，每个节点都有自身的属性和方法。
二.节点访问方法
常用方法：
层次关系访问节点
访问步骤方法1：
- 通过document对象获取根元素节点。
- 使用根元素节点的方法和属性来访问其直接子节点。
- 遍历子节点列表，获取需要的节点。
- 使用节点的方法和属性来进一步访问其子节点或父节点。
- 重复步骤3和4，直到达到所需的节点。
访问步骤方法2：可以使用以下方法和属性来访问节点的层次关系：
注：通过层次关系访问节点的前提是代码必须在一行，演示案例为方便演示未放一行。
基础演示案例
<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>访问节点</title><style type="text/css">#father{width: 300px;height: 175px;border:2px solid grey;margin: 0 auto;}ul{list-style: none; line-height: 2;}a{text-decoration:none}#first{display: inline;}#first a{position: relative; left: 190px;}li{position: relative; left: -35px;font-style: oblique;}</style></head><body><section id="news"><div id="father"><header>京东快报<div id="first"><a href="#">更多></a></div></header><hr><ul><li><a href="#">京东无锡馆正式启动</a></li><li><a href="#">99元抢平板！品牌配件199-100</a></li><li><a href="#">节能领跑京东先行</a></li><li><a href="#">高洁丝领券五折！</a></li></ul></div> </section> </body> 
层次关系演示案例
<script type="text/javascript">var newsdoc = document.getElementById("father");//innerHTML右边未赋值代表取出该标签中的元素并赋值给左边变量var message = newsdoc.lastElementChild.firstElementChild.innerHTML;window.alert(message);
</script>三.节点信息
基础演示案例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><ul id="nodeList"><li>nodeName：节点名称</li><li>nodeValue：节点值</li><li>nodeType：节点类型</li></ul><p></p></body><script type="text/javascript">var nodes = document.getElementById("nodeList");var type1 = nodes.firstChild.nodeType;var type2 = nodes.firstChild.firstChild.nodeType;var name1 = nodes.firstChild.firstChild.nodeName;var value1 = nodes.firstChild.firstChild.nodeValue;document.write("节点<li>nodeName：节点名称</li>的类型为："+type1+"</br>");document.write("节点（nodeName：节点名称）的类型为："+type2+"</br>");document.write("节点（nodeName：节点名称）的名称为："+name1+"</br>");document.write("节点（nodeName：节点名称）的数值为："+value1);</script>
</html>
四.节点的操作方法
操作节点的属性
index.setAttribute("属性名","属性值")：在节点index中添加一个属性并给添加的属性赋值index.getAttribute("属性名")：获取index节点中的属性名所对应的值通过操作节点的属性从而实现点击对应的按钮显示对应的图片
演示案例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}div{padding: 5px; text-align: center;}div span{display: block;}</style></head><body><p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来<input type="radio" name="book" onclick="book()">灰霾来了怎么办</p><div><img src="" alt="" id="image" onclick="img()"/><span></span></div><script type="text/javascript">function book(){var imagedoc = document.getElementById("image");//getElementsByName("book"):选中所有name="book"的节点并返回一个集合赋值给booksdocvar booksdoc = document.getElementsByName("book");//booksdoc[0].checked：如果选择booksdoc[0](booksdoc集合中第一个节点)if(booksdoc[0].checked){//将属性名：src 属性值：WebProect/dog.jpg 赋值给==>imagedocimagedoc.setAttribute("src","WebProect/dog.jpg");imagedoc.setAttribute("alt","我和狗狗一起活下来");imagedoc.nextSibling.innerHTML = "我和狗狗一起活下来";}else if(booksdoc[1].checked){imagedoc.setAttribute("src","WebProect (2)/mai.jpg"); imagedoc.setAttribute("alt","灰霾来了怎么办");imagedoc.nextSibling.innerHTML = "灰霾来了怎么办"; }}function img(){var messagealt = document.getElementById("image").getAttribute("alt");window.alert("该图片的alt属性值是==>"+messagealt);}</script></body>
</html>创建节点
点击"我和狗狗一起活下来"会再次生成一个同样的图片
点击"灰霾来了怎么办"窗口会进行弹窗
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}div{padding: 5px; text-align: center;}div span{display: block;}</style></head><body><p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来<input type="radio" name="book" onclick="book()">灰霾来了怎么办</p><div></div><script type="text/javascript">function img(){window.alert("灰霾来了怎么办");}function book(){var divdoc = document.getElementsByTagName("div")[0];var booksdoc = document.getElementsByName("book");if(booksdoc[0].checked){//document.createElement("img"):在当前文档中创建一个"img"标签 var imagedoc = document.createElement("img"); //等价于<img />//以下三行都使用setAttribute()来给变量imagedoc添加属性并给添加的属性赋值imagedoc.setAttribute("src","WebProect/dog.jpg"); //等价于<img src = "images/dog.jpg" />imagedoc.setAttribute("alt","我和狗狗一起活下来");//等价于<img src = "images/dog.jpg" alt="我和狗狗一起活下来" />imagedoc.setAttribute("onclick","copyNode()");//使用appendChild()在divdoc节点中追加一个子元素imagedocdivdoc.appendChild(imagedoc);}else if(booksdoc[1].checked){var imagedoc = document.createElement("img"); //<img /> imagedoc.setAttribute("src","WebProect (2)/mai.jpg"); imagedoc.setAttribute("alt","灰霾来了怎么办");imagedoc.setAttribute("onclick","img()");divdoc.appendChild(imagedoc); }}function copyNode(){//选中div并赋值给divdocvar divdoc = document.getElementsByTagName("div")[0];//选中divdoc中的最后一个节点并赋值该节点var clonedoc= divdoc.lastChild.cloneNode(false);//将clonedoc添加到divdoc中divdoc.appendChild(clonedoc);}</script></body>
</html>删除替换节点
演示案例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{padding: 0; margin: 0; font-size: 12px;}ul,li{list-style: none;}li{float: left; text-align: center; width: 140px;}</style></head><body><ul><li><img src="WebProect/f01.jpg" id="first"><p><input type="button" value="删除我吧" onclick="del()"></p></li><li><img src="WebProect/f02.jpg" id="second"><p><input type="button" value="换换我吧" onclick="rep()"></p></li></ul><script type="text/javascript">function del(){var delNode = document.getElementById("first");//删除一个节点需要通过该节点的父节点删除该节点//delNode.parentNode:代表返回delNode的父节点//delNode.parentNode.removeChild(delNode):代表delNode的父节点删除子节点delNodedelNode.parentNode.removeChild(delNode);}function rep(){var oldNode=document.getElementById("second");var newNode = document.createElement("img");newNode.setAttribute("src","WebProect/f03.jpg");oldNode.parentNode.replaceChild(newNode,oldNode);} </script> </body>
</html>五.节点操作样式
JavaScript中的节点操作样式可以用于改变HTML元素的外观和布局。通过修改节点的样式属性，可以改变元素的大小、颜色、字体以及位置等
style属性
演示案例
当鼠标移动到“我的购物车”后显示购物车内容，鼠标离开后购物车内容消失
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>我的购物车</title><style type="text/css">*{margin: 0;padding: 0; font-family: "Arial", "微软雅黑"; font-size: 12px; line-height: 25px;}ul,li{list-style: none;}#shopping{margin: 20px auto 0 auto; width: 320px;}#cart{background: #f9f9f9 url("../images/cart.png") 20px 6px no-repeat;border: solid 1px #dcdcdc;float: right;width: 100px;height: 28px;padding-left: 45px;line-height: 28px;position: relative;cursor: pointer;}#cart span{position: absolute;color: #fff;background: #dc1742;display: block;width: 15px;height: 15px;border-radius: 50%;top:-5px;right: 20px;font-size: 8px; line-height: 15px;text-align: center;}//使用display: none使div边框隐藏#cartList{width: 310px; float: right; border: solid 1px #dcdcdc; display: none;}#cartList h2{border-bottom: 1px dashed #cccccc; font-size: 14px; padding-left: 10px;}#cartList li{float: left;}#cartList li:nth-of-type(1){width: 65px; text-align: center;}#cartList li:nth-of-type(2){width: 155px;}#cartList li:nth-of-type(3){text-align: center; width: 85px;}#cartList .footer{clear: both; height: 35px; line-height: 35px; background: #f5f5f5; padding:0 5px;}#cartList .footer span{padding: 0 12px;}#cartList .footer span:nth-of-type(2){color: #fff;background: #dc1742;display: block;height: 25px;border-radius: 6px; float: right;text-align: center;font-weight: bold;margin-top: 5px;}</style>
</head>
<body>
<section id="shopping"><!--onmouseover="over()":鼠标移动到对象后调用over()--><!--onmouseout="out()":鼠标离开对象后调用out()函数--><div id="cart" onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div><div id="cartList"><h2>最新加入的商品</h2><ul><li><img src="images/makeup.jpg"></li><li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li><li>¥558.00×1<br/>删除</li></ul><div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div></div>
</section>
<script type="text/javascript">function over(){document.getElementById("cart").style.backgroundColor = "#ffffff";//使用zIndex提高层级优先显示document.getElementById("cart").style.zIndex = "100";//style.borderBottom = "none":删除下边框document.getElementById("cart").style.borderBottom = "none";document.getElementById("cartList").style.display="block";document.getElementById("cartList").style.position="relative";document.getElementById("cartList").style.top="-1px";}//将out函数中执行的代码反向操作即可完成鼠标离开后div边框收回的操作function out(){//还原背景颜色document.getElementById("cart").style.backgroundColor = "#f9f9f9";//还原下边框document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";//使出现的div边框消失document.getElementById("cartList").style.display="none";}
</script>
</body>
</html>
class-name属性
上述购物车案例也可通过下述class-name属性实现
class-name属性的本质是直接调用CSS中的样式。
<script type="text/javascript">function over(){//className = "cartOver":等价于直接调用CSS中class="cartOver"的所有样式document.getElementById("cart").className = "cartOver"; document.getElementById("cartList").className = "cartListOver";}function out(){document.getElementById("cart").className = "cartOut";document.getElementById("cartList").className = "cartListOut";}
</script>六.获取元素位置
总结
相关文章：
HTML--JavaScript操作DOM对象
目录 本章目标 一.DOM对象概念 编辑 二.节点访问方法 常用方法： 层次关系访问节点 三.节点信息 四.节点的操作方法 操作节点的属性 创建节点 删除替换节点 五.节点操作样式 style属性 class-name属性 六.获取元素位置 总结 本章目标 了解DOM的分类和节…...
Redis 缓存
安装 安装 Redis 下载： Releases tporadowski/redis (github.com) winr ----services.msc-----将redis 设置为手动(只是学习，如果经常用可以设置为自动) 安装 redis-py 库 pip install redis-py Redis 和 StrictRedis redis-py 提供 Redis 和 Str…...
Prozyme糖样本检测平台--GlykoPrep® Rapid N-Glycan Preparation with APTS
单克隆抗体已成为生物制药行业具有潜力的新兴蛋白候选药物。其药物研发流程包括一系列精细的控制和评估步骤，需要仔细、严格地监测目标化合物的治疗稳定性及有效性。因此，在商业化前的每个阶段对单克隆抗体进行全面表征是极其有益的。在大量研究成熟的蛋…...
力扣面试题（一）
1、给你两个字符串 word1 和 word2 。请你从 word1 开始，通过交替添加字母来合并字符串。如果一个字符串比另一个字符串长，就将多出来的字母追加到合并后字符串的末尾。 char * mergeAlternately(char * word1, char * word2){int len1 strlen(word1);i…...
Python 输入输出
重点内容： 1、梳理掌握输入和输出函数的应用。 2、熟练使用int() float() str()等函数进行数据转换 3、常用转义字符在数据输入、输出中的应用 4、熟练使用ljust()、center()、rjust()等方法对字符位置进行控制。 5、灵活应用ASCII码、字母、数字及特殊字符解决…...
国服最强文字转音频？Fish Speech
官网文档与示例 Fish Speech V1.2 是一款领先的文本到语音 (TTS) 模型，使用 30 万小时的英语、中文和日语音频数据进行训练。我尝试用1066运行，但是质量不尽如人意，建议使用RTX系列的显卡进行推理。 使用结果展示 text """20…...
数据结构(6):图
1 图的基本概念 1.1 基本概念 1.1.1 定义【多对多的关系】 一个图不可能是空图！！！一个图的顶点集一定是非空集，但是边集可以为空集！ 1.1.2 应用 1.2 无向图和有向图 弧头是有箭头的那一边，弧尾是没有箭头…...
kaggle使用api下载数据集
背景 kaggle通过api并配置代理下载数据集datasets 步骤 获取api key 登录kaggle，点个人资料，获取到自己的api key 创建好的key会自动下载 将key放至家目录下的kaggle.json文件中 我这里是windows的administrator用户。 装包 我用了虚拟环境 pip …...
前缀表达式（波兰式）和后缀表达式（逆波兰式）的计算方式
缀是指操作符。 1. 前缀表达式（波兰式） （1）不需用括号； （2）不用考虑运算符的优先级； （3）操作符置于操作数的前面。（如 3 2 ） 1.1 中…...
智能井盖管理系统：城市窨井的井下“保镖”
随着城市化进程的加速，城市的生命线基础设施面临着越来越多的挑战。其中，旭华智能智能井盖传感器技术的发展为提升城市基础设施的安全性和管理效率提供了新的解决方案。它专门用于监控市政窨井、燃气井、供水井内的积水状况以及井盖状态，以增…...
vue3-环境变量-JavaScript-axio-基础使用-lzstring-字符串压缩-python
文章目录 1.Vue3环境变量1.1.简介1.2.全局变量的引用1.3.package.json文件 2.axio2.1.promise2.2.安装2.3.配置2.3.1.全局 axios 默认值2.3.2.响应信息格式 2.4.Axios的拦截器2.4.1.请求拦截器2.4.2.响应拦截器2.4.3.移除拦截器2.4.4.自定义实例添加拦截器 3.lz-string3.1.java…...
ubuntu下载docker依赖包
Ubuntu下载docker依赖包 公司对外客户一直偏向对安全性要求较高，因此在外部署服务得时候，安装docker是一件极为重要得事情，之前得服务器得系统是centos7。在上一家公司的时候，已经把docker所需得rpm包已经集成打包好了。并且d…...
java面向对象进阶进阶篇--《JDK8，JDK9接口中新增的方法、接口的应用、适配器设计模式》
个人主页→VON 收录专栏→java从入门到起飞 接口→接口和接口与抽象类综合案例 一、JDK8接口中新增的方法 在JDK 8中，接口新增了几个重要的特性和方法，其中最显著的是默认方法（Default Methods）和静态方法（Static Met…...
15.2 zookeeper java client
15.2 zookeeper java client 1. Zookeeper官方1.1 依赖1.2 Zookeeper客户端连接测试1.3***************************************************************************************1. Zookeeper官方 1.1 依赖 <!-- 集成方式一:官方集成zookeeper依赖 --><dependenc…...
素材管理太繁琐？有这一个就够了！
引言： 在创意行业中，素材管理一直是设计师们的痛点。从灵感的捕捉到作品的完成，每一步都离不开素材的积累与整理。然而，传统的素材管理方式往往繁琐且效率低下，让人头疼不已。今天，我要介绍的这款智能素材管…...
KubeSphere 部署向量数据库 Milvus 实战指南
作者：运维有术星主 Milvus 是一个为通用人工智能（GenAI）应用而构建的开源向量数据库。它以卓越的性能和灵活性，提供了一个强大的平台，用于存储、搜索和管理大规模的向量数据。Milvus 能够执行高速搜索，并以…...
前端canvas——贝塞尔曲线
曲线之美，不在于曲线本身，而在于用的人。 所以就有了这期贝塞尔曲线。 新规矩，先上个GIT。 效果图 开局一张图，代码全靠编。 代码 画骨 先想着怎么画一个心形吧，等你想好了，就知道怎么画了。 首先就还…...
Elasticsearch模糊查询之Wildcard
{“wildcard” : { “LPR.keyword” : { “wildcard” : “${Keyword}”} }},你的示例中使用了 wildcard 查询，它适用于模糊搜索，允许使用通配符（* 和 ?）来匹配字段值。你使用了 keyword 子字段来确保精确匹配，这是一…...
【人工智能】穿越科技迷雾：解锁人工智能、机器学习与深度学习的奥秘之旅
文章目录 前言一、人工智能1. 人工智能概述a.人工智能、机器学习和深度学习b.人工智能发展必备三要素c.小案例 2.人工智能发展历程a.人工智能的起源b.发展历程 3.人工智能的主要分支 二、机器学习1.机器学习工作流程a.什么是机器学习b.机器学习工作流程c.特征工程 2.机器学习算…...
Nginx服务 rewrite、proxy_pass 用rewrite去除URL中的特定参数
Nginx 是一个高性能的开源反向代理服务器，可以用于处理跨域请求、负载均衡和缓存等功能。在本文中，我们将介绍如何使用 Nginx 配置文件来实现反向代理。 我们可以实现跨域请求的处理，同时保护用户的隐私和安全。此外，Nginx 还…...
RocketMQ事务消息机制原理
RocketMQ工作流程 在RocketMQ当中，当消息的生产者将消息生产完成之后，并不会直接将生产好的消息直接投递给消费者，而是先将消息投递个中间的服务，通过这个服务来协调RocketMQ中生产者与消费者之间的消费速度。 那么生产者是如何…...
【C++】选择结构- 嵌套if语句
嵌套if语句的语法格式： if(条件1) { if(条件1满足后判断是否满足此条件) {条件2满足后执行的操作} else {条件2不满足执行的操作} } 下面是一个实例 #include<iostream> using namespace std;int main4() {/*提示用户输入一个高考分数，根据分…...
scrapy解决管道阻塞问题采用threadpool库线程池+twisted同步语法异步编程
实现方法：process_item和download任务函数像下面编写即可，其他管道像往常一样写法 import time import threadpool import random from twisted.internet import deferclass VideoPipeline:def __init__(self):self.pool threadpool.ThreadPool(10) # …...
Axure RP：打造动态交互的大屏可视化设计利器
Axure大屏可视化是指使用Axure RP这款原型设计工具来创建具有视觉冲击力和数据展示功能的大屏幕界面。Axure以其强大的交互设计和丰富的组件库，成为了实现大屏可视化的重要工具之一。以下是对Axure大屏可视化的详细阐述： 一、Axure在大屏可视化中的优势 …...
“八股文”在实际工作中是助力、阻力还是空谈
目录 1.概述 1.1.对实际工作的助力 1.2.存在的问题 2.“八股文”对招聘过程的影响 2.1.“八股文”在筛选候选人时的作用 2.2.面试中的比重及其合理性 2.3.如何平衡“八股文”与实际编程能力的考察 3.“八股文”在日常工作中的实用价值 3.1.在团队协作环境中进行有效沟…...
项目开发：@ControllerAdvice注解的基本应用
目录 简介基本用法全局异常处理全局拦截器全局数据绑定 注解参数1.value(): String[]2.basePackages(): String[]3.basePackageClasses(): Class<?>[]4.assignableTypes(): Class<?>[]5.annotations(): Class<? extends Annotation>[] 三.注解组成总结 简…...
Jmeter三种方式获取数组中多个数据并将其当做下个接口参数入参【附带JSON提取器和CSV格式化】
目录 一、传统方式-JOSN提取器获取接口返回值 1、接口调用获取返回值 2、添加JSON提取器 3、调试程序查看结果 4、添加循环控制器 5、设置count计数器 6、添加请求 7、执行请求 二、CSV参数化 1、将结果写入后置处理程序 2、设置循环处理器 3、添加CSV文件 4、设置…...
C++入门基础：C++中的循环语句
循环语句是编程语言中用来重复执行一段代码直到满足特定条件的一种控制结构。它们对于处理需要重复任务的场景非常有用，比如遍历数组、累加数值、重复执行某项操作直到满足条件等。 但是在使用循环语句的时候需要注意下哈，有时候一不小心会构成死循环或者…...
VUE 基础(二)
1 v-show:根据表达值的真假，切换元素的显示和隐藏 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">&l…...
VMware Cloud Foundation ESXi 主机
一、准备嵌套 ESXi 主机环境# 1）物理 ESXi 主机信息 本次准备用于部署 VCF 嵌套实验环境的物理宿主机的配置信息如下图所示。其实，部署 VCF 环境主要对内存的大小要求比较高，部署完整的管理域相关组件下来差不多就要占用 200 GB左右内存，而对 CPU 和存储的需求可以根据实…...