js关于为DOM对象添加自定义属性的方式和区别
DOM对象的三种在添加自定义属性的方式
一是 通过 “.”+“属性名”
二是 setAttribute()(getAttribute()获取)
三是 直接在元素标签上加属性 如:<div name="" id="te" class="" content=""></div>
三者的区别主要是在获取属性值方面:
1.var e = document.getElementById("te");
2.//获取属性
3.//用 . 来引用,必须是内置的(IE 可以访问自定义属性),而且引用的时候,区分大小写。
4.alert(e.id);//"test"
5.alert(e.className);//"cls"
6.alert(e.ss);//undefined(IE下为 "ss");
7.
8.//用getAttribute 来引用,可以访问自定义属性,不区分大小写。
9.alert(e.getAttribute("id"));//"test"
10.alert(e.getAttribute("ID"));//"test"
11.//注意浏览器差异
12.alert(e.getAttribute("class"));//"cls"(Firefox)
13.alert(e.getAttribute("className"));//"cls"(IE)
14.
15.alert(e.getAttribute("ss"));//"ss"
16.
17.//设置属性
18./*使用 . 运算符和 setAttribute都可以。但是对于自定义属性,使用.运算符的设置的属性无法通过getAttribute获取,反之亦然。*/
19.e.setAttribute("abc2","abc2");
20.e.abc3 = "abc3";
21.
22.e.title1 = "abc";
23.alert(e.getAttribute("title1"));//null
var e = document.getElementById("test");
//获取属性
//用 . 来引用,必须是内置的(IE 可以访问自定义属性),而且引用的时候,区分大小写。
alert(e.id);//"test"
alert(e.className);//"cls"
alert(e.ss);//undefined(IE下为 "ss");
//用getAttribute 来引用,可以访问自定义属性,不区分大小写。
alert(e.getAttribute("id"));//"test"
alert(e.getAttribute("ID"));//"test"
//注意浏览器差异
alert(e.getAttribute("class"));//"cls"(Firefox)
alert(e.getAttribute("className"));//"cls"(IE)
alert(e.getAttribute("ss"));//"ss"
因此 对于style,className的设置,通常是使用" . "运算符来实现
js关于为DOM对象添加自定义属性的方式和区别的更多相关文章
- js中 给json对象添加属性和json数组添加元素
js中 给json对象添加新的属性 比如现在有一个json对象为jsonObj,需要给这个对象添加新的属性newParam,同时给newParam赋值为pre.做法如下: var obj={ &quo ...
- 通示jQuery实例方法,未DOM对象添加多个方法
<script type="text/javascript"> /* * 通示jQuery实例方法,未DOM对象添加多个方法 * 用按钮做多个事件的调用 */ (fun ...
- js中的DOM对象 和 jQuery对象 比较
一,二者的区别 通过 jQuery 获取的元素是一个数组,数组中包含着原生JS中的DOM对象. 总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法. 二,二者的相互 ...
- js中的DOM对象和jQuery对象的比较
1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...
- javascript总结44: DOM对象的dataset属性方式
1 DOM设置属性的特殊方式: DOM对象的dataset属性方式获取data-xxx方式定义的属性 由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟 ...
- WebKit JavaScript Binding添加新DOM对象的三种方式
一.基础知识 首先WebKit IDL并非完全遵循Web IDL,只是借鉴使用.WebKit官网提供了一份说明(WebKitIDL),比如Web IDL称"operation”(操作), 而 ...
- JS中的DOM对象及JS对document对像的操作
DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:rel ...
- JS中的DOM对象
DOM对象 1. DOM树 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),通过 HTML DOM对象,可访问 JavaScript HTML 文档的所有 ...
- Java中String对象两种赋值方式的区别
本文修改于:https://www.zhihu.com/question/29884421/answer/113785601 前言:在java中,String有两种赋值方式,第一种是通过“字面量”赋值 ...
随机推荐
- rtmp直播拉流客户端EasyRTMPClient设计过程中时间戳问题汇总
EasyRTMPClient 简介 EasyRTMPClient是EasyDarwin流媒体团队开发.提供的一套非常稳定.易用.支持重连接的RTMPClient工具,以SDK形式提供,接口调用非常简单 ...
- The connection between feature spaces and smoothness is not obvious, and is one of the things we’ll discuss in the course.
http://www.gatsby.ucl.ac.uk/~gretton/coursefiles/lecture4_introToRKHS.pdf
- Paxos is Simple
[角色]0-MainProposer提案生成者1-提案发送者(MainProposer+OtherProposer)2-提案接收者(Acceptor)[动作]0-MainProposer----> ...
- lamp环境的搭建和配置
安装apache httpd-2.2.31.tar.gz rpm -qa|grep httpd ##卸载旧的httpd httpd--.el6.centos.x86_64 httpd-tools- ...
- python get post模拟请求
1.使用get方式时.url相似例如以下格式: &op=bind GET报问头例如以下: &n=asa HTTP/1.1 Accept: */* Accept-Lang ...
- Hadoop-2.2.0中文文档—— MapReduce 下一代--容量调度器
目的 这份文档描写叙述 CapacityScheduler,一个为Hadoop能同意多用户安全地共享一个大集群的插件式调度器,如他们的应用能适时被分配限制的容量. 概述 CapacitySchedul ...
- myeclipse安装tomactserver图解
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/shaozucheng/article/details/36673227 选择标题栏中 Window- ...
- Pentaho BIServer Community Edtion 6.1 使用教程 第二篇 迁移元数据 [HSQLDB TO MySQL]
第一部分 迁移原因 Pentaho BI 社区版服务的很多元数据信息存储在数据库汇总,其默认使用HSQLDB 数据库,即借助它存储自身的资料库,比如 Quartz 调度信息.业务资料库连接信息(数据 ...
- Java拓展教程:文件DES加解密
Java拓展教程:文件加解密 Java中的加密解密技术 加密技术根据一般可以分为对称加密技术和非对称加密技术.对称加密技术属于传统的加密技术,它的加密和解密的密钥是相同的,它的优点是:运算速度快,加密 ...
- jQuery的事件绑定和解除
1 . 绑定事件 语法 : bind(type,data,fn) 描述 : 为每一个匹配的特定元素(像 click)绑定一个事件处理器函数. type(String) : 事件类型 data(Obje ...