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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
ArrayList类(增强版)
Apr 04 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
使用javascript解析二维码的三种方式
Nov 11 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 setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php 生成短网址原理及代码
2014/01/23 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
Python中的自省(反射)详解
2015/06/02 Python
浅析python中的分片与截断序列
2016/08/09 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
Python eval函数介绍及用法
2020/11/09 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
工程部经理岗位职责
2013/12/08 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
致百米运动员广播稿
2014/01/29 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
综合实践活动报告
2015/02/05 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js