{%hackmd tXTfhDH6QTWNg5QB_ZtSuw %} # DOM  --- # 約定 `$element` 是個DOM Node `$selector` 是個選擇器 `$string` 是個字串 `$bool` 是個布林值 `$fn` 是個函式 `$obj` 是個物件 `...` 是多輸入 --- # Selector ---- ## 新的方法 ```javascript= $element.querySelector($selector) $element.querySelectorAll($selector) ``` ---- ## 上古年代 ```javascript= $element.getElementsByTagName($string) $element.getElementsByClassName($string) $element.getElementById($string) ``` --- # Dom Node ---- ## 可用的列表 ```javascript accessKey ariaAtomic ariaAutoComplete ariaBusy ariaChecked ariaColCount ariaColIndex ariaColSpan ariaCurrent ariaDescription ariaDisabled ariaExpanded ariaHasPopup ariaHidden ariaKeyShortcuts ariaLabel ariaLevel ariaLive ariaModal ariaMultiLine ariaMultiSelectable ariaOrientation ariaPlaceholder ariaPosInSet ariaPressed ariaReadOnly ariaRelevant ariaRequired ariaRoleDescription ariaRowCount ariaRowIndex ariaRowSpan ariaSelected ariaSetSize ariaSort ariaValueMax ariaValueMin ariaValueNow ariaValueText assignedSlot attributeStyleMap attributes autocapitalize autofocus baseURI childElementCount childNodes children classList className clientHeight clientLeft clientTop clientWidth contentEditable dataset dir draggable elementTiming enterKeyHint firstChild firstElementChild hidden id innerHTML innerText inputMode isConnected isContentEditable lang lastChild lastElementChild localName namespaceURI nextElementSibling nextSibling nodeName nodeType nodeValue nonce offsetHeight offsetLeft offsetParent offsetTop offsetWidth onabort onanimationend onanimationiteration onanimationstart onauxclick onbeforecopy onbeforecut onbeforepaste onbeforexrselect onblur oncancel oncanplay oncanplaythrough onchange onclick onclose oncontextmenu oncopy oncuechange oncut ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop ondurationchange onemptied onended onerror onfocus onformdata onfullscreenchange onfullscreenerror ongotpointercapture oninput oninvalid onkeydown onkeypress onkeyup onload onloadeddata onloadedmetadata onloadstart onlostpointercapture onmousedown onmouseenter onmouseleave onmousemove onmouseout onmouseover onmouseup onmousewheel onpaste onpause onplay onplaying onpointercancel onpointerdown onpointerenter onpointerleave onpointermove onpointerout onpointerover onpointerrawupdate onpointerup onprogress onratechange onreset onresize onscroll onsearch onseeked onseeking onselect onselectionchange onselectstart onstalled onsubmit onsuspend ontimeupdate ontoggle ontransitioncancel ontransitionend ontransitionrun ontransitionstart onvolumechange onwaiting onwebkitanimationend onwebkitanimationiteration onwebkitanimationstart onwebkitfullscreenchange onwebkitfullscreenerror onwebkittransitionend onwheel outerHTML outerText ownerDocument parentElement parentNode part prefix previousElementSibling previousSibling scrollHeight scrollLeft scrollTop scrollWidth shadowRoot slot spellcheck style tabIndex tagName textContent title translate virtualKeyboardPolicy ``` ---- ## 常用API ```javascript= $element.id; $element.classList; $element.classList.add(...$string); $element.classList.remove(...$string); $element.classList.contains($string); $element.classList.toggle($string,$bool); $element.classList.replace($string,$string); $element.textContent; $element.style; $element.remove() $element.children; $element.parentElement; $element.tagName; $element.hidden; $element.textContent; ``` --- # Event  ---- ## 新的方法 ```javascript= $element.on事件名=$fn; ``` ---- [:rocket:](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) <!-- .element class="left" --> ## 上古方法 ```javascript= $element.addEventListener($string,$fn,$obj) ``` --- # END  ---- [](https://www.pixiv.net/artworks/85366357)