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

概要

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

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

方法

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

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

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

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