{"id":3483,"date":"2013-07-15T17:06:01","date_gmt":"2013-07-15T09:06:01","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=3483"},"modified":"2018-04-28T14:24:46","modified_gmt":"2018-04-28T06:24:46","slug":"domtokenlist-html5-dom-classlist-%e7%b1%bb%e5%90%8d","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2013\/07\/domtokenlist-html5-dom-classlist-%e7%b1%bb%e5%90%8d\/","title":{"rendered":"HTML5 DOM\u5143\u7d20\u7c7b\u540d\u76f8\u5173\u64cd\u4f5cAPI classList\u7b80\u4ecb"},"content":{"rendered":"<p>by <a href=\"http:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"http:\/\/www.zhangxinxu.com\/\">http:\/\/www.zhangxinxu.com<\/a><br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=3483\">http:\/\/www.zhangxinxu.com\/wordpress\/?p=3483<\/a><\/p>\n<h3>\u4e00\u3001\u5176\u5b9e\u4e8b\u60c5\u7684\u53d1\u5c55\u5c31\u50cf\u5207\u6c34\u679c<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201307\/cut-fruit.jpg\" width=\"350\" height=\"196\" alt=\"\u5207\u6c34\u679c\" class=\"alignleft mr10\" \/><\/p>\n<p>\u5982\u679c\u6211\u4eec\u628a\u5143\u7d20\u7684\u7c7b\u540d\u64cd\u4f5c\u6bd4\u4f5c\u201c\u5207\u6c34\u679c\u201d\u6e38\u620f\u7684\u8bdd\uff0c\u5176\u4e2d\u4e00\u4e2a\u5355\u72ec\u7684\u7c7b\u540d\u5c31\u597d\u6bd4\u201c\u6c34\u679c\u201d\u6216\u201c\u70b8\u5f39\u201d\uff01<\/p>\n<p>DOM Level 2\u65f6\u4ee3\uff0c\u7c7b\u540d\u7684\u83b7\u53d6\u4e0e\u8bbe\u7f6e\uff0c\u591a\u534a\u4f7f\u7528<code>className<\/code>\u5c5e\u6027\uff0c<code>className<\/code>\u7684\u751f\u6548\u8fd1\u4f3c\u5207\u6c34\u679c\u7684\u201c\u4e00\u5200\u5207\u201d\u3002\u5728web\u7684\u521d\u671f\uff0c\u4ea4\u4e92\u4ec0\u4e48\u7684\u5176\u5b9e\u5f88\u7b80\u5355\u7684\u6765\uff1b\u5c31\u50cf\u5207\u6c34\u679c\u521a\u5f00\u59cb\u7684\u65f6\u5019\uff0c\u4e00\u6b21\u5c31\u4e00\u4e2a\u6c34\u679c\u98de\u4e0a\u6765\uff0c\u4e00\u5200\u201c\u5494\u5693\u201d\u5207\u4e86\u5c31\u597d\uff0c\u5c31\u50cf\u4f7f\u7528<code>className<\/code>\u8d4b\u4e2a\u7c7b\u540d\u503c\uff0c\u5c31\u7b97\u5076\u5c14\u5192\u51fa2\u4e2a\u6c34\u679c\uff0c<code>className<\/code>\u4e5f\u53ef\u4ee5\u4e00\u5200\u5207\u641e\u5b9a\u7684\u3002<\/p>\n<p>\u4f46\u662f\uff0c\u968f\u7740web\u7684\u53d1\u5c55\uff0c\u4ea4\u4e92\u7684\u9010\u6e10\u590d\u6742\uff0c\u4e00\u6b21\u51fa\u73b0\u7684\u6c34\u679c\u8d8a\u6765\u8d8a\u591a\uff0c\u5df2\u7ecf\u4e0d\u662f<code>className<\/code>\u4e00\u5200\u5c31\u53ef\u4ee5\u641e\u5b9a\u7684\u4e86\uff1b\u800c\u4e14\uff0c\u8fd8\u6709\u70b8\u5f39\uff0c<code>className<\/code>\u4e00\u5200\u5207\u53ef\u80fd\u5c31\u81ea\u5bfb\u6b7b\u8def\u4e86\u3002<\/p>\n<p>\u4e3a\u4e86\u5e94\u5bf9\u8fd9\u79cd\u9700\u6c42\uff0c\u663e\u7136HTML5\u8981\u505a\u70b9\u4ec0\u4e48\uff0c\u4e8e\u662f<code>classList<\/code> API\u51fa\u73b0\u4e86\uff0c\u53ef\u4ee5\u6709\u9488\u5bf9\u6027\u5730\u5207\u6c34\u679c\uff0c\u4e0d\u4f1a\u78b0\u5230\u70b8\u5f39\u4ec0\u4e48\u7684\u2026\u2026<\/p>\n<p>\u8fd9\u5c31\u662f\u4e8b\u60c5\u4ece<code>className<\/code>\u53d1\u5c55\u5230<code>classList<\/code>\u7684\u7f18\u7531\u4e0e\u8fc7\u7a0b\u3002<\/p>\n<p><code>classList<\/code>\u867d\u6539\u8fdb\uff0c\u4f46\u662f\uff0c\u4ece\u6548\u679c\u4e0a\u8bb2\uff0c\u8fd8\u662f\u654c\u4e0d\u8fc7jQuery\u7b49\u5916\u6302\uff0c\u540e\u9762\u4f1a\u63d0\u5230\u3002<\/p>\n<h3>\u4e8c\u3001\u6d4f\u89c8\u5668\u4eec\uff0c\u4f60\u4eec\u600e\u4e48\u770b\uff1f<\/h3>\n<p><code>classList<\/code>\u5b9e\u9645\u4e0a\u5df2\u7ecf\u51fa\u73b0\u597d\u591a\u5e74\u4e86\uff0c\u56e0\u6b64\uff0c\u81ea\u7136\uff0cFireFox\u6d4f\u89c8\u5668\uff0cChrome\u6d4f\u89c8\u5668\u90fd\u652f\u6301\u7684\u5f88\u3002IE\u5bb6\u65cf\u4e2d\uff0c\u4eceIE10\u6d4f\u89c8\u5668\u5f00\u59cb\u624d\u5f00\u59cb\u8ba4\u53ef<code>classList<\/code>\u80fd\u8fdb\u80fd\u9000\u7684\u975e\u4e00\u5200\u5207\u505a\u6cd5\u3002<\/p>\n<p>\u624b\u673a\u4e0a\uff0cAndroid 3.0+\u4ee5\u4e0a\u624d\u5f00\u59cb\u652f\u6301\uff0c\u54e6\uff0c\u8be5\u6b7b\uff0c\u8fd9\u5f88\u7cdf\u7cd5\u3002\u73b0\u5728\u624b\u673aweb app\u8981\u6c42android 2.*\u4e5f\u8981\u652f\u6301\u3002<\/p>\n<p>\u622a\u6b62\u4eca\u65e5\uff0c\u517c\u5bb9\u6027\u89c1\u4e0b\u622a\u56fe\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201307\/2013-07-12_181945.png\" width=\"594\" height=\"378\" alt=\"classList\u7684\u517c\u5bb9\u6027\" class=\"alignnone\" \/><\/p>\n<p>\u5b9e\u65f6\u517c\u5bb9\u6027\u67e5\u770b<a href=\"http:\/\/caniuse.com\/classlist\">\u70b9\u51fb\u8fd9\u91cc<\/a>\u3002<\/p>\n<p>\u7531\u6b64\u53ef\u89c1\uff0c\u5728PC\u4e0a\uff0c\u5982\u679c\u8981\u5224\u65ad\u662f\u5426\u662fIE10+\u4ee5\u53ca\u5176\u4ed6\u73b0\u4ee3\u6d4f\u89c8\u5668\uff0c\u53ef\u4ee5\u8bd5\u8bd5\uff1a<code>document.body.classList<\/code>\u662f\u5426\u4e3a<code>undefined<\/code>.<\/p>\n<h3>\u4e09\u3001classList API\u6982\u8981<\/h3>\n<p>\u5047\u8bbe\u6709\u8fd9\u4e48\u4e2a\u7a7a\u767d\u9875\u9762\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>&lt;body class=\"a b c\">&lt;\/body><\/pre>\n<\/div>\n<p>\u5728Firebug\u4ee5\u53caChrome\u63a7\u5236\u53f0\u4e2d\uff0c\u8fd0\u884c\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>document.body.classList<\/pre>\n<\/div>\n<p>\u8fd4\u56de\u7684\u5206\u522b\u662f\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201307\/2013-07-12_204945.png\" width=\"511\" height=\"276\" alt=\"FireFox\u63a7\u5236\u53f0 classList\" class=\"alignnone\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201307\/2013-07-12_205117.png\" width=\"515\" height=\"111\" class=\"alignnone\" alt=\"Chrome\u63a7\u5236\u53f0classList\" \/><\/p>\n<p>\u53ef\u89c1\u5176\u76f4\u63a5\u66b4\u9732\u7684API\u6709\uff1a<\/p>\n<ul>\n<li><strong>length<\/strong> \u5c5e\u6027\uff0c\u8868\u793a\u5143\u7d20\u7c7b\u540d\u7684\u4e2a\u6570\uff0c\u53ea\u8bfb<\/li>\n<li><strong>item()<\/strong> \u652f\u6301\u4e00\u4e2a\u53c2\u6570\uff0c\u4e3a\u7c7b\u540d\u7684\u7d22\u5f15\uff0c\u8fd4\u56de\u5bf9\u5e94\u7684\u7c7b\u540d\uff0c\u4f8b\u5982\u4e0a\u4f8b\uff1a\n<div class=\"zxx_code\">\n<pre>document.body.classList.item(0);<\/pre>\n<\/div>\n<p>\u7ed3\u679c\u662f\uff1a<code>\"a\"<\/code>.<\/p>\n<p>\u5982\u679c\u7d22\u5f15\u8d85\u51fa\u8303\u56f4\uff0c\u4f8b\u5982\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>document.body.classList.item(3);<\/pre>\n<\/div>\n<p>\u7ed3\u679c\u662f\uff1a<code>null<\/code>.\n<\/li>\n<li><strong>add()<\/strong> \u652f\u6301\u4e00\u4e2a\u7c7b\u540d\u5b57\u7b26\u4e32\u53c2\u6570\u3002\u8868\u793a\u5f80\u7c7b\u540d\u5217\u8868\u4e2d\u65b0\u589e\u4e00\u4e2a\u7c7b\u540d\uff1b\u5982\u679c\u4e4b\u524d\u7c7b\u540d\u5b58\u5728\uff0c\u5219\u6dfb\u52a0\u5ffd\u7565\u3002\u4f8b\u5982\uff1a\n<div class=\"zxx_code\">\n<pre>document.body.classList.add(\"c\");\ndocument.body.classList.length    <span style=\"color:green;\">\/\/ 3<\/span><\/pre>\n<\/div>\n<p>\u6b64\u51fd\u6570\u65b9\u6cd5\u6267\u884c\u7684\u8fd4\u56de\u503c\u662f<code>undefined<\/code>, \u56e0\u6b64\uff0c<code>classList<\/code>\u7684<code>add()<\/code>\u65b9\u6cd5\u662f\u65e0\u6cd5\u7ea7\u8054\u7684\u3002\u4e0b\u9762\u7684<code>remove()<\/code>\u65b9\u6cd5\u4e5f\u662f\u5982\u6b64\u3002<\/li>\n<li><strong>remove()<\/strong> \u652f\u6301\u4e00\u4e2a\u7c7b\u540d\u5b57\u7b26\u4e32\u53c2\u6570\u3002\u8868\u793a\u5f80\u7c7b\u540d\u5217\u8868\u4e2d\u79fb\u9664\u8be5\u7c7b\u540d\u3002\u4f8b\u5982\uff1a\n<div class=\"zxx_code\">\n<pre>document.body.classList.remove(\"c\");\ndocument.body.classList.length    <span style=\"color:green;\">\/\/ 2<\/span><\/pre>\n<\/div>\n<p>\u6709\u70b9\u5bf9\u5e94\u4e8ejQuery\u4e2d\u7684<code>removeClass()<\/code>\u65b9\u6cd5\uff0c\u7136\u540e\u8005\u8fd4\u56de\u5305\u88c5\u5668\u5bf9\u8c61\u672c\u8eab\uff0c\u53ef\u7ea7\u8054\uff1b\u8fd9\u91cc\u7684<code>remove()<\/code>\u65b9\u6cd5\u8fd4\u56de<code>undefined<\/code>.<\/li>\n<li><strong>toggle()<\/strong> \u652f\u6301\u4e00\u4e2a\u7c7b\u540d\u5b57\u7b26\u4e32\u53c2\u6570\u3002\u65e0\u5219\u52a0\u52c9\uff0c\u6709\u5219\u79fb\u9664\u4e4b\u610f\u3002\u82e5\u7c7b\u540d\u5217\u8868\u4e2d\u6709\u6b64\u7c7b\u540d\uff0c\u79fb\u9664\u4e4b\uff0c\u5e76\u8fd4\u56de<code>false<\/code>; \u5982\u679c\u6ca1\u6709\uff0c\u5219\u6dfb\u52a0\u8be5\u7c7b\u540d\uff0c\u5e76\u8fd4\u56de<code>true<\/code>.\n<p><strong>\u66f4\u65b0\u4e8e\u5f53\u65e5<\/strong><br \/>\n\u90e8\u5206\u73b0\u4ee3\u6d4f\u89c8\u5668\uff0c\u4f8b\u5982Chrome\u6d4f\u89c8\u5668\u4ee5\u53caFirefox 24\u7684<code>toggle()<\/code>\u65b9\u6cd5\u5df2\u7ecf\u652f\u6301\u7b2c2\u4e2a\u53c2\u6570\uff0c<code>.toggle(token, switch)<\/code>. \u5176\u4e2d\u53c2\u6570<code>switch<\/code>\u4e3aBoolean\u7c7b\u578b\u503c\uff0c\u5982\u679c\u4e3a<code>true<\/code>\u8868\u793a\u6dfb\u52a0\uff0c\u5982\u679c\u4e3a<code>false<\/code>\u5219\u8868\u793a\u79fb\u9664\u3002\u5e76\u8fd4\u56de\u8be5Boolean\u503c\u3002<\/li>\n<li><strong>contains()<\/strong> \u652f\u6301\u4e00\u4e2a\u7c7b\u540d\u5b57\u7b26\u4e32\u53c2\u6570\u3002\u8868\u793a\u5f80\u7c7b\u540d\u5217\u8868\u4e2d\u662f\u5426\u5305\u542b\u8be5\u7c7b\u540d\u3002\u6709\u70b9\u5bf9\u5e94jQuery\u4e2d\u7684<code>hasClass<\/code>\u65b9\u6cd5\uff0c\u6ce8\u610f\uff0c\u8fd9\u91cc\u7684\u662f<code>contains<\/code>\u800c\u4e0d\u662f<code>contain<\/code>\uff0c\u540e\u9762\u6709\u4e2a<code>s<\/code>\u54e6\uff01\n<p>\u8fd4\u56de\u503c\u5f88\u6613\u61c2\u7684\u3002\u5982\u679c\u5305\u542b\uff0c\u5219\u8fd4\u56de<code>true<\/code>, \u4e0d\u5305\u542b\uff0c\u5219<code>false<\/code>. \u4f8b\u5982\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>document.body.classList.contains(\"c\");    <span style=\"color:green;\">\/\/ false \u56e0\u4e3a\"c\"\u4e0a\u9762remove\u6389\u4e86<\/span><\/pre>\n<\/div>\n<\/li>\n<\/ul>\n<p>\u5728Firebug\u63a7\u5236\u53f0\u7ed3\u679c\u4e2d\uff0c\u6211\u4eec\u8fd8\u770b\u5230\u4e86<strong>toString()<\/strong>\u65b9\u6cd5\u3002\u5b9e\u9645\u4e0a\uff0cChrome\u6d4f\u89c8\u5668\u4e5f\u6709\uff08\u672a\u76f4\u63a5\u663e\u793a\uff09\uff0cIE10\u4e5f\u6709\uff0c\u4e0d\u8fc7\uff0c\u4f3c\u4e4e\u6765\u81ea\u5c42\u7ea7\u66f4\u9ad8\u5bf9\u8c61\u7684\u7ee7\u627f\u3002\u4ece\u4e0b\u9762\u622a\u56fe\u4e2d\u7684\u5c5e\u6027\u989c\u8272\u533a\u5206\u53ef\u89c1\u4e00\u6591\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201307\/2013-07-15_142840.png\" width=\"441\" height=\"168\" alt=\"toString\u65b9\u6cd5\u7684\u989c\u8272\u533a\u5206\u5c55\u793a\" class=\"alignnone\" \/><br \/>\n\u5c31\u4f5c\u7528\u4e0a\u8bb2\uff0c\u7b49\u540c\u4e8e<code>className<\/code>. \u4f8b\u5982\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>document.body.classList.toString() === document.body.className; <span style=\"color:green;\">\/\/ true<\/span><\/pre>\n<\/div>\n<h3>\u56db\u3001classList\u7684\u672c\u8d28-DOMTokenList<\/h3>\n<p><code>classList<\/code>\u7684\u8fd4\u56de\u503c\u663e\u793a\uff0c\u5176\u672c\u8d28\u4e0a\u662f<code>DOMTokenList<\/code> &#8211; DOM\u6807\u8bb0\u5217\u8868. <\/p>\n<blockquote><p><code>DOMTokenList<\/code>\u8fd9\u79cd\u7c7b\u578b\u8868\u793a\u4e00\u7ec4\u7a7a\u95f4\u5206\u9694\u7684\u6807\u8bb0\u3002\u901a\u5e38\u7531<code>HTMLElement.classList<\/code>, <code>HTMLLinkElement.relList<\/code>, <code>HTMLAnchorElement.relList<\/code>\u6216<code>HTMLAreaElement.relList<\/code>\u8fd4\u56de\u3002\u4ece0\u5f00\u59cb\u7684\u7c7bJavaScript\u6570\u7ec4\u7d22\u5f15\u3002<code>DOMTokenList<\/code>\u59cb\u7ec8\u662f\u533a\u5206\u5927\u5c0f\u5199\u7684\u3002<\/p><\/blockquote>\n<p>\u5728FireFox\u4ee5\u53caChrome\u4e0b\uff0c\u6211\u4eec\u6267\u884c<code>typeof DOMTokenList<\/code>\u7684\u7ed3\u679c\u662f\uff1a<code>\"function\"<\/code>; \u4f46\u662f\u5728IE10\u4e0b\uff0c\u5374\u662f\uff1a<code>\"object\"<\/code>. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201307\/2013-07-15_143255.png\" width=\"242\" height=\"150\" alt=\"IE10 DOMTokenList\u5bf9\u8c61\u7c7b\u578b\" class=\"alignnone\" \/><\/p>\n<p>\u540c\u65f6\u867d\u7136<code>typeof<\/code>\u7ed3\u679c\u4e3a<code>\"function\"<\/code>\uff0c\u4f46\u662f\u6267\u884c<code>DOMTokenList()<\/code>\u4f1a\u62a5&#8221;Illegal constructor&#8221;\u9519\u8bef\uff1bIE10\u6267\u884c<code>DOMTokenList()<\/code>\u4e5f\u4f1a\u62a5\u9519\uff0c\u9519\u8bef\u662f&#8221;\u7f3a\u5c11\u51fd\u6570&#8221;\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u8bd5\u56fe\u901a\u8fc7<code>typeof obj == \"function\"<\/code>\u6765\u5224\u65ad<code>obj<\/code>\u5c31\u662f\u4e2a\u51fd\u6570\u7684\u505a\u6cd5\u662f\u4e0d\u5b8c\u5168\u6b63\u786e\u7684\u3002<\/p>\n<h3>\u4e94\u3001classList\u7684\u5c40\u9650<\/h3>\n<p><code>classList<\/code>\u9664\u4e86\u4e0a\u9762\u63d0\u5230\u7684\u4e0d\u80fd\u7ea7\u8054\u8fd9\u4e2a\u65e0\u5173\u75db\u75d2\u7684\u5c40\u9650\u5916\uff0c\u8fd8\u6709\u4e2a\u6bd4\u8f83\u5934\u75bc\u7684\u5c40\u9650\uff0c\u5c31\u662f\u4e0d\u80fd\u4e00\u6b21<code>add<\/code>\u6216<code>remove<\/code>\u6216<code>toggle<\/code>\u591a\u4e2a\u7c7b\u540d\u3002<span class=\"s\">\/\/zxx: \u7ea7\u8054\u6307\u7684\u662f$().a().b().c()\u8fd9\u79cd\u53ef\u4ee5\u8fde\u5728\u4e00\u8d77\u8c03\u7528\u65b9\u6cd5\u7684\u5199\u6cd5\u3002<\/span><\/p>\n<p>\u4f8b\u5982\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>document.body.classList.add(\"c d\");    <span style=\"color:red;\">\/\/ Error: String contains an invalid character<\/span>\ndocument.body.classList.add(\"c\\x20d\");   <span style=\"color:red;\">\/\/ Error: String contains an invalid character<\/span>\ndocument.body.classList.remove(\"c d\");    <span style=\"color:red;\">\/\/ Error: String contains an invalid character<\/span><\/pre>\n<\/div>\n<p>\u6211\u4eec\u8981\u60f3\u591a\u7c7b\u540d\u5904\u7406\uff0c\u9700\u8981\u4e00\u4e2a\u4e00\u4e2a\u6765\uff0c\u4f8b\u5982\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>var clList = document.body.classList;\nclList.add(\"d\");\nclList.add(\"e\");\nclList.toString(); <span style=\"color:green;\">\/\/ \"a b c d e\"<\/span><\/pre>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201307\/2013-07-15_145850.png\" width=\"335\" height=\"137\" alt=\"\u591a\u4e2a\u7c7b\u540d\u6dfb\u52a0\u7684\u5904\u7406 \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" class=\"alignnone\" \/><\/p>\n<p>\u8fd9\u4e00\u70b9\u6765\u770b\uff0c\u539f\u751f\u7684<code>classList<\/code> API\u8981\u6bd4jQuery\u6216MooTools\u7b49\u6846\u67b6\u7684<code>addClass\/removeClass\/...<\/code>\u7b49\u7c7b\u540d\u76f8\u5173\u5916\u6302\u65b9\u6cd5\u5f31\u7206\u4e86\u3002\u7136\u800c\uff0c<code>classList<\/code> API\u6ca1\u6709\u604b\u7231\u7ecf\u5386\u3001\u975e\u5e38\u5355\u7eaf\u3002\u56e0\u6b64\uff0c\u867d\u7136\u80f8\u5c0f\u4e86\u4e00\u70b9\uff1b\u4f46\u662f\uff0c\u5bcc\u8c6a\u5c31\u662f\u559c\u6b22\u4e4b\u3002<\/p>\n<h3>\u516d\u3001classList\u7684\u6269\u5c55<\/h3>\n<p><code>add<\/code>\u7684\u53c2\u6570\u4e2a\u6570\u9650\u5236\u7b49\u65b9\u6cd5\u597d\u6bd4\u751f\u5b69\u5b50\uff0c\u4e00\u6b21\u53ea\u80fd\u751f\u4e00\u4e2a\uff0c\u8fd9\u7b26\u5408\u56fd\u5bb6\u8981\u6c42\u7b26\u5408\u89c4\u8303\u3002\u4f46\u662f\uff0c\u6709\u4e9b\u6709\u94b1\u4eba\uff0c\u5c31\u50cf\u5f20\u827a\u8c0b\uff0c\u5c31\u6101\u5b69\u5b50\u5c11\uff0c\u6068\u4e0d\u80fd\u4e00\u6b21\u751f\u4ed63\u4e2a\uff0c\u548b\u529e\u5462\uff1f\u6211\u4eec\u53ef\u4ee5\u8bd5\u8bd5\u5bf9<code>classList<\/code>\u505a\u6269\u5c55\uff0c\u4f8b\u5982\u6269\u5c55\u4e00\u4e2a<code>adds<\/code>\u65b9\u6cd5\uff0c\u53ef\u4ee5\u4e00\u6b21\u6dfb\u52a0\u591a\u4e2a\u7c7b\u540d\uff0c\u591a\u4e2a\u7c7b\u540d\u4ee5\u7a7a\u683c\u5206\u9694\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>DOMTokenList.prototype.adds = function(tokens) {\n   tokens.split(\" \").forEach(function(token) {\n       this.add(token);\n   }.bind(this));\n   return this;\n};\n\n<span style=\"color:green;\">\/\/ \u770b\u770b\u80fd\u4e0d\u80fd\u4e00\u4e0b\u5b50\u751f3\u4e2a\u5b69\u5b50<\/span>\nvar clList = document.body.classList;\nclList.adds(\"child1 child2 child3\").toString(); <span style=\"color:green;\">\/\/ \"a b c child1 child2 child3\"<\/span><\/pre>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201307\/2013-07-15_151352.png\" width=\"415\" height=\"126\" alt=\"DOMTokenList\u65b9\u6cd5\u6269\u5c55-\u591a\u7c7b\u540d\u6dfb\u52a0\u793a\u610f\" class=\"alignnone\" \/><\/p>\n<p>\u8fd9\u6837\uff0c\u53ea\u8981\u809a\u5b50\u591f\u5927\uff0c\u60f3\u751f\u51e0\u4e2a\u5c31\u53ef\u4ee5\u751f\u51e0\u4e2a\u4e86\uff0c\u4e2d\u56fd\u8db3\u7403\u8bf4\u4e0d\u5b9a\u5c31\u6709\u5e0c\u671b\u4e86\u2014\u201411\u80de\u80ce\u4e89\u9738\u5168\u7403\uff01<\/p>\n<p>\u5176\u4ed6\u4e9b\u65b9\u6cd5\uff0c\u60a8\u53ef\u4ee5\u505a\u7c7b\u4f3c\u6269\u5c55\u3002<\/p>\n<p>\u4f46\u662f\uff0c\u5e73\u5fc3\u800c\u8bba\uff0c\u5355\u7c7b\u540d\u4e00\u4e2a\u4e00\u4e2a\u6dfb\u52a0\u867d\u7136\u82e6\u903c\u4e86\u70b9\uff0c\u4f46\u662f\uff0c\u4e2a\u4eba\u60c5\u611f\u4e0a\uff0c\u56e0\u4e3a\u539f\u6c41\u539f\u5473\uff0c\u66f4\u559c\u6b22\uff01<\/p>\n<p><span class=\"s\">\/\/zxx: ios4\u4f3c\u4e4e\u5e76\u672a\u652f\u6301<code>bind<\/code>\u65b9\u6cd5\uff0c\u56e0\u6b64\uff0c\u4e0a\u9762\u7684\u6269\u5c55\u5982\u679c\u5728\u624b\u673a\u4e0a\u4f7f\u7528\uff0c\u9700\u7a0d\u4f5c\u8c03\u6574\u3002<\/span><\/p>\n<h3>\u8865\u5145\uff1aclassList\u7684\u4f7fIE9\u6d4f\u89c8\u5668\u4e5f\u517c\u5bb9\u7684polyfill<\/h3>\n<p>\u53c2\u89c1\u6b64\u9879\u76ee\uff1a<a href=\"https:\/\/github.com\/eligrey\/classList.js\/\" rel=\"noopener\" target=\"_blank\">https:\/\/github.com\/eligrey\/classList.js\/<\/a><\/p>\n<h3>\u4e03\u3001\u7ed3\u8bed<\/h3>\n<p>\u968f\u7740JS API\u7684\u8d8a\u6765\u8d8a\u4e30\u5bcc\uff0c\u4ee5\u53ca\u8d8a\u6765\u8d8a\u591a\u5728\u73b0\u4ee3\u6d4f\u89c8\u5668\u3001\u5c24\u5176\u624b\u673a\u4e0a\u7684\u4e00\u4e9b\u6298\u817e\uff0c\u8ba9\u6211\u8d8a\u6765\u8d8a\u7591\u60d1\u4e00\u4e9b\u5e9e\u5927\u6846\u67b6\u7684\u5b58\u5728\u610f\u4e49\u3002<\/p>\n<p>\u6709\u4eba\u53ef\u80fd\u4f1a\u63d0\u51fa\uff1a\u539f\u751f\u7684API\u65b9\u6cd5\u540d\u592a\u957f\u4e86\uff0c\u4f8b\u5982\uff1a<code>addEventListener<\/code>, <code>getComputedStyle<\/code>, <code>insertAdjacentHTML<\/code>, <code>getBoundingClientRect<\/code>\u7b49\u3002<\/p>\n<div style=\"font-size:90%; color:#444;\">\n\u6211\uff1a\u201c\u7136\u540e\u5462\u2026\u2026\u201d<br \/>\n\u201c\u540d\u5b57\u957f\uff0c\u4e0d\u597d\u8bb0\u554a\u2026\u2026\u201d<br \/>\n\u6211\uff1a\u201c\u6ca1\u9519\uff0c\u7136\u540e\u5462\u2026\u2026\u201d<br \/>\n\u201c\u6587\u4ef6\u5927\u554a\u2026\u2026\u201d<br \/>\n\u6211\uff1a\u201c\u4fdd\u7559\uff0c\u7136\u540e\u5462\u2026\u2026\u201d<br \/>\n\u201c\u65b0\u4eba\u4e0d\u597d\u4e0a\u624b\u554a\u2026\u2026\u201d<br \/>\n\u6211\uff1a\u201c\u7b97\u662f\uff0c\u7136\u540e\u5462\u2026\u2026\u201d<br \/>\n\u201c\u2026\u2026\u201d<br \/>\n\u6211\uff1a\u201c\u6ca1\u8bdd\u8bf4\u4e86\u5427\uff0c\u90a3\u6211\u6765\u8bf4\uff01\u201d\n<\/div>\n<p>1. \u5173\u4e8e\u201c\u540d\u5b57\u957f\uff0c\u4e0d\u597d\u8bb0\u201d<br \/>\n\u4f60\u7236\u6bcd\u624b\u673a\u53f7\u662f\uff1f\u554a\uff0c\u4e0d\u77e5\u9053\u554a\uff01\u90a3\u786e\u5b9e\u540d\u5b57\u592a\u957f\uff0c\u4e0d\u592a\u597d\u8bb0\u3002<\/p>\n<p>2. \u5173\u4e8e\u201c\u6587\u4ef6\u5927\u554a\u201d<br \/>\n\u5c0f\u660e\u5de5\u4f5c40\u5e74\uff0c\u4ea4\u7684\u517b\u8001\u4fdd\u9669\u91d1\u6709100\u4e07\uff0c0\u5b58\u6b3e\uff0c\u6bcf\u4e2a\u6708\u53ef\u4ee5\u62ff4000, \u6bcf\u6708\u7ed3\u4f592000; \u5927\u660e\u5de5\u4f5c40\u5e74\uff0c\u517b\u8001\u4fdd\u9669\u4e00\u5206\u94b1\u6ca1\u4ea4\uff0c\u5b58\u4e86100\u4e07\uff0c\u6bcf\u6708\u7ed3\u4f59-3000\u3002\u7ed3\u679c\uff0c\u5c0f\u660e\u7b11\u5927\u660e\u6bcf\u4e2a\u6708\u7684\u5f00\u9500\u6bd4\u4ed6\u591a1000\u5757\uff0c\u8bf4\u4f60\u6ca1\u4ea4\u517b\u8001\u4fdd\u9669\u4e8f\u5927\u4e86\u3002<\/p>\n<p><code>dom.addEventListener<\/code>\u548c<code>$(dom).bind<\/code>\u54ea\u4e2a\u5b57\u7b26\u591a\uff0c\u663e\u7136\u524d\u8005\uff0c\u5c0f\u660e\u4f60\u8d62\u4e86\uff01<\/p>\n<p>\u90a3\u4e0b\u9762\u4ee3\u7801\u5462\uff1f<\/p>\n<div class=\"zxx_code\">\n<pre>var addEventListener = \"addEventListener\";\ndom[addEventListener]\n\nvar bind = \"bind\";\n$(dom)[bind]<\/pre>\n<\/div>\n<p>\u5c0f\u660e\uff0c\u4f60\u53c8\u8d62\u4e86\uff01JS\u538b\u7f29\u4e4b\u540e\u5462\uff1f<\/p>\n<div class=\"zxx_code\">\n<pre>var a= \"addEventListener\";\ndom[a]\n\nvar b= \"bind\";\n$(dom)[b]<\/pre>\n<\/div>\n<p>\u5c0f\u660e\uff0c\u4f60\u53c8\u8d62\u4e86\uff01\u90a3\u591a\u8c03\u7528\u51e0\u6b21\u5462\uff1f<\/p>\n<div class=\"zxx_code\">\n<pre>var a= \"addEventListener\";\ndom[a]\ndom[a]\ndom[a]\ndom[a]\ndom[a]\n\nvar b= \"bind\";\n$(dom)[b]\n$(dom)[b]\n$(dom)[b]\n$(dom)[b]\n$(dom)[b]<\/pre>\n<\/div>\n<p>\u4e00\u6837\u591a\uff0c\u5c0f\u660e\uff0c\u4f60\u8fd8\u6ca1\u8f93\uff01\u597d\u5427\uff0c\u6211\u518d\u6b21\u8ba4\u4e3a\u4f60\u662f\u5bf9\u7684\u3002<\/p>\n<p>3. \u5173\u4e8e\u201c\u65b0\u4eba\u4e0d\u597d\u4e0a\u624b\u201d<br \/>\n\u6797\u8fdc\u56fe\u5c01\u88c5\u4e86\u300a\u8475\u82b1\u5b9d\u5178\u300b\uff0c\u7f8e\u540d\u66f0\u201c\u8f9f\u90aa\u5251\u6cd5\u201d\uff0c\u6bd4\u8f83\u597d\u4e0a\u624b\uff0c\u7ed3\u679c\u5462\uff0c\u5176\u513f\u5b59\u6cdb\u6cdb\u3002\u5012\u662f\u6797\u5e73\u4e4b\uff0c\u5b66\u4e60\u4e86\u76d7\u7248\u539f\u751f\u7684\u300a\u8475\u82b1\u5b9d\u5178\u300b\uff0c\u867d\u7136\u4e0d\u597d\u4e0a\u624b\uff08\u8981\u54ac\u62b9\u5e03\u6325\u5200\u90a3\u4e2a\uff09\uff0c\u4f46\u662f\uff0c\u7ed3\u679c\u79d2\u4e86\u4f59\u6ca7\u6d77\uff0c\u4e5f\u7b97\u9ad8\u624b\u4e4b\u5217\u4e86\u3002<\/p>\n<p>\u554a\uff1f\u539f\u6765\u4f60\u662f\u62db\u65b0\u4eba\u6765\u6253\u6742\u7684\uff0csorry, \u7f51\u4e0a\u7684\u6846\u67b6\u3001\u63d2\u4ef6\u786e\u5b9e\u6bd4\u8f83\u9002\u5408\u4f60\u4eec\u3002<\/p>\n<p><a href=\"http:\/\/zeptojs.com\/\">zepto.js<\/a>\u7b97\u662f\u86ee\u7b80\u6d01\u7684\u79fb\u52a8\u6846\u67b6\u4e86\uff0c<del datetime=\"2013-07-16T03:05:01+00:00\">\u5b9e\u9645\u4e0a\uff0c<code>zepto.js<\/code>\u6709\u501f\u9274<code>jqmobi.js<\/code>\uff08\u4e4b\u524d\u88abintel\u6536\u8d2d\uff0c\u6539\u540d\u4e3a<code>appframework<\/code>\uff09\u7684\u5acc\u7591<\/del>\uff08\u7ea0\u6b63\uff1a<code>zepto.js<\/code>\u662f\u88ab<code>jqmobi.js<\/code>\u501f\u9274\uff09\uff0c\u800c\u540e\u8005\u4f3c\u4e4e\u66f4\u5c0f\uff0c\u6211\u770b\u4e86\u4e0b\uff0cgzip\u540e<code>6.7K<\/code>, \u5c0f\u4e8e\u524d\u8005<code>9.7k<\/code>\uff08\u56e0\u542b<code>touch<\/code>\u76f8\u5173\u4e8b\u4ef6\u91cd\u5199\uff09. \u4f46\u662f\uff0c\u6211\u4e2a\u4eba\u770b\u6765\uff0c\u8fd8\u662f\u592a\u5927\u4e86\uff0c\u5c24\u5176\u90a3\u4e9bDOM\u76f8\u5173\u7684API\uff0c\u90fd\u901a\u901a\u4f1a\u5a18\u5bb6\u53bb\u5427\uff0cgzip\u540e<code>2~3K<\/code>\u8db3\u77e3\u3002<\/p>\n<p>\u5929\u6c14\u5f88\u70ed\uff0c\u60f3\u9493\u9c7c\u4e86\uff01<img decoding=\"async\" src=\"http:\/\/mat1.gtimg.com\/www\/mb\/images\/face\/49.gif\" align=\"absmiddle\"><\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u6765\u81ea<a href=\"http:\/\/www.zhangxinxu.com\/\">\u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b<\/a>[<a href=\"http:\/\/www.zhangxinxu.com\/\">http:\/\/www.zhangxinxu.com<\/a>]<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=3483\">http:\/\/www.zhangxinxu.com\/wordpress\/?p=3483<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5982\u679c\u6211\u4eec\u628a\u5143\u7d20\u7684\u7c7b\u540d\u64cd\u4f5c\u6bd4\u4f5c\u201c\u5207\u6c34\u679c\u201d\u6e38\u620f\u7684\u8bdd\uff0c\u5176\u4e2d\u4e00\u4e2a\u5355\u72ec\u7684\u7c7b\u540d\u5c31\u597d\u6bd4\u201c\u6c34\u679c\u201d\u6216\u201c\u70b8\u5f39\u201d\uff01<br \/>\nDOM Level 2\u65f6\u4ee3\uff0c\u7c7b\u540d\u7684\u83b7\u53d6\u4e0e\u8bbe\u7f6e\uff0c\u591a\u534a\u4f7f\u7528className\u5c5e\u6027\uff0cclassName\u7684\u751f\u6548\u8fd1\u4f3c\u5207\u6c34\u679c\u7684\u201c\u4e00\u5200\u5207\u201d\u3002\u5728web\u7684\u521d\u671f\uff0c\u4ea4\u4e92\u4ec0\u4e48\u7684\u5176\u5b9e\u5f88\u7b80\u5355\u7684\u6765\uff1b\u5c31\u50cf\u5207\u6c34\u679c\u521a\u5f00\u59cb\u7684\u65f6\u5019\uff0c\u4e00\u6b21\u5c31\u4e00\u4e2a\u6c34\u679c\u98de\u4e0a\u6765\uff0c\u4e00\u5200\u201c\u5494\u5693\u201d\u5207\u4e86\u5c31\u597d\uff0c\u5c31\u50cf\u4f7f\u7528className\u8d4b\u4e2a\u7c7b\u540d\u503c\uff0c\u5c31\u7b97\u5076\u5c14\u5192\u51fa2\u4e2a\u6c34\u679c\uff0cclassName\u4e5f\u53ef\u4ee5\u4e00\u5200\u5207\u641e\u5b9a\u7684\u3002<br \/>\n\u4f46\u662f\uff0c\u968f\u7740web\u7684\u53d1\u5c55\uff0c\u4ea4\u4e92\u7684\u9010\u6e10\u590d\u6742\u2026\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[215,846,350,182,845,848,775,806,847],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/3483"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3483"}],"version-history":[{"count":0,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/3483\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}