{"id":18389606,"url":"https://github.com/anseki/m-class-list","last_synced_at":"2025-07-17T00:31:25.067Z","repository":{"id":17650083,"uuid":"82414630","full_name":"anseki/m-class-list","owner":"anseki","description":"The super simple shim for `classList` of HTML and SVG, that transparently intercepts difference between modern browsers and semi-modern browsers.","archived":false,"fork":false,"pushed_at":"2025-06-24T05:37:06.000Z","size":315,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-13T04:54:16.250Z","etag":null,"topics":["classlist","contains","html","polyfill","replace","shim","svg","toggle"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anseki.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-18T20:39:45.000Z","updated_at":"2025-06-24T05:36:05.000Z","dependencies_parsed_at":"2023-01-13T19:26:20.057Z","dependency_job_id":null,"html_url":"https://github.com/anseki/m-class-list","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/anseki/m-class-list","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fm-class-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fm-class-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fm-class-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fm-class-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anseki","download_url":"https://codeload.github.com/anseki/m-class-list/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fm-class-list/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265108395,"owners_count":23712461,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["classlist","contains","html","polyfill","replace","shim","svg","toggle"],"created_at":"2024-11-06T01:43:57.199Z","updated_at":"2025-07-17T00:31:25.048Z","avatar_url":"https://github.com/anseki.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mClassList\n\n[![npm](https://img.shields.io/npm/v/m-class-list.svg)](https://www.npmjs.com/package/m-class-list) [![GitHub issues](https://img.shields.io/github/issues/anseki/m-class-list.svg)](https://github.com/anseki/m-class-list/issues) [![dependencies](https://img.shields.io/badge/dependencies-No%20dependency-brightgreen.svg)](package.json) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\nThe super simple shim for [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) of HTML and SVG, that transparently intercepts difference between modern browsers and semi-modern browsers.\n\nThere are many shims and polyfills for `classList`, and also, almost modern browsers already support `classList`.  \n**Why is a new shim needed now?**\n\n- Some browsers don't support yet `classList` of SVG element even if those support that of HTML element.\n- Some browsers don't support multiple arguments for methods of `DOMTokenList` (i.e. `classList`).\n- Since modern browsers support many other APIs, a heavy library that supports legacy browsers perfectly is unneeded.\n- That is, only a little bit of intercepting is needed, more simple and small shim is needed.\n\n**So, features of mClassList are:**\n\n- Provide `classList` if specified element does not have it.\n- Support SVG element also.\n- Support and respect the [standard API specification](https://dom.spec.whatwg.org/#interface-domtokenlist) that contains supporting multiple arguments for methods.\n- Simpler and smaller by using other APIs that are supported by modern browsers.\n- Don't change any `prototype`. ([Polyfills and the evolution of the Web](https://w3ctag.github.io/polyfills/))\n- Additionally support, \"Method chaining\".\n\n## Usage\n\nLoad mClassList into your web page.\n\n```html\n\u003cscript src=\"m-class-list.min.js\"\u003e\u003c/script\u003e\n```\n\nReplace `element.classList` with `mClassList(element)`.  \nThe `element` can be a HTML element or SVG element.\n\nFor example, replace this code:\n\n```js\nif (element.classList.contains('foo')) {\n  element.classList.add('bar', 'baz');\n}\n```\n\nwith:\n\n```js\nif (mClassList(element).contains('foo')) {\n  mClassList(element).add('bar', 'baz');\n}\n```\n\n## Supported APIs\n\nFollowing methods and properties are supported. For details of each one, see HTML5 document such as [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList).\n\n### `length`\n\n```js\nnumber = mClassList(element).length\n```\n\n### `item`\n\n```js\ntoken = mClassList(element).item(index)\n```\n\n### `add`\n\n```js\nclassList = mClassList(element).add(token1[, token2, token3...])\n```\n\n(See [`mClassList.methodChain`](#mclasslistmethodchain) for the return value.)\n\n### `remove`\n\n```js\nclassList = mClassList(element).remove(token1[, token2, token3...])\n```\n\n(See [`mClassList.methodChain`](#mclasslistmethodchain) for the return value.)\n\n### `contains`\n\n```js\nboolean = mClassList(element).contains(token)\n```\n\n### `toggle`\n\n```js\nboolean = mClassList(element).toggle(token[, force])\n```\n\n### `replace`\n\n```js\nclassList = mClassList(element).replace(token, newToken)\n```\n\n(See [`mClassList.methodChain`](#mclasslistmethodchain) for the return value.)\n\n## `mClassList.ignoreNative`\n\nBy default, `mClassList(element)` returns a native `classList` if `element` has it.  \nYou can set `mClassList.ignoreNative = true` to use shim always. For example, this is used for browsers that don't support multiple arguments for methods even though the `element` has `classList`.\n\n## `mClassList.methodChain`\n\nBy default, following methods return the `classList` instance itself.\n\n- [`add`](#add)\n- [`remove`](#remove)\n- [`replace`](#replace)\n\nTherefore you can use \"Method chaining\".  \nFor example:\n\n```js\nmClassList(element)\n  .add('foo', 'bar')\n  .remove('baz');\n```\n\nNote that this behavior differs from the [standard API specification](https://dom.spec.whatwg.org/#interface-domtokenlist).  \nIf you want the standard behavior, set `mClassList.methodChain = false` to make the methods return a `void`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanseki%2Fm-class-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanseki%2Fm-class-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanseki%2Fm-class-list/lists"}