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 相关文章推荐
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
Vue extend的基本用法(实例详解)
Dec 09 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中的正则表达式
2014/08/17 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
Javascript window对象详解
2014/11/12 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
python实现自动更换ip的方法
2015/05/05 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
django下创建多个app并设置urls方法
2020/08/02 Python
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
好矿嫂事迹材料
2014/01/21 职场文书
行政办公室岗位职责
2014/03/18 职场文书
财务情况说明书范文
2014/05/06 职场文书
2014年组织部工作总结
2014/11/14 职场文书
小学运动会开幕词
2015/01/28 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
写给女朋友的保证书
2015/05/09 职场文书
开网店计划分析
2019/07/30 职场文书
把77A收信机改造成收音机
2022/04/05 无线电
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS