DOM编程

news2024/11/25 11:01:24

DOM编程

DOM树:

获取DOM对象的方式:

  1. 通过id直接获取

id禁止使用,因为项目都是css、html、js分离的

2、通过API,doucument.getElementById

3、通过class,doucument.getElementsByClassName

4、通过标签名称,doucument.getElementsByTagName

5、通过name属性,doucument.getElementsByName

6、es5

doucument.querySelector即便使用类、标签选择器或者其他,也只能获取第一个:

id需要加#,class需要加.

doucument.querySelectorAll获取一组:

DOM对象的内容和属性操作:

DOM对象的内容的设置:

1、innerHTML:会解析代码

innerHTML会解析代码也有危害,假如是一段有危害的代码,就会出问题

2、文本内容:普通文本,即便有标签,也当成文本字符串解析

建议使用w3c标准

DOM对象的属性操作:

1、通过DOM对象.属性的方式

 

2、DOM对象[属性]

 

3、DOM对象.getAttribute(属性)    DOM对象.setAttribute(属性, 值)

4、设置类:DOM对象.className

 

操作DOM对象的样式

   

所以在进行操作时,要进行数字转换

前两个值有边线,后两个值没有边线

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

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

相关文章

【框架篇】Bean作用域和生命周期

Bean作用域和生命周期 一,Bean作用域 Bean作用域指的是在Spring框架中,定义了Bean实例的创建和销毁方式,以及可以访问该实例的范围,并决定了每次通过容器获取Bean时返回的是同一个实例还是不同的实例。 1.1,Bean作用…

mysql 2 -- 数据库基本操作、数据表的操作、mysql查询操作

一、数据库基本操作 1、数据库的登录及退出 连接数据库: mysql -u用户名 -h主机地址(省略代表本机) -p 密码(格式为123...);注: 刚下载安装的时候需要通过管理员进入 退出数据库,以下三种方式都可以: exit quit …

Spring:表达式语言

Spring EL 概述使用概述 Spring 表达式(Spring EL) 是一种功能强大的表达式语言,以 #{ 表达式 } 作为定界符,用于在运行时对对象进行访问和操作。通过使用 Spring 表达式达到简化开发、减少逻辑或配置的编写的目的。 使用 Spring EL 主要可以引用 bean ,调用其属性和方…

苹果手机备忘录如何导入新手机?手机备忘录怎么转移?

一般来说,大多数手机用户更换手机的频率是3—5年,在一部手机使用了几年之后,就会出现内存不足、系统卡顿、电池续航时间较短等问题,这时候就需要更换新的手机了。有不少苹果手机用户在更换新手机的时候,都很发愁一个问…

Hugging News #0717: 开源大模型榜单更新、音频 Transformers 课程完成发布!

每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新、社区活动、学习资源和内容更新、开源库和模型更新等,我们将其称之为「Hugging News」。本期 Hugging News 有哪些有趣的消息&#xff0…

TypeScript 学习笔记(六):索引签名类型、映射类型

一、索引签名类型 1. 索引类型查询操作符 keyof keyof可以用于获取某种类型的所有键,其返回类型是联合类型。 interface Info {name: string;age: number; } let infoProp: keyof Info; infoProp "name"; infoProp "age"; infoProp "…

知识普及:Boc-Hynic,133081-25-1,6-叔丁氧羰肼基-3-吡啶甲酸,

(文章资料汇总来源于:陕西新研博美生物科技有限公司小编MISSwu)​ Boc-Hynic,6-[2-(tert-Butoxycarbonyl)hydrazinyl]nicotinic acid,6-[2-(叔丁氧羰基)肼基]烟酸,6-叔丁氧羰肼基-3-吡啶甲酸 ------------…

追梦之旅【数据结构篇】——C语言手撕八大经典排序

追梦之旅【数据结构篇】——C语言手撕八大经典排序😎 前言🙌排序的认识排序的稳定性:排序的时间复杂度和空间复杂度以及如何选择适合的排序: 优化版选择排序冒泡排序普通版冒泡排序升级版冒泡排序 直接插入排序希尔排序堆排序快速…

ChatGPT变现五个思路

