chrome開発者ツールのコンソールでDOM操作を行う

著者:杉浦

chrome開発者ツールのコンソールでDOM操作を行う

 これはjavascriptを用いた開発で特に役に立つと思います。”javascriptのソースコードでやりたいDOM操作のコーディングを行う→目的のページをリロード→チェック→コーディング再開”なんてことがめんどくさい時に使えます。 GoogleChromeなどの多くのブラウザにはショートカットキーF12で開ける開発者ツールが備わっています。この開発者ツールのコンソールからjQuery付javascriptとほぼ同じ言語でDOMの操作ができます。
 要素を対象にとる

$(selecter),$$(selecter)

 document.querySelector(),document.queryAllSelector()と同じです。jQueryのセレクタと同じ記法です。どちらも対象が一つのみでも配列扱いをするので操作に注意がいります。要素の展開から属性なりイベントなりの色々が読み取れます。

*.children,*.firstChild,*.parentNode,...

 ちゃんと説明書を読んだわけでないので断言できませんがjavascriptに入っている要素参照操作が備わっているようです。

*.innerHTML,*.outerHTML

 連鎖して何かを呼び出せませんが一括操作に有用です。
DOMを操作する

*.append(),*.removeChild(),insertBefore(),…

 ちゃんと説明書を読んだわけでないので断言できませんがjavascriptに入っているDOM操作が備わっているようです。
便利

* = *,if,while,for

 変数を持つことも分岐、繰り返しを行うこともできます。ほぼ対話的なjavascriptです。

clear()

 画面をきれいにします。

コンソール上のDOMの階層要素を右クリック→Expand recursivelyを実行

 DOMの要素を再帰的に展開、要は全部展開します。コンソール上の参照されたDOM要素はElementPanelのDOM要素に近い機能を備えています。

コンソール上の適当な隙間で右クリック→Save as...

 コンソール上の操作のログを保存します。直接Command Historyを開く命令がみあたらないのでこれで代用です。正直手間な感じはします。

  • この記事いいね! (0)

著者について

杉浦 administrator