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调试(不下载任何工具)
Apr 14 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
js字符串转成JSON
Nov 07 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
js中开关变量使用实例
Feb 24 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
webpack proxy 使用(代理的使用)
Jan 10 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数据类型判断函数有哪些
2013/09/23 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
php阳历转农历优化版
2016/08/08 PHP
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
python实现批处理文件
2020/07/28 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
Ado与Ado.net的相同与不同
2014/12/08 面试题
中药专业大学生医药工作求职信
2013/10/25 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
大学生活自我评价
2014/04/09 职场文书
团日活动总结报告
2014/06/25 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
拉贝日记观后感
2015/06/05 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
Python List remove()实例用法详解
2021/08/02 Python
Python if else条件语句形式详解
2022/03/24 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python