关于classList的API

<body class="a b c"> ...... </body> document.body.classList可以取得body的classList属性 classList属性和方法有: length 表示类的数量长度 add([string]) 增加类 remove([string]) 移除某类 toggle([string]) 有的话移除此类,没有的话加上此类 contains([string]) 判断是否包括某类,支持一个字符串 item() 支持一…

为DOM节点添加或者删除class

项目中如果应用了常用的javascript类库,多数情况下,这些已经封装好的类库,都会封装一个类似于addClass和removeClass的方法,以便于我们对DOM节点的class进行操作. 以jQuery为例: $(dom).addClass("a").removeClass("b"); 由于是封装好的方法,我们甚至都不需要检查需要操作的class在DOM中是否存在,用起来的感觉真的是不要太爽. 那么如果项目中没有使用任何类库呢,完全原生JavaScript,如…

使用原生js来操作对象dom的class属性

之前一直都使用jquery来操作dom,今天想自己用原生写一些插件,却发现给dom增删class的时候,使用slice来截取className特别的麻烦,后来发现,原来原生JS本来就有提供api来对dom的class进行增删,下面的对象就是用来对dom进行增删class的. Element.classList 点击查看classlist的api html: <div class="container"> </div> <button class="…

[Javascript] Manipulate the DOM with the classList API

Learn how to add, remove and test for CSS classes using the classList API. It's more powerful than using className and doesn't require any dependencies. https://gist.run/embed.html?id=9feda23aeb6ddd1b47e33f38e1518aaa…

[转]HTML5 classList API

Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: When are browser vendors going to see the helper methods/libraries created by the JavaScript toolkits and implement these functionalities natively within…

HTML5 classList API接口

原文地址:HTML5 classList API 原文日期: 2010年07月13日翻译日期: 2013年08月23日当我陷入JavaScrip和JavaScript类库框架之中时,我总是有种希望:什么时候浏览器厂商才能用本地代码原生地实现这些由工具类库所提供的方法呢? 我也知道标准的重要性,然而厂商们几乎不可能花大价钱钱仅仅为了实现这些功能.但是我相信他们会,而且是快马加鞭的实现. 好消息当然是其中的一个功能已经被纳入HTML5标准API: classList. classList对象在H…

温习classList api

有道题是一个removeClass的功能,代码里是正则分隔了传入的name,根据name的个数,循环移除掉,让寻找bug..看了了这几行代码,首先想到的是我会如何去优化. 如果看代码一两分钟就能找到公司js框架中的bug,那也太... 改为如何优化算是不错的面试题, first,去掉正则表达式,使用split字符串内置方法分隔, second,支持html5的浏览器使用classList api, 第三,类似jq,hasClass.remove.togglle都是用了字符串内置方法,indexO…

HTML5 classList API

使用 classList API

