h5新增的一些属性

博客介绍了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'],驼峰格式获取

### 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"> <!-- Email Field --> <label for="email">电子邮箱:</label><br/> <input type="email" id="email" name="user_email" placeholder="请输入您的邮件..." required/><br/> <!-- Number Field with Range Constraints --> <label for="age">年龄:</label><br/> <input type="number" id="age" name="user_age" min="18" max="100"/><br/> <!-- Date Picker --> <label for="dob">出生日期:</label><br/> <input type="date" id="dob" name="user_dob"/><br/> <!-- Color Selector --> <label for="fav_color">最喜欢的颜色:</label><br/> <input type="color" id="fav_color" name="favorite_color"/> <!-- Submit Button --> <button type="submit">注册账户</button> </form> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值