HTML DOMTokenList 参考手册

课程表

JS 参考手册

JavaScript

Window

HTML DOM

Web API

HTML 对象

- </a></li> <li><a href="/sv/jsref/dom_obj_image.html" title="HTML DOM Image objekt"><img></a></li> <li><a href="/sv/jsref/dom_obj_ins.html" title="HTML DOM Ins objekt"><ins></a></li> <li><a href="/sv/jsref/dom_obj_button.html" title="HTML DOM Input Button objekt"><input> button</a></li> <li><a href="/sv/jsref/dom_obj_checkbox.html" title="HTML DOM Input Checkbox objekt"><input> checkbox</a></li> <li><a href="/sv/jsref/dom_obj_color.html" title="HTML DOM Input Color objekt"><input> color</a></li> <li><a href="/sv/jsref/dom_obj_date.html" title="HTML DOM Input Date objekt"><input> date</a></li> <li><a href="/sv/jsref/dom_obj_datetime.html" title="HTML DOM Input Datetime objekt"><input> datetime</a></li> <li><a href="/sv/jsref/dom_obj_datetime-local.html" title="HTML DOM Input DatetimeLocal objekt"><input> datetime-local</a></li> <li><a href="/sv/jsref/dom_obj_email.html" title="HTML DOM Input Email objekt"><input> email</a></li> <li><a href="/sv/jsref/dom_obj_fileupload.html" title="HTML DOM Input FileUpload objekt"><input> file</a></li> <li><a href="/sv/jsref/dom_obj_hidden.html" title="HTML DOM Input Hidden objekt"><input> hidden</a></li> <li><a href="/sv/jsref/dom_obj_input_image.html" title="HTML DOM Input Image objekt"><input> image</a></li> <li><a href="/sv/jsref/dom_obj_month.html" title="HTML DOM Input Month objekt"><input> month</a></li> <li><a href="/sv/jsref/dom_obj_number.html" title="HTML DOM Input Number objekt"><input> number</a></li> <li><a href="/sv/jsref/dom_obj_password.html" title="HTML DOM Input Password objekt"><input> password</a></li> <li><a href="/sv/jsref/dom_obj_radio.html" title="HTML DOM Input Radio objekt"><input> radio</a></li> <li><a href="/sv/jsref/dom_obj_range.html" title="HTML DOM Input Range objekt"><input> range</a></li> <li><a href="/sv/jsref/dom_obj_reset.html" title="HTML DOM Input Reset objekt"><input> reset</a></li> <li><a href="/sv/jsref/dom_obj_search.html" title="HTML DOM Input Search objekt"><input> search</a></li> <li><a href="/sv/jsref/dom_obj_submit.html" title="HTML DOM Input Submit objekt"><input> submit</a></li> <li><a href="/sv/jsref/dom_obj_text.html" title="HTML DOM Input Text objekt"><input> text</a></li> <li><a href="/sv/jsref/dom_obj_input_time.html" title="HTML DOM Input Time objekt"><input> time</a></li> <li><a href="/sv/jsref/dom_obj_url.html" title="HTML DOM Input URL objekt"><input> url</a></li> <li><a href="/sv/jsref/dom_obj_week.html" title="HTML DOM Input Week objekt"><input> week</a></li> <li><a href="/sv/jsref/dom_obj_kbd.html" title="HTML DOM Kbd objekt"><kbd></a></li> <li><a href="/sv/jsref/dom_obj_label.html" title="HTML DOM Label objekt"><label></a></li> <li><a href="/sv/jsref/dom_obj_legend.html" title="HTML DOM Legend objekt"><legend></a></li> <li><a href="/sv/jsref/dom_obj_li.html" title="HTML DOM Li objekt"><li></a></li> <li><a href="/sv/jsref/dom_obj_link.html" title="HTML DOM Link objekt"><link></a></li> <li><a href="/sv/jsref/dom_obj_map.html" title="HTML DOM Map objekt"><map></a></li> <li><a href="/sv/jsref/dom_obj_mark.html" title="HTML DOM Mark objekt"><mark></a></li> <li><a href="/sv/jsref/dom_obj_menu.html" title="HTML DOM Menu objekt"><menu></a></li> <li><a href="/sv/jsref/dom_obj_menuitem.html" title="HTML DOM MenuItem objekt"><menuitem></a></li> <li><a href="/sv/jsref/dom_obj_meta.html" title="HTML DOM Meta objekt"><meta></a></li> <li><a href="/sv/jsref/dom_obj_meter.html" title="HTML DOM Meter objekt"><meter></a></li> <li><a href="/sv/jsref/dom_obj_nav.html" title="HTML DOM Nav objekt"><nav></a></li> <li><a href="/sv/jsref/dom_obj_object.html" title="HTML DOM Object objekt"><object></a></li> <li><a href="/sv/jsref/dom_obj_ol.html" title="HTML DOM Ol objekt"><ol></a></li> <li><a href="/sv/jsref/dom_obj_optgroup.html" title="HTML DOM OptionGroup objekt"><optgroup></a></li> <li><a href="/sv/jsref/dom_obj_option.html" title="HTML DOM Option objekt"><option></a></li> <li><a href="/sv/jsref/dom_obj_output.html" title="HTML DOM Output objekt"><output></a></li> <li><a href="/sv/jsref/dom_obj_paragraph.html" title="HTML DOM Paragraph objekt"><p></a></li> <li><a href="/sv/jsref/dom_obj_param.html" title="HTML DOM Parameter objekt"><param></a></li> <li><a href="/sv/jsref/dom_obj_pre.html" title="HTML DOM Pre objekt"><pre></a></li> <li><a href="/sv/jsref/dom_obj_progress.html" title="HTML DOM Progress objekt"><progress></a></li> <li><a href="/sv/jsref/dom_obj_quote.html" title="HTML DOM Quote objekt"><q></a></li> <li><a href="/sv/jsref/dom_obj_s.html" title="HTML DOM S-objekt"><s></a></li> <li><a href="/sv/jsref/dom_obj_samp.html" title="HTML DOM Samp-objekt"><samp></a></li> <li><a href="/sv/jsref/dom_obj_script.html" title="HTML DOM Script-objekt"><script></a></li> <li><a href="/sv/jsref/dom_obj_section.html" title="HTML DOM Section-objekt"><section></a></li> <li><a href="/sv/jsref/dom_obj_select.html" title="HTML DOM Select-objekt"><select></a></li> <li><a href="/sv/jsref/dom_obj_small.html" title="HTML DOM Small-objekt"><small></a></li> <li><a href="/sv/jsref/dom_obj_source.html" title="HTML DOM Source-objekt"><source></a></li> <li><a href="/sv/jsref/dom_obj_span.html" title="HTML DOM Span-objekt"><span></a></li> <li><a href="/sv/jsref/dom_obj_strong.html" title="HTML DOM Strong-objekt"><strong></a></li> <li><a href="/sv/jsref/dom_obj_sub.html" title="HTML DOM Subscript-objekt"><sub></a></li> <li><a href="/sv/jsref/dom_obj_summary.html" title="HTML DOM Summary-objekt"><summary></a></li> <li><a href="/sv/jsref/dom_obj_sup.html" title="HTML DOM Superscript-objekt"><sup></a></li> <li><a href="/sv/jsref/dom_obj_table.html" title="HTML DOM Table-objekt"><table></a></li> <li><a href="/sv/jsref/dom_obj_tbody.html" title="HTML DOM TBody-objekt"><tbody></a></li> <li><a href="/sv/jsref/dom_obj_tabledata.html" title="HTML DOM TableData-objekt"><td></a></li> <li><a href="/sv/jsref/dom_obj_tfoot.html" title="HTML DOM TFoot-objekt"><tfoot></a></li> <li><a href="/sv/jsref/dom_obj_tablehead.html" title="HTML DOM TableHeader-objekt"><th></a></li> <li><a href="/sv/jsref/dom_obj_thead.html" title="HTML DOM THead-objekt"><thead></a></li> <li><a href="/sv/jsref/dom_obj_tablerow.html" title="HTML DOM TableRow-objekt"><tr></a></li> <li><a href="/sv/jsref/dom_obj_textarea.html" title="HTML DOM Textarea-objekt"><textarea></a></li> <li><a href="/sv/jsref/dom_obj_time.html" title="HTML DOM Time-objekt"><time></a></li> <li><a href="/sv/jsref/dom_obj_title.html" title="HTML DOM Title-objekt"><title></a></li> <li><a href="/sv/jsref/dom_obj_track.html" title="HTML DOM Track-objekt"><track></a></li> <li><a href="/sv/jsref/dom_obj_u.html" title="HTML DOM Underline-objekt"><u></a></li> <li><a href="/sv/jsref/dom_obj_ul.html" title="HTML DOM Ul-objekt"><ul></a></li> <li><a href="/sv/jsref/dom_obj_var.html" title="HTML DOM Variable-objekt"><var></a></li> <li><a href="/sv/jsref/dom_obj_video.html" title="HTML DOM Video-objekt"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/sv/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration-objekt">CSSStyleDeclaration</a></li> <li><a href="/sv/jsref/jsref_type_conversion.html" title="JavaScript-typkonvertering">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/sv/howto/index.html" title="CodeW3C.com-väskan">CodeW3C.com-väskan</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>HTML DOMTokenList 参考手册</h1> <div class="prenextnav"> <ul> <li> 上一页 <a href="/sv/jsref/dom_obj_html_nodelist.html" title="HTML DOM NodeList objekt">HTML NodeList</a></li> <li> 下一页 <a href="/sv/jsref/dom_obj_style.html" title="HTML DOM Style objekt">HTML Style</a></li> </ul> </div> <div> <h2>DOMTokenList</h2> <p><em>DOMTokenList</em> 是一组空格分隔的令牌。</p> <p>可以通过索引访问 DOMTokenList（从 0 开始）。</p> <p><a href="/sv/jsref/prop_domtokenlist_length.html" title="HTML DOMTokenList-längd egenskap">length 属性</a>返回 DOMTokenList 中的令牌数。</p> <p class="note"><span>注释：</span>HTML 元素的 <a href="/sv/jsref/prop_element_classlist.html" title="HTML DOM Element classList-egenskap">classList 属性</a>表示 DOMTokenList。</p> </div> <div> <h2>DOMTokenList 属性和方法</h2> <table class="dataintable"> <tr> <th style="width: 30%;">名称</th> <th>描述</th> </tr> <tr> <td><a href="/sv/jsref/met_domtokenlist_add.html" title="HTML DOMTokenList-add() metod">add()</a></td> <td>将一个或多个令牌添加到列表中。</td> </tr> <tr> <td><a href="/sv/jsref/met_domtokenlist_contains.html" title="HTML DOMTokenList-contains() metod">contains()</a></td> <td>如果列表包含类，则返回 true。</td> </tr> <tr> <td><a href="/sv/jsref/met_domtokenlist_entries.html" title="HTML DOMTokenList-entries() metod">entries()</a></td> <td>从列表中返回带有键/值对的迭代器。</td> </tr> <tr> <td><a href="/sv/jsref/met_domtokenlist_forEach.html" title="HTML DOMTokenList-forEach() metod">forEach()</a></td> <td>为列表中的每个令牌执行回调函数。</td> </tr> <tr> <td><a href="/sv/jsref/met_domtokenlist_item.html" title="HTML DOMTokenList-item() metod">item()</a></td> <td>返回指定索引处的令牌。</td> </tr> <tr> <td><a href="/sv/jsref/met_domtokenlist_keys.html" title="HTML DOMTokenList-keys() metod">keys()</a></td> <td>返回包含列表中键的迭代器。</td> </tr> <tr> <td><a href="/sv/jsref/prop_domtokenlist_length.html" title="HTML DOMTokenList-längd egenskap">length</a></td> <td>返回列表中的令牌数。</td> </tr> <tr> <td><a href="/sv/jsref/met_domtokenlist_remove.html" title="HTML DOMTokenList-remove() metod">remove()</a></td> <td>从列表中删除一个或多个令牌。</td> </tr> <tr> <td><a href="/sv/jsref/met_domtokenlist_replace.html" title="HTML DOMTokenList-replace() metod">replace()</a></td> <td>替换列表中的令牌。</td> </tr> <tr> <td><a href="/sv/jsref/met_domtokenlist_supports.html" title="HTML DOMTokenList-supports() metod">supports()</a></td> <td>如果令牌是属性支持的令牌之一，则返回 true。</td> </tr> <tr> <td><a href="/sv/jsref/met_domtokenlist_toggle.html" title="HTML DOMTokenList-toggle() metod">toggle()</a></td> <td>在列表中的令牌之间切换。</td> </tr> <tr> <td><a href="/sv/jsref/prop_domtokenlist_value.html" title="HTML DOMTokenList-value egenskap">value</a></td> <td>以字符串形式返回令牌列表。</td> </tr> <tr> <td><a href="/sv/jsref/met_domtokenlist_values.html" title="HTML DOMTokenList values() 方法">values()</a></td> <td>返回带有列表中值的迭代器。</td> </tr> </table> </div> <div> <h2>实例</h2> <h3>例子 1</h3> <p>将 "myStyle" 类添加到元素：</p> <pre class="language-js"> element.classList.add("myStyle"); </pre> <p class="tiy"><a target="_blank" href="/sv/tiy/t.html?f=jsck_element_classlist_add_1">亲自试一试</a></p> <h3>例子 2</h3> <p>从元素中删除 "myStyle" 类：</p> <pre class="language-js"> element.classList.remove("myStyle"); </pre> <p class="tiy"><a target="_blank" href="/sv/tiy/t.html?f=jsck_element_classlist_remove_1">亲自试一试</a></p> <h3>例子 3</h3> <p>打开并关闭 "myStyle"：</p> <pre class="language-js"> element.classList.toggle("myStyle"); </pre> <p class="tiy"><a target="_blank" href="/sv/tiy/t.html?f=jsck_element_classlist_toggle">亲自试一试</a></p> <p>页面下方提供更多实例。</p> </div> <div> <h2>不是数组</h2> <p><strong>DOMTokenList 不是数组！</strong></p> <p>DOMTokenList 可能看起来像数组，但事实并非如此。</p> <p>您可以遍历 DOMTokenList 并使用索引引用其令牌。</p> <p>但是您不能在 DOMTokenList 上使用 Array 方法，如 push()、pop() 或 join()。</p> </div> <div> <h2>实例</h2> <h3>例子 1</h3> <p>向元素添加多个类：</p> <pre class="language-js"> element.classList.add("myStyle", "anotherClass", "thirdClass"); </pre> <p class="tiy"><a target="_blank" href="/sv/tiy/t.html?f=jsck_element_classlist_add_2">亲自试一试</a></p> <h3>例子 2</h3> <p>从元素中删除多个类：</p> <pre class="language-js"> element.classList.remove("myStyle", "anotherClass", "thirdClass"); </pre> <p class="tiy"><a target="_blank" href="/sv/tiy/t.html?f=jsck_element_classlist_remove_2">亲自试一试</a></p> <h3>例子 3</h3> <p>获取元素的类名数量：</p> <pre class="language-js"> let numb = element.classList.length; </pre> <p class="tiy"><a target="_blank" href="/sv/tiy/t.html?f=jsck_element_classlist_length">亲自试一试</a></p> <h3>例子 4</h3> <p>获取 "myDIV" 元素的类名：</p> <pre class="language-js"> <div id="myDIV" class="myStyle anotherClass thirdClass"> <p>I am myDIV.</p> </div> const list = document.getElementById("myDIV").classList; </pre> <p class="tiy"><a target="_blank" href="/sv/tiy/t.html?f=jsck_element_classlist_get">亲自试一试</a></p> <h3>例子 5</h3> <p>获取元素的第一个类：</p> <pre class="language-js"> let className = element.classList.item(0); </pre> <p class="tiy"><a target="_blank" href="/sv/tiy/t.html?f=jsck_element_classlist_item">亲自试一试</a></p> <h3>例子 6</h3> <p>元素是否有 "myStyle" 类？</p> <pre class="language-js"> let x = element.classList.contains("myStyle"); </pre> <p class="tiy"><a target="_blank" href="/sv/tiy/t.html?f=jsck_element_classlist_contains_1">亲自试一试</a></p> <h3>例子 7</h3> <p>如果元素有 "myStyle" 类，则删除 "anotherClass"：</p> <pre class="language-js"> if (element.classList.contains("mystyle")) { element.classList.remove("anotherClass"); } </pre> <p class="tiy"><a target="_blank" href="/sv/tiy/t.html?f=jsck_element_classlist_contains_2">亲自试一试</a></p> <h3>例子 8</h3> <p>在类之间切换，以创建下拉按钮：</p> <pre class="language-js"> document.getElementById("myBtn").onclick = function() {myFunction()}; function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } </pre> <p class="tiy"><a target="_blank" href="/sv/tiy/t.html?f=jsck_onclick_dropdown">亲自试一试</a></p> <h3>例子 9</h3> <p>创建粘性导航栏：</p> <pre class="language-js"> // 获取导航栏 const navbar = document.getElementById("navbar"); // 获取导航栏的偏移位置 const sticky = navbar.offsetTop; // 当您到达其滚动位置时，将 sticky 类添加到导航栏 // 离开滚动位置时将其删除 function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } </pre> <p class="tiy"><a target="_blank" href="/sv/tiy/t.html?f=jsck_prop_element_offsettop_sticky">亲自试一试</a></p> </div> <div class="prenextnav"> <ul> <li> 上一页 <a href="/sv/jsref/dom_obj_html_nodelist.html" title="HTML DOM NodeList objekt">HTML NodeList</a></li> <li> 下一页 <a href="/sv/jsref/dom_obj_style.html" title="HTML DOM Style objekt">HTML Style</a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> 工具箱 </center><h3> <h5 id="tools_reference"><a href="/sv/jsref/index.html">JavaScript och HTML DOM referens manual</a></h5> <h5 id="tools_example"><a href="/sv/js/js_examples.html">JavaScript 实例</a></h5> <h5 id="tools_quiz"><a href="/sv/js/js_quiz.html">JavaScript 测验</a></h5> <h5 id="tools_tutorial"><a href="/sv/js/index.html">JavaScript 教程</a></h5> </div> <div><h3><center> 赞助商链接 </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> CodeW3C.com 提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。 </p> <p id="p2"> <a href="/sv/about/index.html" title="关于 CodeW3C.com">关于 CodeW3C.com</a> <a href="/sv/about/about_helping.html" title="帮助 CodeW3C.com">帮助 CodeW3C.com</a> <a href="/sv/about/about_use.html" title="关于使用">使用条款</a> <a href="/sv/about/about_privacy.html" title="关于隐私">隐私条款</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="Drivet av Ce4e.com"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>