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 表单验证扩展(三)
Oct 20 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 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
晶体管单管来复再生式收音机
2021/03/02 无线电
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
PHP中的事务使用实例
2015/05/26 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
Python中list初始化方法示例
2016/09/18 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
python实现微信远程控制电脑
2018/02/22 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
python装饰器代码深入讲解
2021/03/01 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
大学毕业生求职自荐信
2014/02/20 职场文书
销售经理岗位职责
2014/03/16 职场文书
促销活动总结报告
2014/04/26 职场文书
银行进社区活动总结
2014/07/07 职场文书
早安问候语大全
2015/11/10 职场文书