【EASYDOM系列教程】之属性操作
Element 对象提供了一些方法实现 HTML 元素的属性操作,这种操作要比 Node 对象提供的方法操作属性节点要更便捷。
获取指定元素的属性
Element 对象提供了 getAttribute() 方法用于获取指定元素的属性值,其语法结构如下:
var attribute = element.getAttribute(attributeName);
在上述语法结构中,调用 getAttribute() 方法的 element 表示指定的元素,传递的参数 attributeName 则表示指定的属性名,得到的是指定属性对应的值。
值得注意的是: 如果指定的属性不存在,则返回 null 或 "" (空字符串)。
我们可以通过以下示例代码,学习 getAttribute() 方法的具体使用:
var btn = document.getElementById('btn');
var className = btn.getAttribute('class');
console.log(className);
设置指定元素的属性
Element 对象提供了 setAttribute() 方法用于设置指定元素的属性值,其语法结构如下:
element.setAttribute(name, value);
在上述语法结构中,调用 setAttribute() 方法的 element 表示指定的元素,传递的参数 name 表示设置指定的属性名,value 表示设置指定属性的值。
值得注意的是: 如果该属性已经存在,则更新该值; 否则将添加一个新的属性用指定的名称和值。
我们可以通过以下示例代码,学习 setAttribute() 方法的具体使用:
var btn = document.getElementById('btn');
var className = btn.getAttribute('class');
className += ' animate';
btn.setAttribute('class',className);
删除指定元素的属性
Element 对象提供了 removeAttribute() 方法用于删除指定元素的属性,其语法结构如下:
element.removeAttribute(attrName);
在上述语法结构中,调用 removeAttribute() 方法的 element 表示指定的元素,传递的参数 attrName 则表示删除的属性名。
值得注意的是:
删除属性尽量使用 removeAttribute() 方法,而不是调用 setAttribute() 方法将指定属性的值设置为 null。
如果删除的属性不存在的话,不会引发任何异常。
我们可以通过以下示例代码,学习 removeAttribute() 方法的具体使用:
var btn = document.getElementById('btn');
btn.removeAttribute('class');
判断是否含有指定属性
Element 对象提供了 hasAttribute() 方法用于判断是否含有指定的属性,其语法结构如下:
var result = element.hasAttribute(attrName);
在上述语法结构中,调用 hasAttribute() 方法的 element 表示指定的元素,传递的参数 attrName 则表示要判断的属性名。
而 result 则是 hasAttribute() 方法的返回值,是一个 Boolean 类型的值。如果结果为 true,则表示含有指定的属性;如果结果为 false,则表示不含有指定的属性。
我们可以通过以下示例代码,学习 hasAttribute() 方法的具体使用:
var btn = document.getElementById('btn');
var result = btn.hasAttribute('class');
console.log(result);
判断是否含有属性
Element 对象提供了与 hasAttribute() 方法相似的 hasAttributes() 方法用于判断是否含有属性,其语法结构如下:
var result = element.hasAttributes();
在上述语法结构中,调用 hasAttribute() 方法的 element 表示指定的元素,result 则是 hasAttributes() 方法的返回值,是一个 Boolean 类型的值。
值得注意的是: 该方法在某些浏览器中,已被废弃。
我们可以通过以下示例代码,学习 hasAttributes() 方法的具体使用:
var btn = document.getElementById('btn');
var result = btn.hasAttributes();
console.log(result);
本教程免费开源,任何人都可以免费学习、分享,甚至可以进行修改。但需要注明作者及来源,并且不能用于商业。
本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。
【EASYDOM系列教程】之属性操作相关推荐
- js系列教程1-数组操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- jquery系列教程2-style样式操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jquery系列教程5-动画操作全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jquery系列教程4-事件操作全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- 【EASYDOM系列教程】之 textContent 属性
Node 对象提供了 textContent 属性实现获取或设置 HTML 页面中指定元素的文本内容. 获取文本内容 textContent 属性表示 HTML 页面指定节点及其后代节点的文本内容.其 ...
- 【EASYDOM系列教程】之创建页面元素
Document 对象提供了可以创建元素节点.属性节点和文本节点的方法,方便 DOM 更新 HTML 页面中的元素. 创建元素节点 Document 对象提供了 createElement() 方法创 ...
- 【EASYDOM系列教程】之 DOM 元素树
DOM 元素树结构与 DOM 节点树结构很相似,区别仅在于是利用节点解析 HTML 元素,还是利用元素解析 HTML 元素. DOM 树结构 还记得下面这张图吗? 上图中的 HTML 页面源代码如下: ...
- html dom树结构,【EASYDOM系列教程】之DOM 树结构
DOM 树结构 DOM 之所以可以访问和更新 HTML 页面中的内容.结构和样式,是因为 DOM 将 HTML 页面解析为一个 树结构. 例如下面这段代码是一个简单的 HTML 页面源代码: 示例页面 ...
- js系列教程7-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
最新文章
- python比较字符串相似度
- 高性能的MySQL(5)索引策略-索引和表的维护
- 对于《软件工程》课程的认识
- datatable.select()的一个问题
- android切换线程的方法,android 主线程切换方法
- IT人的春节对联集锦
- delphi(注入)附部分源代码
- 【ELM分类】基于matlab鲸鱼算法优化核极限学习机数据分类【含Matlab源码 2012期】
- When Does Self-Supervision Help Graph Convolutional Networks?
- 资源下载https://msdn.itellyou.cn/
- JAVA基础篇(一)
- C语言打印英文字母三角
- 不忘初心牢记使命文化墙励志标语墙贴
- Linux生成xlsx格式文件,linux下生成excel文件
- 笔记本不能用无线网策略服务器,明明有无线网笔记本就是搜索不到怎么处理
- Zblog采集插件-Zblog插件教程以及下载
- HTML+CSS系列学习 第五篇
- ReleaseCapture 以及 SetCapture 函数 及其应用
- [Share] How To Ask Questions The Smart Way
- 开放大世界 codelikeme
热门文章
- IntelliJ IDEA打开错误 _CGContextSetAllowsAcceleration
- 64位Java开发平台的选择,如何区分JDK,Tomcat,eclipse的32位与64版本
- Ojbect-C NSArray和NSMutableArray数组的使用 有关API查询
- Eloquent JavaScript 阅读笔记一
- 请君入瓮: 火眼自称遭某 APT 国家黑客组织攻击
- 谷歌开源漏洞扫描器“海啸”,专为大型企业服务
- smtplib,发送邮件时的bug
- 使用了 PHP Code Sniffer 未使用的参数 Unused parameter
- AWS学习笔记(四)--CLI创建EC2时执行脚本
- 学校中有老师和学生两类人,而在职研究生既是老师又是学生,对学生的管理和对教师的管理在他们身上都有体现。...