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代码(站点及虚拟目录)
Oct 20 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
json.stringify()与json.parse()的区别以及用处
Jan 25 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写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
PHP开发注意事项总结
2015/02/04 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
jquery 弹出层实现代码
2009/10/30 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
js禁止表单重复提交
2017/08/29 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
python使用cookielib库示例分享
2014/03/03 Python
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
详解爬虫被封的问题
2019/04/23 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
安装PyInstaller失败问题解决
2019/12/14 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
银行求职自荐信
2014/06/30 职场文书
介绍信的格式
2015/01/30 职场文书
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL
Python Matplotlib绘制动画的代码详解
2022/05/30 Python