HTML、CSS和JavaScript,实现换肤效果的原理
这篇涉及到HTML DOM的节点类型、节点层级关系、DOM对象的继承关系、操作DOM节点和HTML元素
还用到HTML5的本地存储技术。
换肤效果的原理:是在选择某种皮肤样式之后,通过JavaScript脚本来加载选中的样式,再通过localStorage存储。
先来回忆一下HTML DOM的相关知识。
DOM
DOM模型就是通过逻辑树来表示文档,树的每一个分支的终点都是一个节点Node,每一个节点都含有一个对象。
DOM的方法可以用来改变文档的结构、样式和内容,还可以关联事件处理器,在某一个事件触发后,所关联的事件处理器也会执行。
HTML文档中所有的内容都是节点,整个文档就是文档节点【也就是我们常说的document】;
在整个HTML文档中,根据不同功能来划分,可以分为元素节点、文本节点、属性节点、注释节点等等。常见的节点类型如下图所示:

操作节点
在操作节点之前,我们先获取节点,然后追加、新增、删除、替换、复制、合并节点等等交互。
在文档中,我们是通过节点来操作文档中的元素,得到的返回值是节点集合。
我们常用来获取节点的属性,如下图:

常用来追加和新增节点的方法,如下:
Node.appendChild(childNode);
Node.insertBefore(newNode,referenceNode)
删除和替换节点的方法:
Node.removeChild()
Node.replaceChild()
复制、合并节点:
Node.cloneNode(); // 参数为true/false,是否复制节点所有内容
Node.normalize(); // 合并相邻的文本节点并且清除空的文本节点
节点引用和包含关系的判断:
Node.isSameNode(other); // 比较两个节点
Node.hasChildNodes(); // 是否包含子节点
document和element
document是描述了任何类型文档的通用属性和方法,它的构造函数是Document();
所有Document对象下的对象都继承于ELement。ELement描述所有相同种的元素普遍具有的方法和属性。
document对象中获取元素的常用属性:
- document.all,返回整个 document 文档集合
- document.anchors,返回文档中所有锚点的元素,是一个 List
- document.body,返回当前文档的 body 或者 frameset 节点
- document.documentElement,返回当前文档的直接节点
- document.forms,返回当前文档的所有表单元素
- document.head,返回文档的 head 元素
- document.images,返回文档的所有图片元素
- document.links,返回所有超链接的列表
- document.scripts,返回所有的 script 元素
- document.styleSheetSets,返回文档中可用样式表的列表
- document.defaultView,返回 window 对象的应用
- document.title,获取当前文档的标题
document对象中获取元素的常用方法:
- document.getElementsByClassName(names),返回指定所有类名的元素
- document.getElementsByTagName(name),
- document.getElementByld(id)
- document.querySelector(selectors)
- document.query SelectorAll(selectors)
- document.getElementsByName(name)
document对象中创建元素的常用方法:
- document.createAttribute(name)
- document.createComment(data)
- document.createDocumentFragment)
- document.createElement(tagName[,options])
- document.create TextNode(data)
document对象中向文档中写入内容的方法:
- document. write(markup)
- document.writeln(line)
Element对象中获取元素的常用方法:
- Element.getElementsByClassName(names)
- Element.getElementsByTagName(name)
- Element.querySelector(selectors)
- Element.querySelectorAll(selectors)
Element对象的属性及其操作元素属性的方法:
- Element.classList
- Element.className
- Element.id
- Element.innerHTM
- Element.outerHTML
- Element.tagName
- Element.children
- Element.getAttribute (attr)
- Element.getAttributeNode(attr)
- Element.removeAttribute(attr)
- Element.removeAttributeNode(attrNode)
- Element.setAttribute(name,value)
- Element.setAttributeNode(attr)
- Element.toggleAttribute(name [,force])
Element对象中插入节点的常用方法:
- Element.insertAdjacentElement(pos,ele)
- Element.insertAdjacentHTML(pos,text)
- Element.insertAdjacentText(pos,ele)
相关文章:
HTML、CSS和JavaScript,实现换肤效果的原理
这篇涉及到HTML DOM的节点类型、节点层级关系、DOM对象的继承关系、操作DOM节点和HTML元素 还用到HTML5的本地存储技术。 换肤效果的原理:是在选择某种皮肤样式之后,通过JavaScript脚本来加载选中的样式,再通过localStorage存储。 先来回忆…...
2103. 环和杆
2103. 环和杆 难度: 简单 来源: 每日一题 2023.11.02 总计有 n 个环,环的颜色可以是红、绿、蓝中的一种。这些环分别穿在 10 根编号为 0 到 9 的杆上。 给你一个长度为 2n 的字符串 rings ,表示这 n 个环在杆上的分布。rings 中每两个字符形成一个…...
YOLOv5:修改backbone为SPPCSPC
YOLOv5:修改backbone为SPPCSPC 前言前提条件相关介绍SPPCSPCYOLOv5修改backbone为SPPCSPC修改common.py修改yolo.py修改yolov5.yaml配置 参考 前言 记录在YOLOv5修改backbone操作,方便自己查阅。由于本人水平有限,难免出现错漏,敬…...
css中flexbox和grid的区别
css中flexbox和grid的区别 我们是不是被那些不会按预期排列的元素所影响?这篇文章我们将深入探讨css中flexbox和grid的布局。通过了解他们的主要差异,我们会发现这些布局是如何改变我们网站的风格。 理解CSS布局 css布局是网页设计的一个重要方面&…...
uniapp循环对象列表---点击列表切换选中不同状态
目录 源码图片最后 源码 <template><view><ul><li v-for"(item, index) in list" click"toggleSelection(index)" :class"{selected: selectedIndex index}">{{ item }}<view :class"{selected: selectedInde…...
【使用Python编写游戏辅助工具】第二篇:键盘监听的应用
前言 这里是【使用Python编写游戏辅助工具】的第二篇:键盘监听的应用。本文主要介绍使用Python实现事件监听功能。 键盘监听是指通过编程的方式监控用户在键盘上的按键操作。 在这里键盘监听的主要用途是: 监听我们按下的按键,如果按下了指…...
Shiny Server和ShinyProxy是什么,有什么区别?
调研以及参与过多个生物公司的生信工具研发,不管是ShinyServer还是ShinyProxy都有一定研究,尤其是ShinyServer。如果仅是本地化测试想快速的搭建Shiny应用,我推荐用Shiny Server,如果多并发用户且更好的线上管理Shiny应用…...
Java 客户端、服务端NIO大文件传输
一、需求 公司电脑不让使用U盘,又不想通过公司聊天软件传输,怕被监控。但是通过QQ、微信传输文件对文件大小又有限制。基于种种原因,自己简单写了个服务端、客户端进行文件传输,大文件最好在局域网内进行数据传输。 二、pom依赖…...
Unity3D与iOS的交互 简单版开箱即用
本文适合的情况如下: Unity客户端人员 与 IOS端研发人员合作的情况 目录 From U3D to iOS 实现原理 1.unity工程目录创建2个文件 NativeCallProxy.m、NativeCallProxy.h 并且放到Unity工程目录Plugins/iOS/unity_ios_plus目录下 2.创建C#调用脚本 定义对应.mm脚…...
限制LitstBox控件显示指定行数的最新数据(3/3)
实例需求:由于数据行数累加增加,控件加载的数据越来越多,每次用户都需要使用右侧滚动条拖动才能查看最新数据。 因此希望ListBox只加载最后10行数据(不含标题行),这样用户可以非常方便地选择数据ÿ…...
Maven进阶系列-仓库和镜像
Maven进阶系列-仓库和镜像 文章目录 Maven进阶系列-仓库和镜像1. 仓库1.1 仓库类型1.2 寻找jar的基本优先级顺序:1.3 仓库优先次序验证示例 2. settings.xml文件2.1 mirrors2.1.1 没有配置mirror2.1.2 配置了mirror2.1.3 <mirrorOf> 2.2 servers2.3 profiles …...
mac下载安装jenkins
下载 https://get.jenkins.io/war/ 启动 使用命令行启动 java -jar jenkins.war 浏览器访问 IP:8080 或 localhost:8080 ,对jenkins进行配置,刚开始需要输入密码 终端会展示密码和密码存放位置 jenkins插件下载地址, 下载后自行上传。 I…...
Mac上的iTerm2和Oh My Zsh 的安装(安装过程和失败详解)
前言(无重点,安装往后看) 由于在很多人的安利下,说很好用,作者今天花费了4个小时用血的教训总结出来的安装教程,我在安装过程中遇到的最大的问题就是 1. curl: (7) Failed to connect to raw.githubusercon…...
阿里云OS系统Alibaba Cloud Linux 3系统的安全更新命令
给客户部署的服务,进入运维阶段,但是经常被客户监测到服务器漏洞,现在整理一下,服务器漏洞问题更新命令步骤。 服务器系统: 阿里云linux服务器:Alibaba Cloud Linux 3 漏洞类型和描述: #3214…...
你写的Python代码到底多快?这些测试工具了解了解
当我们写完一个脚本或一个函数,首先能保证得到正确结果,其次尽可能的快(虽然会说Py慢,但有的项目就是得要基于Py开发) 本期将总结几种获取程序运行时间的方法,极大的帮助对比不同算法/写法效率 插播&…...
网际控制报文协议ICMP
网际控制报文协议ICMP 为了更有效的转发IP数据报和提高交付成功的机会,在网际层使用ICMP(Internet Control Message Protocol)协议,其允许主机或路由器报告差错情况和提供有关异常情况的报告。ICMP报文装在IP数据报中…...
海外腾讯云服务器配置域名的详细说明!!
本文首要针对腾讯云服务器装备域名的问题进行具体的说明,包含域名的品种、注册方法、解析进程以及安全性等方面的介绍,帮助用户更好的理解腾讯云服务器装备域名的全进程。 一、域名的品种 1.域名是互联网上仅有标识一台计算机或一个网络资源的名称&#…...
听GPT 讲Rust源代码--library/std(12)
题图来自 Decoding Rust: Everything You Need to Know About the Programming Language[1] File: rust/library/std/src/os/watchos/mod.rs 该文件(rust/library/std/src/os/watchos/mod.rs)的作用是为Rust标准库提供支持WatchOS操作系统的特定功能。 W…...
06、Caused by: java.nio.charset.MalformedInputException: Input length = 1
目录 问题:原因:解决方法: 问题: Caused by: java.nio.charset.MalformedInputException: Input length 1 原因: 应该是中文有哪些文字导致的。 yml 编码格式出错 解决方法: 直接这里把GBK改成 utf-8…...
探索 Java 8 中的 Stream 流:构建流的多种方式
人嘛,要懂得避嫌… 开篇引入 Java 8引入了Stream流作为一项新的特性,它是用来处理集合数据的一种函数式编程方式。Stream流提供了一种更简洁、高效和易于理解的方法来操作集合数据,同时也能够实现并行处理,以提高性能。 以下是St…...
新手入门服务器:用快马生成你的第一个xshell等效连接程序
作为一个刚接触服务器运维的新手,第一次使用xshell这类工具时,面对各种专业术语和复杂操作确实容易一头雾水。最近我发现用InsCode(快马)平台生成学习项目特别适合入门,今天就分享一下如何通过可运行的代码实例来理解SSH连接的核心概念。 理解…...
抖音a_bogus逆向实战:手把手教你用Node.js补全缺失的window环境
抖音a_bogus逆向实战:Node.js环境补全指南 在JavaScript逆向工程领域,浏览器环境与服务端环境的差异一直是开发者面临的棘手问题。当我们尝试将抖音网页端的加密逻辑(如a_bogus生成算法)移植到Node.js环境时,经常会遇到…...
XiaoMusic:让小爱音箱突破音乐限制的开源解决方案
XiaoMusic:让小爱音箱突破音乐限制的开源解决方案 【免费下载链接】xiaomusic 使用小爱音箱播放音乐,音乐使用 yt-dlp 下载。 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaomusic 你是否遇到过这样的困扰:想听的歌曲在各大…...
cool-admin(midway版)数据权限缓存:基于用户角色的权限数据预加载
cool-admin(midway版)数据权限缓存:基于用户角色的权限数据预加载 【免费下载链接】cool-admin-midway 🔥 cool-admin(midway版)一个很酷的后台权限管理框架,模块化、插件化、CRUD极速开发,永久开源免费,基于midway.js…...
MAVLink垂直扩展:Emaxx导航板专用协议库设计与实践
1. 项目概述 mavlink_emaxx 是一个面向 Emaxx 导航板(Emaxx Nav Board)定制的 MAVLink 协议消息扩展库。该库并非独立协议栈,而是基于标准 MAVLink v2 协议规范构建的一组专用消息定义(message definitions)与配套 C…...
MTK平台录音杂音怎么来的?从AudioALSACaptureDataClientAurisysNormal的mDropPopSize说起
MTK平台录音杂音问题深度解析:从硬件初始化到算法优化的全链路解决方案 在移动设备音频开发领域,MTK平台的录音杂音问题一直是困扰开发者的典型痛点。特别是录音起始阶段出现的"爆破音"或"电流声",不仅影响用户体验&…...
用Python+Pandas搞定校园单车数据清洗:从‘200+’到精准分布表的保姆级教程
用PythonPandas搞定校园单车数据清洗:从‘200’到精准分布表的保姆级教程 校园单车数据清洗是数据分析实战中的经典场景。想象一下这样的情境:你拿到一份包含15个停车点、7个时间段的校园单车统计表,却发现数据里混杂着"200"这样的…...
用Arduino Uno和纸板DIY一个超静音扫地机器人(附完整代码和接线图)
用Arduino Uno和纸板DIY一个超静音扫地机器人(附完整代码和接线图) 在宿舍或小公寓里,市售扫地机器人的马达噪音常常让人头疼。特别是对于学生和创客群体来说,既需要保持环境整洁,又不希望打扰到室友或邻居的休息。今天…...
Claude Code桌面控制实战:macOS开启Computer Use指南
Claude Code 的 computer use 功能,是 2026 年 3 月正式上线的原生 macOS 桌面控制能力,让 Claude 可以打开 App、点击、输入、截图,直接在你的真实桌面上完成 GUI 任务。它以内置 MCP 服务器的形式集成到 Claude Code CLI 中,通过…...
实战指南:借鉴vmware官网混合云方案,用快马平台生成高可用应用部署模板
今天在VMware官网上研究混合云方案时,发现他们的企业级架构设计特别值得借鉴。正好最近在用InsCode(快马)平台做项目部署,就尝试把官网的混合云方案转化成可落地的模板。整个过程比想象中顺利,分享下我的实战经验。 架构设计思路 VMware官网…...
