js关于为DOM对象添加自定义属性的方式和区别

简介: DOM对象的三种在添加自定义属性的方式一是 通过 “.”+“属性名”     二是 setAttribute()(getAttribute()获取)三是 直接在元素标签上加属性  如:  三者的区别主要是在获取属性值方面:  1.var e = document.getElementById("te");   2.//获取属性   3.//用 . 来引用,必须是内置的(IE 可以访问自定义属性),而且引用的时候,区分大小写。

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的设置,通常是使用" . "运算符来实现

 

目录
相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
2月前
|
JavaScript 前端开发 算法
真实DOM和虚拟DOM有哪些区别?
本文介绍了真实DOM和虚拟DOM的概念、使用方式、优势、劣势、使用场景、影响因素、开发效率和性能对比。真实DOM是浏览器提供的原生接口,直接操作简单直观,但频繁操作会导致性能损耗。虚拟DOM是真实DOM的抽象表示,通过比较差异减少DOM操作,适用于大规模数据变更和复杂交互的页面。开发者应根据具体需求选择合适的DOM操作方式,以提高页面性能和开发效率。
86 1
真实DOM和虚拟DOM有哪些区别?
|
1月前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
1月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
2月前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
2月前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
93 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
72 4
|
2月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
44 0
|
前端开发 JavaScript
第60天:js常用访问CSS属性的方法
一、 js 常用访问CSS 属性的方法 我们访问得到css 属性,比较常用的有两种:     1. 利用点语法        box.style.width      box.style.top          点语法可以得到 width  属性  和 top属性  带有单位的。
1173 0