DOM TokenList.contains(token) vs. Element.matches(CSS seletorString)


Posted by mijouhsieh on 2022-05-09

NOTE CODEPEN

Node.contains(node)

Node.contains(string)

W3S HTML DOM > HTML Element > contains
contains為node的一種方法。

  • node 是否包含otherNode節點
  • otherNode 是否為node的後代節點
    回傳布林值,表示傳入的節點 是否為該節點的後代節點
    如果 otherNodenode後代節點或node 節點本身,回傳true,否則 false

選取多個class name的node

<span class="fa fa-thumbs-up"></span>
const plusIcon = target.classList.contains('fa', 'fa-thumbs-up')


DOM TokenList.contains(token)

DOMTokenList.contains()
eferences > Web APIs> DOMTokenList > DOMTokenList.contains()

The contains() 為 DOMTokenList介面的一種方法,
回傳布林值 — 若傳入的參數包含在列表中,回傳true,否則 false

參數 token
DOMString類型,判斷是否存在於列表中的標記。
MDN example-DOM TokenList.contains(token)
使用 Element.classList的方式,檢索span元素上設定的class name清單,作為DOMTokenList。
測試在清單中若有"c",以Node.textContent 的方式寫入節點
MDN example-DOM TokenList.contains(token)


Element.matches(CSS selectorString)

Element.matches(CSS selectorString)
Element 屬性: matches()

  • let result = element.matches(selectorString);
  • result 的值为 true 或 false.
  • selectorString 是個 CSS選擇器字符串。
  • compare-matches()

#DOM TokenList.contains(token) #Element.matches(CSS selectorString) #select-class names #classList







Related Posts

為 localStroage 加上過期時間

為 localStroage 加上過期時間

 元件進階# refs

元件進階# refs

Fetch 與 Promise (五):async 與 await

Fetch 與 Promise (五):async 與 await


Comments