Posted on

The Window & Document Object In JavaScript – 7 Useful Things You Can Do With Them

, Author

Vanilla JavaScript

4月16日。 2020 – 6 min read

Vanilla JavaScript

Vanilla JavaScript

Source: Unsplash

JavaScriptでアクセスできる親オブジェクトには、documentとwindowオブジェクトがあります。 documentオブジェクト自体は、windowオブジェクトの下位に位置します。 特に vanilla javascript で Web アプリケーションを開発するときには、この 2 つはどこにでもあるものなので、誰もが知っていると思います。

この記事の目的は、両方の実用的な機能のいくつかを紹介することです。 これらの 2 つが厳密に何であるかについての詳細な紹介は必要ないので、あまり予備知識なしで使用できる実用的な例をいくつか紹介します。 コンテキスト メニューは、ユーザーが Web ページを右クリックしたときにデフォルトで表示されるメニューにすぎませんが、Web ページがイベントを異なる方法で処理する場合は別です。 そのため、名前は知られていなくても、小さなメニューはオペレーティング システムによって異なって見え、「名前を付けて画像を保存」、「調べる」、「再読み込み」&、「戻る」などが提供されます。
基本的には、ユーザーが右クリックしたときに独自のアクションを実行するために、DOM の contextmenu イベントを使用できます。

Right-click and block display of the default context menu

<div id="nocontext">No context menu available for this</div><script>
noContext = document.getElementById('nocontext')noContext.addEventListener('contextmenu', (event) => {
event.preventDefault()
})
</script>

そこで、<div> の EventListener を設定し、コンテキスト メニューが呼ばれたとき（つまり右クリック時）実行する必要があります。 これはイベントを返し、標準の関数 preventDefault でブロックできます。

デフォルトのケースは、コンテキスト メニューを右クリックするようなものです。 しかし、preventDefault を使用すると、これをブロックできます。 もちろん、標準イベントをブロックするだけでなく、ユーザーが右クリックしたときにあらゆる種類のコードを実行することができます。 たとえば、

contextAvailable.addEventListener('contextmenu', (e) => {
console.log('you rightclicked this')
e.preventDefault()
})

The design mode of your document

この記事の調査をするまで、これはまったく知りませんでしたが、実はこの機能は非常に実用的なものなのです。 たとえば、コンテンツ管理システムに使用したり、コードなしですばやく編集したり、Web サイトのコンテンツの変更候補を視覚化したりできます。
DesignMode が可能にするのは、devtools の HTML コードを変更することなく、ブラウザで見ているウェブサイトのすべてのコンテンツを編集できることです。 任意の Web サイトに行き、コンソールを開いて、次のように入力するだけです:

document.designMode = "on"

これで、表示された Web サイトを Word 文書のように編集するだけでよくなりました。 かなりクールでしょう？
designMode は 2 つの状態を知っているだけです。 On と Off です。 したがって、これを無効にするには、次のようにします:

document.designMode = "off"

コンテンツを変更しないように個々の要素を保護したい場合、次の属性を与えることができます。 (そうすれば、それらを完全に削除することだけはできますが、操作することはできません)

<i contenteditable = "false">This is not editable.</i>

Copy something to the users clipboard with code

元々、よく知られた document.execCommand() はこの目的のために用意されていましたが、これは現在非推奨と見なされています。
その代わりに、JavaScript を使用してコンテンツを自動的にコピーするための Clipboard API が利用できるようになりました。
これは、window オブジェクトに従属する navigator オブジェクトを介して使用することができます。

ボタンを押した後、入力フィールドに入力されたテキストをクリップボードにコピーする例を見てみましょう。

Get the status of the document

特により複雑でパフォーマンスを向上させた Web アプリの開発では、ドキュメントのロード時間 & 一般動作に関する調査を実施して、弱点を見つけたりパフォーマンスと UX を改善することが必要です。

そのため、document.readyState を使用すると、ドキュメントの現在の状態にアクセスし、その結果に基づいてさらなる決定を行うことができます。readyState は次の結果を返すことができます:

  • uninitialized – まだ読み込みを開始していない
  • loading – 読み込み中
  • loaded – 読み込み済み
  • interactive – 十分読み込み、ユーザーが対話できる
  • complete – 完全に読み込み済み
    Source.Document.Director::Document.ReadyState(ドキュメント.レディステイト) https://www.w3schools.com/jsref/prop_doc_readystate.asp

