JavaScript实现body内任意节点的自定义属性功能示例


Posted in Javascript onSeptember 18, 2017

本文实例讲述了JavaScript实现body内任意节点的自定义属性功能。分享给大家供大家参考,具体如下:

在HTML中body内的任意节点是可以自定义属性的,当然不包括body,
比如以下的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html自定义标签</title>
</head>
<body>
<span id="s" iii="222"></span>
</body>
</html>

我可以为id为s的行内位置定义一个自定义属性iii,其值为222,很明显的iii根本就不是span元素甚至其他任意一个元素的基本属性,也就是那些id,style,之类的,因此对这个节点内的东西的表现是没有任何影响的,但是这样做又有什么意义呢?

这主要是用来提供给javascript做进一步操作。有时候,一个HTML并不是像上面所示得这么简单,配合一个动态网页语言php,jsp,asp.net一切就变得复杂起来,你就可以设置一个标签给你要操作的节点,通过getAttribute与setAttribute操作。比如为上面的HTML页面写入如下的脚本:

<script>
var span=document.getElementById("s");
alert(s.getAttribute("iii")+"");
s.setAttribute("iii","2222121");
alert(s.getAttribute("iii")+"");
</script>

先拿到span这个节点,然后再拿到其属性值,并且必须把这个属性值通过+""强制转化成字符串才能够正常弹出,

之后把span节点的iii属性的值设置成2222121再弹出。

运行效果如下图:

JavaScript实现body内任意节点的自定义属性功能示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 #Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 #jQuery
详解node服务器中打开html文件的两种方法
Sep 18 #Javascript
详解利用 Express 托管静态文件的方法
Sep 18 #Javascript
Express使用html模板的详细代码
Sep 18 #Javascript
Mongoose中document与object的区别示例详解
Sep 18 #Javascript
新手vue构建单页面应用实例代码
Sep 18 #Javascript
You might like
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
详解python:time模块用法
2019/03/25 Python
详解Python的循环结构知识点
2019/05/20 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
python判断链表是否有环的实例代码
2020/01/31 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
数据库笔试题
2013/05/09 面试题
最热门的自我评价
2013/12/30 职场文书
项目经理任命书
2014/06/04 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
2014年财政局工作总结
2014/12/09 职场文书
毕业设计论文评语
2014/12/31 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
详解Python常用的魔法方法
2021/06/03 Python
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
nginx安装以及配置的详细过程记录
2021/09/15 Servers
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js