24JS15——DOM

news2025/12/13 2:08:40

文章目录

  • 一、DOM简介
    • 1、什么是DOM
    • 2、DOM树
  • 二、获取元素
    • 1、如何获取页面元素
    • 2、根据id获取
    • 3、根据标签名获取
    • 4、通过HTML5新增的方法获取
    • 5、获取特殊元素body html
  • 三、事件基础
    • 1、事件概述
    • 2、事件三要素
    • 3、执行事件的步骤
  • 四、操作元素
    • 1、改变元素内容
    • 2、常用元素的属性操作
    • 3、表单元素的属性操作
    • 4、样式属性操作
      • 4.1 行内样式操作
      • 4.2 类名样式操作
    • 5、操作元素总结
    • 6、排他思想
    • 7、自定义属性操作
      • 7.1 获取属性值
      • 7.2 设置元素属性值
      • 7.3 移除属性
      • 案例：tab栏切换（重点案例）
    • 8、H5自定义属性
  • 五、节点操作
    • 1、为什么学节点操作
    • 2、节点概述
    • 3、节点层次
    • 案例：新建下拉菜单

目标：
DOM简介
获取元素
事件基础
操作元素
节点操作

一、DOM简介

1、什么是DOM

在这里插入图片描述

2、DOM树

在这里插入图片描述
在这里插入图片描述

二、获取元素

1、如何获取页面元素

在这里插入图片描述

2、根据id获取

在这里插入图片描述

3、根据标签名获取

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4、通过HTML5新增的方法获取

在这里插入图片描述

在这里插入图片描述

5、获取特殊元素body html

在这里插入图片描述

三、事件基础

1、事件概述

在这里插入图片描述

2、事件三要素

在这里插入图片描述

3、执行事件的步骤

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

四、操作元素

在这里插入图片描述

1、改变元素内容

在这里插入图片描述
在这里插入图片描述

2、常用元素的属性操作

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、表单元素的属性操作


在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4、样式属性操作

在这里插入图片描述
在这里插入图片描述

4.1 行内样式操作

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.2 类名样式操作

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5、操作元素总结

在这里插入图片描述

6、排他思想

在这里插入图片描述

：在这里插入图片描述
案例：背景换肤
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7、自定义属性操作

7.1 获取属性值

在这里插入图片描述
在这里插入图片描述

7.2 设置元素属性值

在这里插入图片描述

7.3 移除属性

在这里插入图片描述

案例：tab栏切换（重点案例）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8、H5自定义属性

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

五、节点操作

1、为什么学节点操作

在这里插入图片描述

2、节点概述

在这里插入图片描述
在这里插入图片描述

3、节点层次

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

案例：新建下拉菜单

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/714422.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2017计算机学科夏令营上机考试

2017计算机学科夏令营上机考试

目录 A:判决素数个数【水题】 B:编码字符串(string)【水题】 C:岛屿周长(matrix)【深搜或者找规律】 D:Safecracker【深搜或者暴力不水】 E:怪盗基德的滑翔翼【动态规划】 F:Full Tank?【图论最短路/BFS优先队列】 G:实现堆结构 H:Subway（迪杰斯特拉算法&a…
阅读更多...
理解ASEMI代理海矽美快恢复二极管SFP3012A的性能与应用

理解ASEMI代理海矽美快恢复二极管SFP3012A的性能与应用

编辑-Z 在电子元件领域，快恢复二极管SFP3012A是一种重要的半导体器件，它在电路设计中扮演着至关重要的角色。本文将深入探讨SFP3012A的性能特点和应用领域，帮助读者更好地理解和使用这种二极管。 一、SFP3012A的性能特点 快恢复二极管SFP301…
阅读更多...
4个在Pandas DataFrame中进行元素比较的函数

4个在Pandas DataFrame中进行元素比较的函数

大家好，Pandas DataFrame是具有标记行和列的二维数据结构。 有时我们需要对两个DataFrame进行逐个元素的比较。例如： 使用另一个DataFrame的值来更新其中的值。 比较数值，并选择较大或较小的值。 本文将介绍四个不同的Pandas函数&#xf…
阅读更多...
阿里前端常考vue面试题汇总

阿里前端常考vue面试题汇总

大厂面试题分享 面试题库 前后端面试题库 （面试必备） 推荐：★★★★★ 地址：前端面试题库 web前端面试题库 VS java后端面试题库大全 Vuex中actions和mutations有什么区别 题目分析 mutations和actions是vuex带来的两个独特…
阅读更多...
MySQL原理探索——22 MySQL有哪些“饮鸩止渴”提高性能的方法

MySQL原理探索——22 MySQL有哪些“饮鸩止渴”提高性能的方法

不知道你在实际运维过程中有没有碰到这样的情景：业务高峰期，生产环境的 MySQL 压力太大，没法正常响应，需要短期内、临时性地提升一些性能。 我做项目的时候，就偶尔会碰上这种场景。用户的开发负责人说，不管…
阅读更多...
使用“Cocos引擎”创建的cpp工程如何在VS中调试Cocos2d-x源码

使用“Cocos引擎”创建的cpp工程如何在VS中调试Cocos2d-x源码

前段时间Cocos2d-x更新了一个Cocos引擎，这是一个集合源码，IDE，Studio这一家老小的整合包，我们可以使用这个Cocos引擎来创建我们的项目。 在Cocos2d-x被整合到Cocos引擎之前，我们可以不那么方便地在我们创建的工程里调…
阅读更多...
SpringBoot 实现合并表头导出数据 - EasyExcel应用

SpringBoot 实现合并表头导出数据 - EasyExcel应用

