1 DOM设置属性的特殊方式:

DOM对象的dataset属性方式获取data-xxx方式定义的属性

由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟悉html规范的人,很容易把自定义的属性和html规范的属性混淆.为了更加方便,高效的实现这个需求,我们可以使用dataset属性

2 使用DOM对象的dataset属性,操作自定义属性时要注意的三点问题:

1 在标签上定义属性时,要以data-为前缀

2 在js中获取/设置通过data-定义的属性的值时,要通过dataset来获取/设置

//html

<div id="box" data-index="0" i="0"></div>

//js

var box = document.getElementById('box');

console.log(box.dataset) //返回一个对象,里面包含了所有当前标签上用data-定义的属性

console.log(box.dataset.index) //返回data-index 的值

javascript总结44: DOM对象的dataset属性方式的更多相关文章

  1. dom对象常用的属性和方法有哪些？

    dom对象常用的属性和方法有哪些? 一.总结 一句话总结: 1.document属性和方法:document的属性有head,body之类,方法有各种获取element的方法 2.element的属性 ...

  2. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

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

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

  4. JavaScript快速入门-DOM对象

    一.概述 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允 ...

  5. Javascript学习，DOM对象，方法的使用

    JavaScript: ECMAScript: BOM: DOM: 事件 DOM的简单学习 功能:控制html文档内容 代码:获取页面标签(元素)对象和Element document.getElem ...

  6. JavaScript学习-4——DOM对象、事件

    本章目录 --------window对象 --------document对象 --------事件 一.window对象 函数调用: 自己封装的函数只写:函数名(): 数学函数Math 例:绝对值 ...

  7. 我所了解的关于JavaScript定义类和对象的几种方式

    原文:http://www.cnblogs.com/hongru/archive/2010/11/08/1871359.html 在说这个话题之前,我想先说几句题外话:最近偶然碰到有朋友问我“hois ...

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

    DOM对象的三种在添加自定义属性的方式 一是 通过 “.”+“属性名” 二是 setAttribute()(getAttribute()获取) 三是 直接在元素标签上加属性  如:<div  n ...

  9. JavaScript中内置对象的一些属性及方法

    Javascript对象总结 JS中内置了17个对象,常用的是Array对象.Date对象.正则表达式对象.string对象.Global对象 Array对象中常用方法: Concat():表示把几个 ...

随机推荐

  1. centos开机提示CPU无法识别的问题

    centos版本和对应cpu兼容性,官方网址: https://access.redhat.com/support/policy/intel Red Hat Enterprise Linux Vers ...

  2. 3dmax卡通渲染插件pencil+渲染线框

    转自:http://www.cr173.com/soft/179512.html http://www.psoft.co.jp/jp/ 官网和YTB有 2代的视频教程,平均每个2分钟长,无解说,是日文 ...

  3. 015：索引、B+树

    一. 索引 1. 索引的定义 索引是一种单独的.物理的对数据库表中一列或多列的值进行排序的一种存储结构,它是某个表中一列或若干列值的集合和相应的指向表中物理标识这些值的数据页的逻辑指针清单.索引的作用 ...

  4. Linux系统启动流程与系统目录

    启动流程 # 1,开机BIOS自检 检查一系列的硬件,最后根据启动顺序启动,是硬盘还是光驱等 # 2,MBR引导 读硬盘0柱面0磁道1扇区的前446字节 1扇区=512字节 MBR=4446字节 四个 ...

  5. Linux学习笔记 - Shell 控制语句

    if 语句 语法: #!/bin/bash a= b= if [ $a -eq $b ] then echo "a 等于 b" elif [ $a -gt $b ] then ec ...

  6. Python压缩及解压文件

    Zip压缩 #-*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" import zipfile #加载模块 # 压缩 z = zipf ...

  7. Spring中application*的使用

    ApplicationAware 加载Spring配置文件时,如果Spring配置文件中所定义的Bean类实现了ApplicationContextAware 接口,那么在加载Spring配置文件时, ...

  8. STL之父Stepanov谈泛型编程的发展史

    这是一篇Dr. Dobb's Journal对STL之父stepanov的采访.文中数次提到STL的基本思想.语言的特性.编程的一些根本问题等,非常精彩.这篇文章让我想去拜读下stepanov的大作& ...

  9. Python实践练习目录

    缘由 做中学才是最好的方法,通过这些项目来加强自己的Python掌握程度. 原则 成体系地学,不搞"题海战术" 通所有不如精一物,精一物方可通所有 走心学,忌浮躁 项目列表 字符串 ...

  10. Rector模式

    讲到高性能IO绕不开Reactor模式,它是大多数IO相关组件如Netty.Redis在使用的IO模式,为什么需要这种模式,它是如何设计来解决高性能并发的呢? 最最原始的网络编程思路就是服务器用一个w ...