一、前言 ChatGPT是一款AI聊天机器人,发布于2022年11月。凭借着在广泛的知识领域为消费者问题做出清晰、详尽解答的出色能力,其一经推出就引发全球轰动,自然也得到零售行业的高度关注。例如,消费者只要询问ChatGPT如何布置一个梦…

将Spring Boot项目打包部署到阿里云linux服务器

首先 你要保证自己的服务器上有java环境 如果没有可以参考我的文章 linux服务器中安装java JDK1.8版本 然后 我们打开我们的Spring Boot项目 双击 package 生命周期进行打包 打包完成之后 我们找到 target 下面会有一个jar包 然后 我们右键它 如下图操作 系统就会帮你打开它所…

javascript 导出表格的excel

一个php网站的表格,需要增加导出excel的功能, 因对web开发不甚了解,开始想着用php导出, 搜索一番发现比较复杂,而且我的表格里已经有数据了, 如果导出又要去库中获取一次,不是负担加倍, 可否把现有表格数据,直接导出来? 答案是肯定的,用js在前端导出 开源js组件…

三个属性让你学会书写横向滑动窗口!内附代码和详解!

先说结论: 父组件添加: display: flex; overflow-x: auto; 子组件添加: flex-shrink: 0; 下面进行详细讲述。 在书写滑动页面之前,最好了解一下flex布局的基本原理和常用属性,以下链接介绍较详细,图文并…

ROS1 ROS2学习

ROS1 ROS2学习 安装 ROSROS1ROS2 命令行界面ROS2 功能包相关指令ROS 命令行工具ROS1 CLI工具ROS2 CLI工具 ROS 通信核心概念节点 - Node节点相关的CLI 话题 - Topic编写发布者程序流程:编写订阅者程序流程:话题相关的CLI 服务 - Service编写客户端程序流…

CVE-2013-4547

CVE-2013-4547 一、环境搭建二、漏洞原理三、漏洞复现 一、环境搭建 如下介绍kali搭建的教程 cd ~/vulhub/nginx/CVE-2013-4547 // 进入指定环境 docker-compose build // 进行环境编译 docker-compose up -d // 启动环境docker-compose ps使用这条命令查看当前正在运…

v-for复习

 在真实开发中,我们往往会从服务器拿到一组数据,并且需要对其进行渲染。  这个时候我们可以使用 v-for 来完成;  v-for 类似于 JavaScript 的 for 循环,可以用于遍历一组数据; 1.v-for 基本使用  v-for 的基本…

水雨情自动监测系统-水雨情监测设备

近年来,暴雨及极端天气越来越频发,造成了洪涝与积水灾害给各地排水相关部门带来了巨大的压力,也给公众的生命财产损失带来了巨大的风险。为降低洪涝造成的损失,我们不仅要加强排水基础建设,还要提升实时监测手段&#…

一、音频基础-音频分析的重要工具(语谱图)

文章目录 1. 傅里叶转换2. 语谱图3. 应用1. 傅里叶转换 通过前面的描述可以知道,声音的本质就是各种声波,那么任意某一个时刻,都不可能是只有一个频率的波,而且声波也不可能是我们理解的标准的正弦波: 而一般我们对声音进行处理时,需要分析出频率当中的有哪些频率,然…

EasyPlayer流媒体视频播放器宽屏模式的开发与实现

EasyPlayer流媒体视频播放器可支持H.264与H.265编码格式,性能稳定、播放流畅,能支持RTSP、RTMP、HLS、FLV、WebRTC等格式的视频流播放,并且已实现网页端实时录像、在iOS上实现低延时直播等功能。 EasyPlayer.js播放器目前可支持全屏播放&…

mybatis-plus Integer类型null值无法修改的问题

我们来看一条数据, 我现在要更新这个数据,除了id,全部设为null. 我们来看下数据库: 这个age很明显没有设置成null. 这是因为这个age是Integer类型的,而且我们使用的是mybatis的原生方法, 解决方案&#xf…

抖音seo源码/抖音seo优化矩阵系统代开发源代码搭建

抖音seo源码/抖音seo源码代开发/抖音seo技术搭建系统应用代码编程: 抖音seo源码,抖音seo矩阵系统底层框架上支持了从ai视频混剪,视频批量原创产出,云端直播数字人视频制作,账号矩阵,视频一键分发&#xff…