文章目录 1. 构建实体类2. 导出3. 导入 EasyExcel是一款开源的Java处理Excel文件的工具库，它提供了简单易用的API，可以方便地读取、写入和操作Excel文件。下面是一些常见的EasyExcel应用场景： 读取Excel文件：使用EasyExcel可以轻…
阅读更多...
阿里oss实现拖拽上传+二维码链接展示——技能提升

阿里oss实现拖拽上传+二维码链接展示——技能提升

今天遇到一个需求，就是要实现拖拽上传文件，并调用渲染方法，将渲染后的链接通过二维码展示出来。 上一篇文章也是关于拖拽上传，但是接口是通过后端提供的上传方式来实现的，并非是直接调用阿里OSS来直接实现的。 1.拖拽…
阅读更多...
月报总结｜Moonbeam 6月份大事一览

月报总结｜Moonbeam 6月份大事一览

本月，Moonbeam赢得第44轮Polkadot平行链插槽拍卖，在未来两年内都将保持活跃！ 历时一个多月Moonbeam Bear Necessities Hackathon仍在如火如荼地进行着，从深入研究赛题的Workshop到解答疑惑的Office Hours，黑客松让BUI…
阅读更多...
代码随想录算法训练营第七天 | 字符串基础系列1(反转字符串--反转字符串II--替换空格--反转字符串中的单词)

代码随想录算法训练营第七天 | 字符串基础系列1(反转字符串--反转字符串II--替换空格--反转字符串中的单词)

字符串基础系列1 344 反转字符串我的代码代码随想录的代码力扣的示例代码 541 反转字符串II我的代码代码随想录的代码力扣的示例代码 剑指offer-05 替换空格我的代码代码随想录的代码力扣的示例代码 151 反转字符串中的单词我的代码代码随想录的代码力扣的示例代码 一段用于复制…
阅读更多...
电子时钟制作(瑞萨RA)(6)----配置RTC时钟及显示时间

电子时钟制作(瑞萨RA)(6)----配置RTC时钟及显示时间

概述 本文将详细讲解如何借助e2studio来对瑞萨微控制器进行实时时钟（RTC）的设置和配置，以便实现日历功能和一秒钟产生的中断，从而通过串口输出实时数据。 实时时钟（RTC）模块是一种时间管理外设&#xff0c…
阅读更多...
部署深度学习APP的经历（docker，streamlit cloud，nuitka）

部署深度学习APP的经历（docker，streamlit cloud，nuitka）

部署深度学习APP的经历 最近，接到一个部署深度学习APP的需求，这个APP使用torch、monai和pydicom等库构建了一个识别CT图像中皮下脂肪、内脏脂肪和骨骼肌，输入是CT图像，输出是识别的图像和相关数据。接手的时候，核心的算…
阅读更多...
matlab将数据写入到excel中

matlab将数据写入到excel中

第一种： 将数据转化为cell块，从A1单元格写起 % xlswrite(info_10*2.xls ,sheet1,B2:B4) clear; clc; a[1 2 3 4 5 6 ];%三组数据 b[11 22 33 44 55 66]; c[12 23 34 45 56 61]; data [a b c];%把数据保存到data中，其中a的表示转置 [m p]si…
阅读更多...
PHP：提交表单之后出现本页面刷新的情况，导致路径参数消失

PHP：提交表单之后出现本页面刷新的情况，导致路径参数消失

问题: 提交表单前 提交表单后 刷新之后，参数消失 解决办法 在提交表单的方法中写入代码携带参数的代码 样例： 实施 header(Location: table_detial.php?table_name.$table_name.);
阅读更多...
Java Web JavaScript （2）23.7.2

Java Web JavaScript （2）23.7.2

5，BOM BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。 我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。比如：我现在想将浏览器地址栏的地址改为 https://www.itheim…
阅读更多...
m4a音频格式转换器：让音频轻松换装

m4a音频格式转换器：让音频轻松换装

大家有没有遇到这样的情况——你下载了一个很酷的音频文件，但是播放设备却说“不认识”这个格式？别担心！现在有个超级厉害的工具可以帮你解决这个问题，它就是m4a音频格式转换器！它能让你的音频文件变身，适应…
阅读更多...
Java--基于Swing的登录界面

Java--基于Swing的登录界面

运行结果: 代码: import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener;public class ljt2 {public static void main(String[] args) {// 创建窗体JFrame frame new JFrame("学生信息管理系统");f…
阅读更多...
数据处理及评分成果

数据处理及评分成果

文章目录 test.py界面展示 pf.pyfpga.py test.py import subprocess import os from PySide2.QtWidgets import QApplication, QMainWindow, QPushButton, QPlainTextEdit, QWidget, QLabel import mysql.connector from PySide2.QtGui import QPixmap, QPalette, QColorconn …
阅读更多...
spfa求负环

spfa求负环

1.虫洞 Wormholes&#xff08;裸spfa判断负环问题&#xff09; 信息学奥赛一本通&#xff08;C版&#xff09;在线评测系统 (ssoier.cn)http://ybt.ssoier.cn:8088/problem_show.php?pid1507 #include<bits/stdc.h> using namespace std; const int N510,M5210; int d…
阅读更多...
【花雕】全国青少年机器人技术一级考试试卷模拟题A组

【花雕】全国青少年机器人技术一级考试试卷模拟题A组

随着科技的不断进步&#xff0c;机器人技术已经成为了一个重要的领域。在这个领域中&#xff0c;机械结构是机器人设计中至关重要的一部分&#xff0c;它决定了机器人的形态、运动方式和工作效率。对于青少年机器人爱好者来说&#xff0c;了解机械结构的基础知识&#xff0c;掌…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023