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 相关文章推荐
ie下动态加态js文件的方法
Sep 13 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
详解参数传递四种形式
Jul 21 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 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/03/18 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Python遍历字典方式就实例详解
2019/12/28 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
个人生活学习自我评价范文
2013/11/26 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python