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 相关文章推荐
JQuery 浮动导航栏实现代码
Aug 27 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 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 smarty函数扩展
2010/03/15 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
axios学习教程全攻略
2017/03/26 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
Python面向对象程序设计示例小结
2019/01/30 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
详解python logging日志传输
2020/07/01 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
公司年会策划方案
2014/05/17 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