Q&A
問題が再現しませんでした。
ご提示いただいていない部分に原因があると思われます。
なんとなくですが、jsを外部ファイルにしているのが原因ではないかな、という気がしています。script要素でインラインに書けば動いたりしないですか？
###質問したいこと
次の２つのJavaScript実行環境を比べて、挙動にどのような違いがあるのか知りたいです。
環境①：「WEBサイト」をブラウザで開いた場合のコンソール画面
環境②：「PCのHTMLファイル」をブラウザで開いた場合のコンソール画面
以下ソースコードが②で作動しなかったために疑問を持ちました。
###ソースコード
以下のようなHTMLの置換（<dt>→<p>）が、②で実現できず、その理由を知りたいです。
（※HTML文法は本件と無関係なのでスルーしてください。）
・ChromeでエクスポートしたブックマークのHTMLファイルです（以下は簡易記述で、実際はエクスポートしたまま用います。）
html
1<!-- 最初の状態 --> 2<dl> 3 <dt><a></a></dt> 4 <dt><a></a></dt> 5</dl> 6 7<!-- 目的の状態 --> 8<dl> 9 <p><a></a></p> 10 <p><a></a></p> 11</dl>
・開発ツールに記述するJavaScriptです
js
1var dts = document.querySelectorAll('dt'); 2for(var i=0; i < dts.length; i++) { 3 var dt = dts[i]; 4 var p = document.createElement('p'); 5 p.innerHTML = dt.innerHTML; 6 dt.parentNode.replaceChild(p, dt); 7}
###質問の経緯
今回の質問の発端としては、上記の生JavaScriptの処理についてjQueryで取り組み、実現できなかったという以前の質問（jQueryで指定タグを置換）でした。
この以前の質問においてjQueryが実行できない原因が「jQueryが入っていないことだ」とのご指摘を受けまして、jQueryを入れる処理をコンソール画面で実行したところ、jQueryによる置換は実現できました。それが次の処理です。
jQuery
1// jQueryを入れる処理 2// コンソール画面で１行ずつエンターで実行する 3var jq = document.createElement('script'); 4jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"; 5document.getElementsByTagName('head')[0].appendChild(jq); 6jQuery.noConflict(); 7window.$ = jQuery; 8 9// jQueryによる置換 10$('dt').each(function() { 11 if ($(this).children('a').length === 1) { 12 const innerHtml = $(this).html(); 13 $(this).replaceWith($('<p>').html(innerHtml)); 14 } 15});
他方、今回の質問は生JavaScriptですのでjQueryの有無は関係なく、コンソール画面で普通に実行できるはずとの考えなのですが、なぜかできず、今回の質問に至りました。
「WEBサイト」と「PCのHTMLファイル」をブラウザで開いた場合の、JavaScriptの挙動にはどのよ違いがあるのでしょうか？
###環境②の詳細
ChromeでエクスポートしたブックマークのHTMLファイルを、ダブルクリックでChromeで開き、F12のコンソール画面で実行しています。
Chromeバージョンは以下です。
バージョン: 94.0.4606.81（Official Build） （64 ビット）
ありがとうございます。こちらではやはり再現したので、何か記載のない環境に原因がありそうですね。以下２点よろしいでしょうか？
（Ⅰ）「外部ファイルにしている」とは、「コンソールで実行する」という意味ですか？
（Ⅱ）そして「script要素でインラインに書く」とは、「HTMLファイルに以下のような<script>（6～14行目）を追記してブラウザで開く」ということですか？しかしこれでも置換はされませんでした。
```HTML
<!DOCTYPE NETSCAPE-Bookmark-file-1>
<!-- This is an automatically generated file.
It will be read and overwritten.
DO NOT EDIT! -->
<script>
var dts = document.querySelectorAll('dt');
for(var i=0; i < dts.length; i++) {
var dt = dts[i];
var p = document.createElement('p');
p.innerHTML = dt.innerHTML;
dt.parentNode.replaceChild(p, dt);
}
</script>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<TITLE>Bookmarks</TITLE>
<H1>Bookmarks</H1>
<DL><p>
<DT><H3 ADD_DATE="1626664542" LAST_MODIFIED="1634895003" PERSONAL_TOOLBAR_FOLDER="true">ブックマーク バー</H3>
<DL><p>
<DT><A HREF="https://example.com/" ADD_DATE="1543466789">Gmail</A>
<DT><A HREF="https://example.com/" ADD_DATE="1543466789">翻訳</A>
<DT><H3 ADD_DATE="1633518233" LAST_MODIFIED="1633599613">画像ツール</H3>
<DL><p>
<DT><A HREF="https://example.com/" ADD_DATE="1543466789">画像縮小</A>
<DT><A HREF="https://example.com/" ADD_DATE="1543466789">画像加工</A>
</DL><p>
<DT><H3 ADD_DATE="1626664560" LAST_MODIFIED="1632571239">プログラミング</H3>
<DL><p>
<DT><H3 ADD_DATE="1626664560" LAST_MODIFIED="1626664560">サンプルコード</H3>
<DL><p>
<DT><A HREF="https://example.com/" ADD_DATE="1543466789">便利なJavaSCript関数</A>
<DT><A HREF="https://example.com/" ADD_DATE="1543466789">カラーピッカー</A>
</DL><p>
</DL><p>
</DL><p>
</DL><p>
```
そのスクリプトは body の末尾に置かないと動かないと思います。
というか、body 要素がないんですね。相当特殊なことしてますね……
bodyですか…しかし「ChromeでエクスポートしたブックマークのHTMLファイル」は誰がやってもこの構造になると思ったのですが、ならないケースもあるのでしょうか。
エクスポートする手順は試していませんでしたね。
いずれにせよ、script要素は後置しないと動かないかと思います。
エクスポートファイルだと再現すると思いますので、その環境でまた何かわかりましたら宜しくお願い致します。ちなみにscript要素は後置でも実現できませんでした。
あー、「F12のコンソール画面で実行しています」というのは、ソースコードに記述するのではなくて、開発者ツールのコンソールで実行しているということなのですね。
試してみましたが、問題が再現しませんでした。
そうです。なんといえばよかったのか…正確な表現を知らずに申し訳ございませんでした。
再現しませんか！？エクスポートファイルの構造は同じでしたか？
エクスポートしたファイルでも再現しませんでした。
ちなみに、 crazyBaseballさんの環境では①では成功しているのですよね。
localhost を立てているということでいいですか？
エクスポートからコンソールでの実行動画です。
お時間ございましたらご査収ください。
https://imgur.com/a/個人情報が載ってしまっていたため動画は削除致します
ああ、なるほど、そういうことか。
問題を把握しました。
回答2件
0
ベストアンサー
環境①と環境②の差異の問題ではありません。（環境①で成功したというのが謎ですが）
dt.innerHTMLはその内部のHTML全てを含みます、入れ子になっているdtを含め。
ですので、ひとつめのdtを差し替えた時点で、他のdtはなくなってしまっているので、差し替えがされないということです。
問題がなかなか把握できなかったのは、例示されているHTML
html
1<!-- 最初の状態 --> 2<dl> 3 <dt><a></a></dt> 4 <dt><a></a></dt> 5</dl> 6 7<!-- 目的の状態 --> 8<dl> 9 <p><a></a></p> 10 <p><a></a></p> 11</dl>
には入れ子がなかったため、現象が再現しなかったからです。
投稿2021/10/23 04:00
編集2021/10/23 04:01総合スコア36163
大変申し訳ございません。そもそも私が記載したJavaScriptが原因だったのですね。
尚、環境①は「いつもはWEBサイト開いてうまくいってる」という程度の認識でしかなく、もう…ほんとうにすみませんでした。
ご解決されて何よりです。
0
削除リクエストが通りませんでした。
この回答は質問を完全に理解せず投稿したもので質問の解決には全く関係ありません。誤っている旨追記しておけということなので内容は書き換えずそのままになります。
<script> タグはどこにどう記述してますか？
<head> 〜 </head> に記述している場合、defer がなければ付けてみて下さい。
html
1<script defer src="script.js"></script>
これで解決するのであれば、オンラインではたまたま js が DOM 構築完了後にロード・実行され、ローカルでは js のほうが早かったのかもしれません。
投稿2021/10/22 23:07
編集2021/10/26 19:05
退会済みユーザー
総合スコア0
ご回答ありがとうございます。
（A）問題となっているのは環境①でなく環境②ですが、その点は共有できていますか？
（B）コンソールでの実行において<script> タグの記述は必要なのですか？
（C）環境は以下なので<head>タグはございません。
>ChromeでエクスポートしたブックマークのHTMLファイルを、ダブルクリックでChromeで開き、F12のコンソール画面で実行しています。
Live Expressionなのは見落としていました。
それで試してみましたが、ローカルの Live Expressionで実行させてみたのですが、p タグへの置き換えが機能しますね。スーパーリロードで dt の状態にもどりますが、コンソールを表示すると式が実行されて置き換えが走っているようです。
勘違いの回答なので、一応削除リクエストを出しておきますね。
ちなみにローカルの Live Expression で問題が再現しなかったため Chrome のバージョンを合わせようとアップデートしたら `95.0.4638.54` に追い越してしまいました。上記のコメントもこの環境下のものです。
Live Expression と言うのですね。用語を知らず誤解を招いてしまい申し訳ございません。
機能しましたか！？貴重な情報ありがとうございます。私は機能しませんので何か環境の違いがあるのですね。引き続き色々試してみます。
あなたの回答
tips
プレビュー
