8
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CSSのid/class名のルールとそれにまつわるgetElementByIdとquerySelectorの動きの違い

Last updated at Posted at 2013-06-05

idとclassの名前の先頭に数字は使えない

CSSのid/classの名前を数字から始めた場合そのid/classに対して記述したスタイルは適用されません

<DOCTYPE html>
<html>
<head>
	<style>
	#0id{
		color : red;
	}
	.0class{
		color : blue;
	}
	<style>
</head>
<body>
	<div id="0id">0id</div>
	<div class="0class">0class</div>
</body>
</html>

どちらの要素もスタイルは適用されません

識別子としては有効

スタイルは適用されませんが、JavaScriptから要素を取得する際の識別子としては先頭が数字でも動作します

<script>
	console.log( document.getElementById( '0id' ) );
	console.log( document.getElementsByClassName( '0class' ) );
</script>

結果

> <p id="0id">0id</p>			// getElementByIdの結果
> [p.0class, item: function]	// getElementsByClassNameの結果

要素が取得できてます

querySelectorだと…

<script>
	console.log( document.querySelector( '#0id' ) );
	console.log( document.querySelector( '.0class' ) );
</script>

結果

> Error: SyntaxError: DOM Exception 12
> Error: SyntaxError: DOM Exception 12

どちらもSyntaxErrorとなります。

querySelectorの場合、先頭が数字のセレクタを渡すとエラーが出るようです。

おわりに

「querySelector使えねーな!」ってことじゃなくて、id/class名の先頭に数字を使わないようにしようねという話です(当たり前なんですが)

なんでこんなことを書いたかというと、とあるノベルゲームのライブラリがid/classに先頭が数字の名前を振りまくってたからです。
JSで拡張機能的なのを書こうとしたらquerySelectorが使えなくてめんどくさかったです。

命名は計画的に。

8
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?