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 相关文章推荐
javascript中的prototype属性实例分析说明
Aug 09 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 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生成数字字母的验证码图片
2015/07/14 PHP
jquery简单体验
2007/01/10 Javascript
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
python已协程方式处理任务实现过程
2019/12/27 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
中科方德软件测试面试题
2016/04/21 面试题
西安交大自主招生自荐信
2014/01/27 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
黄河绝恋观后感
2015/06/08 职场文书
天那边观后感
2015/06/09 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技