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对象添加自定义属性的方式和区别的更多相关文章

  1. js中 给json对象添加属性和json数组添加元素

    js中 给json对象添加新的属性 比如现在有一个json对象为jsonObj,需要给这个对象添加新的属性newParam,同时给newParam赋值为pre.做法如下: var obj={ &quo ...

  2. 通示jQuery实例方法,未DOM对象添加多个方法

    <script type="text/javascript"> /* * 通示jQuery实例方法,未DOM对象添加多个方法 * 用按钮做多个事件的调用 */ (fun ...

  3. js中的DOM对象 和 jQuery对象 比较

    一,二者的区别 通过 jQuery 获取的元素是一个数组,数组中包含着原生JS中的DOM对象. 总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法. 二,二者的相互 ...

  4. js中的DOM对象和jQuery对象的比较

    1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...

  5. javascript总结44: DOM对象的dataset属性方式

    1 DOM设置属性的特殊方式: DOM对象的dataset属性方式获取data-xxx方式定义的属性 由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟 ...

  6. WebKit JavaScript Binding添加新DOM对象的三种方式

    一.基础知识 首先WebKit IDL并非完全遵循Web IDL,只是借鉴使用.WebKit官网提供了一份说明(WebKitIDL),比如Web IDL称"operation”(操作), 而 ...

  7. JS中的DOM对象及JS对document对像的操作

    DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:rel ...

  8. JS中的DOM对象

    DOM对象 1. DOM树 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),通过 HTML DOM对象,可访问 JavaScript HTML 文档的所有 ...

  9. Java中String对象两种赋值方式的区别

    本文修改于:https://www.zhihu.com/question/29884421/answer/113785601 前言:在java中,String有两种赋值方式,第一种是通过“字面量”赋值 ...

随机推荐

  1. rtmp直播拉流客户端EasyRTMPClient设计过程中时间戳问题汇总

    EasyRTMPClient 简介 EasyRTMPClient是EasyDarwin流媒体团队开发.提供的一套非常稳定.易用.支持重连接的RTMPClient工具,以SDK形式提供,接口调用非常简单 ...

  2. 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

  3. Paxos is Simple

    [角色]0-MainProposer提案生成者1-提案发送者(MainProposer+OtherProposer)2-提案接收者(Acceptor)[动作]0-MainProposer----> ...

  4. lamp环境的搭建和配置

    安装apache httpd-2.2.31.tar.gz rpm -qa|grep httpd   ##卸载旧的httpd httpd--.el6.centos.x86_64 httpd-tools- ...

  5. python get post模拟请求

    1.使用get方式时.url相似例如以下格式: &op=bind   GET报问头例如以下: &n=asa HTTP/1.1    Accept: */*    Accept-Lang ...

  6. Hadoop-2.2.0中文文档—— MapReduce 下一代--容量调度器

    目的 这份文档描写叙述 CapacityScheduler,一个为Hadoop能同意多用户安全地共享一个大集群的插件式调度器,如他们的应用能适时被分配限制的容量. 概述 CapacitySchedul ...

  7. myeclipse安装tomactserver图解

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/shaozucheng/article/details/36673227 选择标题栏中 Window- ...

  8. Pentaho BIServer Community Edtion 6.1 使用教程 第二篇 迁移元数据 [HSQLDB TO MySQL]

    第一部分  迁移原因 Pentaho BI 社区版服务的很多元数据信息存储在数据库汇总,其默认使用HSQLDB 数据库,即借助它存储自身的资料库,比如 Quartz 调度信息.业务资料库连接信息(数据 ...

  9. Java拓展教程:文件DES加解密

    Java拓展教程:文件加解密 Java中的加密解密技术 加密技术根据一般可以分为对称加密技术和非对称加密技术.对称加密技术属于传统的加密技术,它的加密和解密的密钥是相同的,它的优点是:运算速度快,加密 ...

  10. jQuery的事件绑定和解除

    1 . 绑定事件 语法 : bind(type,data,fn) 描述 : 为每一个匹配的特定元素(像 click)绑定一个事件处理器函数. type(String) : 事件类型 data(Obje ...