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 CSS菜单功能 改进版
Dec 20 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
ES6箭头函数和扩展实例分析
May 23 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 日,周,月点击排行统计
2012/01/11 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
php中动态调用函数的方法
2015/03/16 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
Python中拆分字符串的操作方法
2019/07/23 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
超市5.1促销活动
2014/01/15 职场文书
高中历史教学反思
2014/02/08 职场文书
先进集体获奖感言
2014/02/13 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers
bose降噪耳机音能消除人声吗
2022/04/19 数码科技
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript