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. 通用安防摄像机通过RTSP转RTMP推流进行H5(RTMP/HLS)直播的方案

    EasyNVR摄像机无插件直播方案 随着互联网的发展,尤其是移动互联网的普及,基于H5.微信的应用越来越多,企业也更多地想基于H5.微信公众号来快速开发和运营自己的视频及视频相关性产品,那么传统的安防 ...

  2. EasyPlayerPro(Windows)流媒体播放器开发之框架讲解

    EasyPlayerPro for Windows是基于ffmpeg进行开发的全功能播放器,开发过程中参考了很多开源的播放器,诸如vlc和ffplay等,其中最强大的莫过于vlc,但是鉴于vlc框架过 ...

  3. 2016WWDC详解

    今年苹果WWDC 2016上把所有系统都更新了个遍,watchOS.tvOS.macOS 和 iOS 都或多或少带来了新功能. 本文的主角是更新最多的 iOS 10,第一时间在一部 iPhone 6s ...

  4. java.lang.UnsupportedClassVersionError: com/dw/Function : Unsupported major.minor version 52.0

    本地环境中有jdk7和jdk8,当把jdk8改为jdk7时,出现如下错误,是jdk版本的问题,在Properties-->JAVA Compiler-中的Compiler compliance ...

  5. Java多线程系列 基础篇07 synchronized底层优化

    转载 http://www.cnblogs.com/paddix/ 作者:liuxiaopeng http://www.infoq.com/cn/articles/java-se-16-synchro ...

  6. 《程序员代码面试指南》第八章 数组和矩阵问题 数组的partition 调整

    题目 数组的partition 调整 java代码 package com.lizhouwei.chapter8; /** * @Description: 数组的partition 调整 * @Aut ...

  7. 《CSS权威指南(第三版)》---第五章 字体

    这章主要的内容有: 1.字体:一般使用一种通用的字体. 2.字体加粗:一般从数字100 -900 . 3.字体大小:font-size 4.拉伸和调整字体:font-stretch 5.调整字体大小: ...

  8. POJ2104 K-th Number —— 静态区间第k小

    题目链接:http://poj.org/problem?id=2104 K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Sub ...

  9. Zookeeper原理与Curator使用

    近期打算实现一个基于Zookeeper的分布式的集群状态一致性控制, 对Zookeeper的原理不太了解, 正好学习一下, 网上找到了几篇文章, 先贴在这边, 等我熟读官方文档后, 再来补充自己的见解 ...

  10. jauery改变inout的type属性报错type property can’t be changed

    uncaught exception type property can’t be changed 使用代码$("#pwd").attr("type",&quo ...