実際に少し遊んでみると、興味深い結果があります。 このために、私は小さなHTMLボイラープレートを作成し、それを使ってさまざまな場所でステータスを出力しています。 各外部スクリプトは、単に console.log(document.readyState)

を含み、以下は、時系列順に、ウェブサイトがログに記録する内容です。 loading

  • defer: interactive
  • async: interactive
  • onload body: complete

    • 外部スクリプトを含める異なる方法は、ここでは期待どおりに動作しています。 しかし、ページに大きな画像を 1 つだけ含める場合、画像の読み込み時間が body タグの onload イベントを遅らせることは興味深いことです。

    したがって、onload イベントでステータスを出力すると、いずれの場合も「完了」です。

    focus / active 要素を扱う

    ボタン、入力、テキストエリアなどの、ウェブサイトのユーザーが実際に対話できる要素に関しては、これらはいわゆる焦点を持つことができます。 入力にフォーカスがあり、キーボードに何かを入力すると、入力フィールドに書き込まれます。 入力フィールドにフォーカスがない場合は、入力フィールドに書き込まれません。

    どの要素にフォーカスがあるか決定する

    多分、onfocus属性はすでにご存知でしょう。 そして、それを使ってクールな CSS アニメーションを作成したり、ユーザーの行動を分析したい場合は、このイベントを保存します。

    同じ方法で、すべての要素に onfocus 属性を与えることなく、どの要素がフォーカスされているかを判断することができます。
    これを次のように行います。

    var x = document.activeElement.idconsole.log(x)

    つまり、フォーカスがある/アクティブである要素の ID を取得できます。

    手動でフォーカスを変更する

    特に UX に関して、ユーザーが要素を選択するのを手助けすることは時に有用となりえます。 たとえば、ユーザーが 1 つのフォームで誤った入力を行った場合に、すべての入力フィールドで入力を変更させる場合です。

    document.getElementById('input1').focus()

    Reading the current styling of an element

    In large and dynamic web apps we constantly change the active styling of any element in the DOM.
    Web はいつでも 2 に出力できるので、どの CSS 属性や値が要素を持っているかをチェックします。

    1. element.style はスタイルの読み込みにも使用できますが、編集用です。
    2. Window.getComputedStyle() は現在のスタイルを取得するために作られました。

    したがって、最後の関数で要素のすべてのスタイルでオブジェクト全体を取得することができます。

    let box = document.getElementById('box')console.log(window.getComputedStyle(box)) // CSSStyleDeclaration{}

    しかし、個々の属性とそれに対応する値をより正確に出力することもできます： 

    let box = document.getElementById('box')console.log(
    window.getComputedStyle(box)
    .getPropertyValue('background-color') // E.g. rgb(0, 128, 0)
    )

    Working with the size of the browser & the website displayed

    もちろん、現代の Web 開発においてサイズを回避することは不可能です。

    • window.outerWidth
    • window.outerHeight

    この 2 つはブラウザ ウィンドウ自体の寸法を返すので、たとえば開発ツールによって Web ページのサイズが縮小されても問題にはなりません。

    Web サイトが現在どの寸法で表示されているかを本当に判断する場合、次の関数が利用できます:

    • window.innerWidth
    • window.innerHeight

    たとえば、要素をフルスクリーン化するには、このようにします：

    elem.style.width = window.innerWidth + 'px'

    A note from JavaScript In Plain English

    新しい 3 つの出版を始めました！

    [英語] 

    elem.style.width = window.innerWidth + 'px'

    JavaScript In Plain English

    また、私たちは常に、質の高いコンテンツの普及を支援することに関心を持っています。 もし、あなたが私たちの出版物に投稿したい記事をお持ちでしたら、あなたのMediumユーザー名を添えて [email protected] までメールをいただければ、あなたをライターとして追加させていただきます。 また、どの媒体への掲載を希望しているかもお知らせください。

    コメントを残す

    メールアドレスが公開されることはありません。