需要做特殊处理的DOM元素属性的访问


Posted in Javascript onNovember 05, 2010
var props = { 
'for' : 'htmlFor', 

'class': 'className', 

readonly: 'readOnly', 

maxlength: 'maxLength', 

cellspacing: 'cellSpacing', 

rowspan: 'rowSpan', 

colspan: 'colSpan', 

tabindex: 'tabIndex', 

usemap: 'useMap', 

frameborder: 'frameBorder' 
}

说点题外话,用json格式来创建对象的话,建议属性不需要单引号或者双引号,除非一些ecmascript的关键词,比如上面的'for','class'等,建议平时还是用
单引号,到不是说单引号一定就比双引号更好,更符合规范,但是一种习惯还是很重要的,不要在代码中即出现单引号又出现双引号的。
举个简单的例子:
<label for="username" id="test">name:</label><BR><input type="text" id="username" name="username"/><BR>

假如你想直接通过elem.propertyName这样的访问方式来得到某个DOM元素的某个属性值,对于上面的属性访问你就必须做个简单的变化,

例如上面的这个例子,你想得到label的for属性值。

var ele = document.getElementById('test'); 
var val = ele.htmlFor; 
//或者 
val = ele['htmlFor']; 
//通过标准的DOM方法访问的话,就不需要做特殊处理了 
val = ele.getAttribute('for'); 
val = ele.getAttributeNode('for').value;

同样对于class,readonly等的访问,上面的几种访问方式也一样适合。

个人觉得直接通过属性访问或许会比通过DOM方法访问要快些。
下面的文章会再对特殊属性的访问做介绍。

Javascript 相关文章推荐
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
Javascript中的async awai的用法
May 17 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 #Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 #Javascript
基于jquery的loading效果实现代码
Nov 05 #Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 #Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 #Javascript
TinyMCE 新增本地图片上传功能
Nov 05 #Javascript
jQuery示例收集
Nov 05 #Javascript
You might like
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
实用函数10
2007/11/08 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
详解vue axios二次封装
2018/07/22 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
python的turtle库使用详解
2019/05/10 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
python如何设置静态变量
2020/09/07 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
Internet体系结构
2014/12/21 面试题
群众路线剖析材料
2014/09/30 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
怎样写离婚协议书
2015/01/26 职场文书
介绍信范文大全
2015/05/07 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL