###質問したいこと
次の2つの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// コンソール画面で1行ずつエンターで実行する 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 ビット)
回答2件
あなたの回答
tips
プレビュー