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有两种赋值方式,第一种是通过“字面量”赋值 ...
随机推荐
- 通用安防摄像机通过RTSP转RTMP推流进行H5(RTMP/HLS)直播的方案
EasyNVR摄像机无插件直播方案 随着互联网的发展,尤其是移动互联网的普及,基于H5.微信的应用越来越多,企业也更多地想基于H5.微信公众号来快速开发和运营自己的视频及视频相关性产品,那么传统的安防 ...
- EasyPlayerPro(Windows)流媒体播放器开发之框架讲解
EasyPlayerPro for Windows是基于ffmpeg进行开发的全功能播放器,开发过程中参考了很多开源的播放器,诸如vlc和ffplay等,其中最强大的莫过于vlc,但是鉴于vlc框架过 ...
- 2016WWDC详解
今年苹果WWDC 2016上把所有系统都更新了个遍,watchOS.tvOS.macOS 和 iOS 都或多或少带来了新功能. 本文的主角是更新最多的 iOS 10,第一时间在一部 iPhone 6s ...
- java.lang.UnsupportedClassVersionError: com/dw/Function : Unsupported major.minor version 52.0
本地环境中有jdk7和jdk8,当把jdk8改为jdk7时,出现如下错误,是jdk版本的问题,在Properties-->JAVA Compiler-中的Compiler compliance ...
- Java多线程系列 基础篇07 synchronized底层优化
转载 http://www.cnblogs.com/paddix/ 作者:liuxiaopeng http://www.infoq.com/cn/articles/java-se-16-synchro ...
- 《程序员代码面试指南》第八章 数组和矩阵问题 数组的partition 调整
题目 数组的partition 调整 java代码 package com.lizhouwei.chapter8; /** * @Description: 数组的partition 调整 * @Aut ...
- 《CSS权威指南(第三版)》---第五章 字体
这章主要的内容有: 1.字体:一般使用一种通用的字体. 2.字体加粗:一般从数字100 -900 . 3.字体大小:font-size 4.拉伸和调整字体:font-stretch 5.调整字体大小: ...
- POJ2104 K-th Number —— 静态区间第k小
题目链接:http://poj.org/problem?id=2104 K-th Number Time Limit: 20000MS Memory Limit: 65536K Total Sub ...
- Zookeeper原理与Curator使用
近期打算实现一个基于Zookeeper的分布式的集群状态一致性控制, 对Zookeeper的原理不太了解, 正好学习一下, 网上找到了几篇文章, 先贴在这边, 等我熟读官方文档后, 再来补充自己的见解 ...
- jauery改变inout的type属性报错type property can’t be changed
uncaught exception type property can’t be changed 使用代码$("#pwd").attr("type",&quo ...