document.getElementByIdで取得したID以外のIDを全て取得したい

Question

<textarea id="1"></textarea>
<textarea id="2"></textarea>
<textarea id="3"></textarea>
<textarea id="4"></textarea>
<textarea id="5"></textarea>

このようにtextareaが５つ並んでいてjavascriptで

document.getElementById('1').style.color = '#00bfff';
document.getElementById('2').style.color = '#ffffff';
document.getElementById('3').style.color = '#ffffff';
document.getElementById('4').style.color = '#ffffff';
document.getElementById('5').style.color = '#ffffff';

とIDが1のtextareaだけ字の色を青に変え、他のtextareaの字の色は白色にするとします。
この時IDが1以外のtextareaを一気に取得できる方法はありますか？
（document.getElementById('IDが1以外のtextarea').style.color = '#ffffff';
みたいな感じで）
よろしくお願いします。

Answer 1

この時IDが1以外のtextareaを一気に取得できる方法はありますか？

セレクタに:notというのがありますので、document.querySelectorAll('textarea:not(#id)')のような方法で取得できます。

なお、idの先頭に数字を使うのは適当ではありません。

Comments

[takespring]

お答えいただきありがとうございます。参考にさせていただきます。
すみません。idに数字を使うのはよくないことは知っていたのですが、例でてきとうに簡単なidをつけてしまいました。

Answer 2

cssでデフォルトを白にするだけだと思いますが・・・

Comments

[yambejp]

どうしてもjsでというならこう
<script>
window.addEventListener('DOMContentLoaded', ()=>{
var node=document.querySelector('#x1');
node.style.color = '#00bfff';
[...document.querySelectorAll('[id]')].filter(y=>node!==y).forEach(x=>{
x.style.color = '#ffffff';
});
});
</script>

<textarea id="x1"></textarea>
<textarea id="x2"></textarea>
<textarea id="x3"></textarea>
<textarea id="x4"></textarea>
<textarea id="x5"></textarea>

[miyabi_pudding]

ご存知だったらすみません。
一応、id属性は一意である限り、数値のみが許可されておりますので、
接頭辞のxはなくてもいけるかと思います。

あ、でもquerySelectorでの取得だと数値のみダメかもしれません。（セレクタ取得なので）未検証です　汗

[maisumakun]

> あ、でもquerySelectorでの取得だと数値のみダメかもしれません。（セレクタ取得なので）未検証です　汗

ですね、数字だけのidは「HTMLの」文法は許可されていますが、「CSSセレクタ」としてはエスケープして使う必要があります。

[miyabi_pudding]

すみません、語弊ありました。

https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id

HTML5で制約が外されたものの、
互換性のために、やはり先頭数値はやめておこう、って感じでした。
失礼しました。

[miyabi_pudding]

> ですね、数字だけのidは「HTMLの」文法は許可されていますが、「CSSセレクタ」としてはエスケープして使う必要があります。

ありがとうございます！
勉強になりました。

[yambejp]

querySelectorの処理がめんどくさくて勝手にid変えちゃいました
これなら数値でいけますね
<script>
window.addEventListener('DOMContentLoaded', ()=>{
var node=document.querySelector('[id="1"]');
node.style.color = '#00bfff';
[...document.querySelectorAll('[id]')].filter(y=>node!==y).forEach(x=>{
x.style.color = '#ffffff';
});
});
</script>

<textarea id="1"></textarea>
<textarea id="2"></textarea>
<textarea id="3"></textarea>
<textarea id="4"></textarea>
<textarea id="5"></textarea>

[miyabi_pudding]

あ、そうか、属性セレクタならいけますね。
さすがです！

[takespring]

ご教示ありがとうございます。

Answer 3

全部白にしたあとに指定のものだけ青にすれば良いのでは。

Comments

[takespring]

ご教示ありがとうございます。