h5新增的一些属性

最新推荐文章于 2023-07-19 21:10:09 发布

一发码农

最新推荐文章于 2023-07-19 21:10:09 发布

阅读量286

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVAWEB

本文链接：https://blog.youkuaiyun.com/qq_30302325/article/details/90599196

JAVAWEB 专栏收录该内容

8 篇文章

订阅专栏

博客介绍了JavaScript中元素获取、类名操作和自定义属性的相关知识。元素获取方法有通过类名、CSS选择器等；类名操作包括添加、移除、切换和检测；自定义属性格式为data-*，可通过驼峰格式获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.获取元素

1、document.getElementsByClassName ('class') 通过类名获取元素，以类数组形式存在。

2、document.querySelector(‘div’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。

3、document.querySelectorAll('selector') 通过CSS选择器获取元素，以类数组形式存在。

2.操作类名元素

1、Node.classList.add('class') 添加class

2、Node.classList.remove('class') 移除class

3、Node.classList.toggle('class') 切换class，有则移除，无则添加

4、Node.classList.contains('class') 检测是否存在class

3.自定义属性

自定义属性，其格式如下data-*=""，

例：data-info="我是自定义属性"，通过Node.dataset['info']获取

data-my-name="itcast"这种格式，获取Node.dataset['myName']，驼峰格式获取

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一发码农

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

H5新增全局属性

资深程序员

07-05

5843

前言什么是全局属性？全局属性可以应用于任何html元素全局属性和普通属性有什么区别？普通属性只能应用于一些特定的html元素，而全局属性可用于任何元素。 H5之前全局属性有哪些？属性描述 accesskey 规定激活元素的快捷键 class 规定元素的一个或多个类名（引用样式表中的类） id 规定元素的唯一 id dir 规定元素中内容的文本方向 lan...

H5新增的属性、样式

qq_40137713的博客

05-28

610

-新增元素说明新增元素说明 viode 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为video和audio指定字母 svg 定义矢量图 code 代码段 figure 和文档有关的图例 figcapton 图例的说明 main ti...

参与评论您还未登录，请先登录后发表或查看评论

H5新增特性大全

weixin_61855876的博客

07-19

1003

H5新增特性大全

HTML5学习笔记简明版（8）：新增的全局属性

weixin_33850890的博客

12-14

147

contenteditable属性任何元素使用contenteditable属性的话，代表该元素是一个可编辑的区域。用户可以改变元素的内容以及操作标记。例如： <p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p> 该属于有3种值可选：true, false和空字符，空字符代表true。而对<if...

H5新增的标签和属性

aizou6838的博客

04-11

265

声明 Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。 HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。 <!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。 ...

H5新增属性

m0_60376759的博客

04-07

551

HTML5的优势（1）web应用更容易开发（2）功能强大，用户体验佳（3）搜索引擎友好，网站流量大（4）摆脱平台依赖，兼容性好（5）实时更新，维护更简单（6）使用门槛低，容易推广（7）更精美的动画效果，更低的开发成本新增语义化标签： nav、header、footer、aside、section、article 新增状态标签： meter标签语义：标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。双标签。例子：电量、磁盘用量等。 <met

H5的增加的属性

weixin_48284907的博客

02-18

210

html5 1.h5语义化标签 <header>header</header> <section> <nav></nav> <main> <article> <header></header> <section></section>

H5新增的标签

YiLin_Classics的博客

04-14

1200

H5新增的内容语义化标签增强型表单CSS3的选择器地理定位音频视频canvas和svg绘图本地缓存技术语义化标签 H5新增的语义化标签有： 1）header--------头部区域 2）footer----------尾部区域 3）section--------主体区域 4）main----------主要区域内容 5）article--------独立文章区域 6）aside--------侧边栏 7）nav----------导航区域 8）figure----------独立文本区域 9）figcap

H5新增了哪些新特性

热门推荐

小学弟的博客

09-09

1万+

H5新增了哪些新特性? 前言本期为大家总结面试时常被问到的一个问题，那就是H5新特新有哪些，目前H5的新特性在实际工作中也经常会用到。本章主要总结为主，因此没有深入记录，若想深入了解，还需单独研究哦~ 1.语义化标签 2.Form表单增强 3.视频和音频标签 4.Canvas绘图 5.SVG绘图 6.地理位置定位（GeolocationAPI ） 7.拖放API 8.Web Worker 9.Web Storage 10.Web Socket

H5新增语义化标签以及属性

weixin_45457515的博客

08-03

2091

结构标签（1）<section></section> 独立内容模块，可以h1-h6组成大纲，表示文档结构，有章节、页眉、页脚或其他部分。（2）article （文章）文章核心部分（3）aside 标签内容之外相辅的信息侧边栏（4）header 头部/标题 (5)footer 底部 (6)nav 导航（7）<figure>标签代替原...

H5有哪些新增的属性

weixin_47169110的博客

07-19

559

html5的新增属性都有哪些 ** 1.新的技术文本 2.本地存储 3.地理API 4.画布Canvas 5.拖拽释放 6.音视频标签**** 7.语义化标签**…** 8.自定义属性**(data-)** 9.表单控件*** **

H5新增标签、属性

beichen3997的博客

04-23

255

1、结构标签（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；（2）article：特殊独立区块，表示这篇页眉中的核心内容；（3）aside：标签内容之外与标签内容相关的辅助信息；（4）header：某个区块的头部信息/标题；（5）hgroup：头部信息/标题的补充内容；（6）footer：底部信息；（7）nav：导...

h5新增属性

weixin_44247693的博客

07-08

247

04 新增表单属性结构伪类选择器伪元素选择器过渡 H5新增的表单属性 <form action="">    <!-- autocomplete 自动补全功能

html5新增属性有哪些？

qq_42526440的博客

03-06

691

1.语义化标签对比之前HTML没有体现结构语义化的标签，如： <div id="header"></div> //表头的声明 HTML5提供语义化标签，如： <header><article><footer><nav><aside><section>等 2.增强型表单多个新的表单 Input 输入类型，如： color,url,date等这些新特性提供了更好的输入控制和验证。新增表单元素，如： &

H5新增的属性详解

qq_57798436的博客

06-30

286

1.新增选择器：queryselect，queryselectALL

H5新增属性及标签

yanyihan16的博客

05-23

1万+

H5标签变化目录新增的语义化标签结构标签（语义化标签）表单标签媒体标签其他标签删除废弃的标签 H5属性变化表单属性新增的语义化标签一：结构标签（语义化标签） 1.section。section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 2.article。article标签装载显示一个独立的文章内容。还可以嵌套，则内层的...

HTML5——新增属性

狂野的鬼

03-31

4666

除了html的基础标签，在html5中增加了一些新的属性，下边总结分类一下这些新的属性。 1、新增语义元素 <article>——定义页面独立的内容区域。 <aside>——定义页面的侧边栏内容。 <footer>——定义 section 或 document （文档）的页脚。 <header>——定义文档的头部区域。 <nav>——定义导航链接的部分。 <section>——定义文档中的每一节（区段）。 <tim

H5 新属性

Manarola的博客

02-02

2400

display：flex（弹性布局）多栏多列布局兼容性问题1.*比较适合移动端技术的开发，（微信自带浏览器支持亲测） .father{ display:flex; /*FF*/ display:-webkit-flex; /*Chrome Opera*/ } .child{ flex:1; /*就可以实现子元素的水平平均对其*

h5新增input

最新发布

03-24

### HTML5 中新增的 Input 类型及属性 HTML5 的推出极大地扩展了 `<input>` 元素的功能，增加了多种新类型的输入控件以及一些实用的新属性。这些改进使得开发者能够更方便地处理各种数据类型并提升用户体验。 #### 新增的 Input 类型以下是 HTML5 中新增的一些重要 `type` 属性值： 1. **email** - 用于指定电子邮件地址的输入框。 - 浏览器会验证该字段的内容是否符合标准的电子邮件格式[^1]。 2. **url** - 提供了一个专门用来输入 URL 地址的文本框。 - 输入的数据会被自动校验以确保其是一个合法的网址。 3. **number** - 创建一个允许用户输入数值的控件。 - 支持上下箭头调整数字大小，并可以设置最小值 (`min`) 和最大值 (`max`) 范围。 4. **range** - 表现为滑动条形式的一个数值选择器。 - 用户可以通过拖拽滑块来选取某个范围内的整数或浮点数值。 5. **date**, **time**, **datetime-local**, **month**, **week** - 这些类型分别提供了不同的日期时间选择功能。 - `date`: 让用户挑选具体某一天。 - `time`: 设置特定时刻。 - `datetime-local`: 结合日期和本地时间为单一单元格。 - `month`: 如同名称所示仅限于月份的选择[^3]。 6. **color** - 打开颜色拾取对话框让用户选定一种色彩作为返回值。 7. **search** - 定义搜索引擎查询字符串使用的特殊文本区域。 - 外观上可能稍有不同以便提示这是搜索栏而非普通文字录入区[^2]。 8. **tel** - 预留给电话号码用途的输入方式。 - 不做任何内置格式化检查但由于设备特性可能会触发拨号键盘布局优化。 9. **file** （增强） - 原本就存在但在新版中有更多选项支持多文件上传等功能。 #### 新增的重要属性除了上述提到的各种新型态之外还有一些通用或者针对某些种类特别设计出来的附加参数可供配置: 1. **placeholder** - 显示灰色占位符告诉访问者预期填入什么样的资料直到他们实际动手为止就会消失不见. 2. **required** - 强迫使用者必须填写此项目才能继续下一步骤操作比如提交表单之类的情况发生时才会生效. 3. **pattern** - 接受正则表达式的模式匹配机制从而实现自定义规则下的有效性和错误反馈消息定制服务. 4. **autofocus** - 页面加载完成后立即聚焦到设定好的那个元素上面去无需额外动作即可获得焦点状态. 5. **readonly** - 将当前对象设为只读模式意味着虽然可见却无法修改内容除非另有说明解除限制才行. 6. **disabled** - 把组件暂时禁用掉既不可见也不能交互直至重新启用为止. 7. **autocomplete** - 控制网页上的个人历史记录能否被利用起来辅助快速完成常见重复性的任务像登录名密码之类的敏感信息安全保护措施之一就是将其关闭即 `"off"` 模式下运行[^4]. 下面给出一段综合运用以上特性的示范代码片段如下所示: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML5 Form Example</title> </head> <body> <form action="#" method="post" autocomplete="on">  <label for="email">电子邮箱:</label><br/> <input type="email" id="email" name="user_email" placeholder="请输入您的邮件..." required/><br/>  <label for="age">年龄：</label><br/> <input type="number" id="age" name="user_age" min="18" max="100"/><br/>  <label for="dob">出生日期：</label><br/> <input type="date" id="dob" name="user_dob"/><br/>  <label for="fav_color">最喜欢的颜色：</label><br/> <input type="color" id="fav_color" name="favorite_color"/>  <button type="submit">注册账户</button> </form> </body> </html> ```