一.classList API 是什么属于 DOM API,HTML5 引入,用来操作 HTML 标签的 class 属性值. classList 属性是一个只读的类数组对象,"实时"地代表了元素的类名集合. classList 对象上定义了 6 个实用的操作 class 属性值的方法. 二.classList 对象上的属性和方法属性: length:返回当前类列表中类的个数. 方法: add(class1, class2, ...):添加类 remove(class1, clas…

HTML5的classList API优化对样式名className的操作

//添加一个class elem.classList.add(classname); //删除一个class elem.classList.remove(classname); //判断一个class是否已存在 elem.classList.contains(classname); //如果class已存在则移除,如果不存在则添加 elem.classList.toggle(classname); // 添加多个class elem.className = 'cls1 cls2';…

html5操作类名API——classlist

tagNode.classList.add('123'); // 添加类 tagNode.classList.remove('bbb'); // 删除类 tagNode.classList.toggle('eee'); // 切换类,如果有 eee 这个类则删除,没有则添加 tagNode.classList; // 返回DOMTokenList --- 类属性的实时集合兼容性…

html5与css交互 API 《一》classList

用过jquery的朋友都知道,jquery提供的方法中(3个)可以很方便的为指定的节点添加.删除类选择器,即addClass.removeClass.toggleClass.具体的用法我这里就不谈了,不了解的请移步[jquery官方网站][1] 下面我们一起看看html5中classList对象的基本属性 document.createElement("p").classList { length : 0, add : function add() { [native code] }…

APP并非一个人在战斗，还有API—Xamarin.Android回忆录

前言一般来说,一个客户端APP并非独立存在的,很多时候需要与服务器交互.大体可分为两方面的数据,常规字符串数据和文件数据,因为这两种数据很可能传输方式不一样,比如字符串之类的数据,使用HTTP协议,选择json或xml作为数据传输结构,而以json最方便简洁,所以我们近年来的项目,就直接使用json,不再使用xml了.但是作为文件,使用HTTP协议显然不够利索,而直接使用TCP协议是更好的选择.文件传输一般都是在服务端有服务一直在监听相应的端口,客户只需要使用TCP协议,根据服务端制定的规则上…

jQuery? 回归JavaScript原生API

如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且有时候只不过小写一个Demo,或者产品中只有少量的前端效果或DOM操作,就去花时间&空间引入jQuery,或者React?不免有取宰牛之刀以杀鸡之嫌. 原文首链:http://www.jeffjade.com/2015/11/25/2015-11-31-jQuery-vs-javaScript/ 在…

使用HTML5里的classList操作CSS类

在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. Element.classList 这个classList对象里有很多有用的方法: { length: {number}, /* # of class on this element */ add: function() { [native code] }, contains:…

classLIST元素增删改查方法

window.onload=function () { var oDiv=document.getElementsByTagName('div')[0]; var oInP=document.getElementsByTagName('input')[0]; var aDiv=new classList(oDiv); oInP.onclick=function(){ aDiv.add('ha'); alert(oDiv.className); }}/*如果e有classList属性则返回它,否则…

js的常用api

JavaScript常用API总结原创 2016-10-02 story JavaScript 下面是我整理的一些JavaScript常用的API清单. 目录元素查找 class操作节点操作属性操作内容操作 css操作位置大小事件 DOM加载完毕绑定上下文去除空格 Ajax JSON处理节点遍历元素查找 // Node document.getElementById(id) // document.getElementById('test') document.queryS…

第二篇、JavaScript常用的API

下面是我整理的一些JavaScript常用的API清单. 目录元素查找 class操作节点操作属性操作内容操作 css操作位置大小事件 DOM加载完毕绑定上下文去除空格 Ajax JSON处理节点遍历元素查找 // Node document.getElementById(id) // document.getElementById('test') document.querySelector(selectors) // document.querySelector('#te…

html5新增操作类名方式 classList

如果一个元素有多个类名,要如何删除呢,jqeury提供了removeClass()这个api,如果不用插件,自己封装,可以这样 function removeClass(elm,removeClassName) { var classNames = elm.className.split(/\s+/);//首先渠道类名字符串并拆分成数组 var pos = -1, i, len; for (i = 0, len = classNames.length; i < len; i++){//找到要删的…

javascript新的原生态API

以下是最新的w3c标准的javascript,目前支持运行在firefox, chrome,IE9以上版本的浏览器参考资料:https://developer.mozilla.org/ru/docs/Web/API http://docs.webplatform.org/wiki/dom 选择元素 var els = document.querySelectorAll('.el'); var $ = function (el) { return document.querySelectorAl…

javascript 常用api

常用API合集来源于:https://www.kancloud.cn/dennis/tgjavascript/241852 一.节点 1.1 节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只读 Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写 Node.baseURI //返回当前网页的绝对路径 Node.…

ArcGIS API for JavaScript 4.2学习笔记[9] 同一种视图不同数据（Map）同步

本例子核心:对MapView对象的map属性值进行替换即可达到更改地图数据的效果. 这个例子用的不是Map对象了,而是用的发布在服务器上的专题地图(WebMap)来加载到MapView上进行显示. 在html标签中,使用了section标签,不过没什么稀奇的,就把仨按钮放一块而已. 先给出预览图三张专题地图:失踪人口密度分布.难民迁徙路线.2015年欧洲来港者. 这个东西很有用,尤其是在展示同一地区的专题地图的时候,这里也展示了什么叫View,什么叫Map. 因为中心点.比例尺是由View对象…

js设置元素class方法小结及classList相关

给DOM元素设置class是我们在项目中非常容易遇到的,网上的资料和总结也比较多,下面比较全面的整理一下,希望给到大家一些帮助!并引用两种成熟的classList的兼容方法一.el.setAttribute('class','abc'); var div = document.getElementById('d1'); div.setAttribute("class", "abc"); 兼容:IE8/9/10/Firefox/Safari/Chrome/…

jacascript DOM节点——节点获取与选择器API

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM 操作必须等待 HTML 加载完毕之后,才可以获取节点:有两种方法: 把 script 标签放到代码的最后: 使用 window.onload 事件或者 JQuery 的 ready 事件: 一般情况一个页面响应加载的顺序是,域名解析---加载html---加载js和css---加载图片等其他信息. window.onload 和 JQuery 的 ready事件的区别: window.onloa…

History Api使用演示

h5新增的一个特性即在history对象上新增了pushState 和 replaceState 接口配合在window对象上新增的popState事件使用为什么要用它:因为通过historyapi可以实现 url跳转的时候不刷新当前页面,因此可以用来制作单页应用(SPA) 下面是个小例子: 切换到历史记录里查看,调用pushstate的时候插入了新的记录: <!DOCTYPE html> <html lang="en"> <head&…

前端入门6-JavaScript客户端api&jQuery

本篇文章已授权微信公众号 dasu_Android(大苏)独家发布声明本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MDN web docs Github:smyhvae/web 作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下. 正文-JavaScript-客户端API & jQuery JavaScript…

api日常总结：前端常用js函数和CSS常用技巧

我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){…

DOM扩展：DOM API的进一步增强[总结篇-上]

DOM1级主要定义了文档的底层结构,并提供了基本的查询操作的API,总体而言这些API已经比较完善,我们可以通过这些API完成大部分的DOM操作.然而,为了扩展DOM API的功能,同时进一步提高DOM操作的效率,DOM扩展也不断被提出和采纳.对DOM的扩展主要有两部分:Selectors API和HTML5,另外还有一个Element Traversal规范,主要用于元素遍历,另外还有一些专有扩展. 1 Selectors API Selectors API主要实现根据CSS选择符来查询匹配的…

javascript 原生常用api 数组方法大全

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10 ]; var newA…

element.dataset API

不久之前我向大家展示了非常有用的classList API,它是一种HTML5里提供的原生的对页面元素的CSS类进行增.删改的接口,完全可以替代jQuery里的那些CSS类操作方法.而另外一个非常有用的API就是 element.dataset API,从火狐6和Chrome8起就开始对它有了支持.这个简单的API能够让用户get或setHTML页面元素上的data-*属性.下面我们来看看它是如何使用的! 想必大家都知道,我们可以给HTML元素添加自定义的data-*属性.你可以给这个属性起任何…

【关于classList的API】的更多相关文章