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 相关文章推荐
$()JS小技巧
Jul 21 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
js tab 选项卡
Apr 26 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
微信小程序实现购物车小功能
Dec 30 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+xslt在windows平台上
2006/10/09 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
php正则修正符用法实例详解
2016/12/29 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
用python实现批量重命名文件的代码
2012/05/25 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
struct和class的区别
2015/11/20 面试题
vue实现倒计时功能
2021/03/24 Vue.js
劲霸男装广告词改编版
2014/03/21 职场文书
团队队名口号大全
2014/06/06 职场文书
设计专业自荐信
2014/06/19 职场文书
农村老人去世追悼词
2015/06/23 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
英语导游欢迎词
2015/09/30 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书