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 相关文章推荐
javascript 写类方式之七
Jul 05 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 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 MySQL与分页效率
2008/06/04 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
用PHP代码给图片加水印
2015/07/01 PHP
php图像验证码生成代码
2017/06/08 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
python正则分组的应用
2013/11/10 Python
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python实现定时任务
2017/02/08 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
Python中一般处理中文的几种方法
2019/03/06 Python
python 经典数字滤波实例
2019/12/16 Python
python计算二维矩形IOU实例
2020/01/18 Python
迎新晚会邀请函
2014/02/01 职场文书
主题党日活动总结
2014/07/08 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
小学数学国培研修日志
2015/11/13 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