データセット（変数）を使ってDOM要素を指定してみる

ID＝box0のデータセットの内容をID＝box1のテキストコンテンツに書き替えるコードです。
特に何のひねりもなく実装すると以下のような結果になります。

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <script>
6
7            document.addEventListener('DOMContentLoaded', function(){
8                var hensu = document.querySelector('#box0');
9                box1.textContent=hensu.dataset.mozi;
10            });
11
12        </script>
13    </head>
14    <body>
15
16        <div id="box0" data-mozi="box1にこの文字を表示"></div>
17        <div id="box1">テキストが変わる</div>
18
19    </body>
20</html>

上記はbox1.textContent=hensu.dataset.mozi;で「box1」というIDを指定していますが、このIDもデータセット（変数）を使って指定や書き替えができないか？と思いやってみました。

box0にdata-idname="box1"を追加します。
これを変数hensu2に格納してID要素を指定してみようと思います。

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <script>
6
7            document.addEventListener('DOMContentLoaded', function(){
8                var hensu = document.querySelector('#box0');
9                var hensu2 = hensu.dataset.idname;
10                hensu2.textContent=hensu.dataset.mozi;
11            });
12            
13        </script>
14    </head>
15    <body>
16
17        <div id="box0" data-idname="box1" data-mozi="box1にこの文字を表示"></div>
18        <div id="box1">テキストが変わる</div>
19
20    </body>
21</html>

無理でした。
これhensu2.textContent=hensu.dataset.mozi;
おそらくプログラム上ではDOM上のID＝hensu2を探し回っている状態で、ローカル変数としては機能していないんだと思います。
ローカル変数の中身をグローバル変数として認識させる方法があれば可能でしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

js
1            document.addEventListener('DOMContentLoaded', function(){
2                var hensu = document.querySelector('#box0');
3                
4                var hensu2 = hensu.dataset.idname;
5                console.log("hensu2：", hensu2, typeof hensu2);
6                console.log("hensu2.textContent before：", hensu2.textContent, typeof hensu2.textContent);
7                
8                hensu2.textContent=hensu.dataset.mozi;
9                console.log("hensu2.textContent  after：", hensu2.textContent, typeof hensu2.textContent);
10            });

こんな感じに書き換え（console.logのみ追加）して実行してみるとわかりますが
つまるところhensu2の中身はstring型のプリミティブ値です。

極端な話、これと同じです

js
1            document.addEventListener('DOMContentLoaded', function(){
2                var hensu = document.querySelector('#box0');
3                
4                var hensu2 = "box1";
5                console.log("hensu2：", hensu2, typeof hensu2);
6                console.log("hensu2.textContent before：", hensu2.textContent, typeof hensu2.textContent);
7                
8                hensu2.textContent=hensu.dataset.mozi;
9                console.log("hensu2.textContent  after：", hensu2.textContent, typeof hensu2.textContent);
10            });

もうちょっと細かく説明すると、
hensu2はメモリ上に確保されたbox1という4文字を保持しているだけのstringプリミティブであり
hensu2.textContentへの代入とは（プリミティブのプロパティの書き換えは不可能なので）
一時的に作成されたプリミティブのラッパーオブジェクトのプロパティtextContentへの代入で、
元のhensu2というプリミティブ値には何の影響もありません。

もちろんメモリ上の変数への操作しかない（しかも実質副作用も起こっていない）し
たまたまエラーも発生しないので、画面上には何の影響もなかったように見える状態です。

ローカル変数の中身をグローバル変数として認識させる

やりたいこととしてはこうでしょうか。

window[hensu2].textContent = hensu.dataset.mozi;

ID付きの要素を宣言してない暗黙のグローバル変数として直接操作できること自体が正直あまりよくない文化だと思ってるので
個人的にはこっちを推奨したいです

document.getElementById(hensu2).textContent = hensu.dataset.mozi;

投稿2024/12/15 08:53

pecmm

総合スコア760

_L9u7c4i0a

2024/12/15 09:17

ありがとうございます。実装できました。 window[ローカル変数]またはgetElementById(ローカル変数)でグローバル変数として使用できるのは知りませんでした。

pecmm

2024/12/15 10:38

補足です >window[ローカル変数] こちらは確かにグローバル変数に対する操作ですが（※ブラウザ上でのjs実行時の標準的な挙動） >getElementById(ローカル変数) こちらはグローバル変数ではないです。 `document.getElementById(id名)` で取得した値に対して直接プロパティ変更操作をしているだけで、ローカル変数としてもグローバル変数としても扱っていません。例えば以下のように書き換えると、ローカル変数elemとして扱っていることになります。 ``` let elem = document.getElementById(hensu2); elem.textContent = hensu.dataset.mozi; ``` 質問本文を改めて読んでみて思いましたがなにかローカル変数やグローバル変数について覚え違いをしているような気がします。

行動規範の内容に同意します