[JavaScript] コロン(:)の入った属性で要素セレクタを行う方法

概要

下記のようなgoods:id属性を元に要素をセレクタで拾いたい。

<div goods:id="12345"></div>

方法

条件としては、属性セレクタが容易なquerySelector()またはquerySelectorAll()を使用する。

単純にdocument.querySelectorAll("[goods:id]")といった指定ではis not a valid selectorというエラーが発生してしまう。

これを回避するには下記のようにコロンの前にエスケープ(二重バックスラッシュ)が必要になる。

document.querySelectorAll("[goods\\:id]")

関連記事

Babel 6からBabel 7へアップグレードした際の覚書
[JavaScript] 不正なセレクタをエスケープする際の対処法
[JavaScript] 日付のフォーマットをyyyy/mm/ddにする方法
[JavaScript] 要素を上から落ちるように表示させる方法
[JavaScript] 平仮名しか入力できないInputを実装する方法
[JavaScript] 全角英数字記号を半角に変換する方法