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 ajaxsubmit上传图片实现代码
Nov 04 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
Vuejs 单文件组件实例详解
Feb 09 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开发工具及资源收藏
2007/01/02 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
详细分析vue表单数据的绑定
2020/07/20 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
python多线程操作实例
2014/11/21 Python
python 字典(dict)按键和值排序
2016/06/28 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
python编程的核心知识点总结
2021/02/08 Python
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
办公室内勤工作职责
2013/12/11 职场文书
自我鉴定怎么写
2014/01/12 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
工人先进事迹材料
2014/12/26 职场文书
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers