JavaScriptの学習・参考リファレンス/ドキュメント

JavaScript、ECMAScriptの学習と参考メモ 入門~初心者~中級者~上級者を目指して

Documentとは

documentとはWebページ全体を表すインターフェイスです。

プロパティ

各文書情報へのアクセス

console.log(document.body);// => body要素
console.log(document.documentElement);// => html要素
console.log(document.domain);// => example.com
console.log(document.embeds);// => object要素のリスト
console.log(document.fonts);// => FontFaceSet
console.log(document.forms);// => form要素のリスト
console.log(document.head);// => head要素
console.log(document.images);// => img要素のリスト
console.log(document.lastModified);// => 最終更新日
console.log(document.links);// => hrefを持つ要素のリスト
console.log(document.readyState);// => 
console.log(document.referrer);// => リンク元ページのURL
console.log(document.scripts);// => script要素のリスト
console.log(document.title);// => タイトル
console.log(document.URL);// => 現在のページのURL

文書の読み込み状況 document.readyState

document.addEventListener('readystatechange',function(){
  console.log(document.readyState);
  switch (document.readyState) {
    case "loading":
      // 文書の読み込み中
      break;
    case "interactive":
      // 文書読み込み完了、DOMアクセス可能、画像やスタイルシートの読み込み中
      break;
    case "complete":
      // 文書読み込み完了、リソース読み込み完了
      break;
  }
});

テキストの表示方向 document.dir

document.dir = 'rtl'; // 右から左にテキストを表示 (right to left)
document.dir = 'ltr'; // 左から右にテキストを表示 (left to right)

表示中ページのURL document.location

document.location.href = 'https://example.com/path/sample?query=value#hashsample'; // hrefの指定でページ遷移
console.log(document.location.href);      // https://example.com/path/sample?query=value#hashsample
console.log(document.location.protocol);  // https:
console.log(document.location.host);      // example.com
console.log(document.location.hostname);  // example.com
console.log(document.location.port);      // 
console.log(document.location.pathname);  // /path/sample
console.log(document.location.search);    // ?query=value
console.log(document.location.hash);      // #hashsample
console.log(document.location.origin);    // https://example.com

クッキー document.cookie

"キー名=値"でクッキーの設定を行う。 pathでクッキーを有効とするパス、domainでドメイン、secureでhttps通信時のみ送信、max-ageで寿命(秒)を指定できる。 寿命ではなく、expiresで有効期限を指定することも可能。

//クッキーの設定
document.cookie = "key1=value1";
document.cookie = "key2=value2; path=/; domain=exmaple.com;max-age=60;";
document.cookie = `key3=value3; secure; expires=${new Date('2100/01/01').toGMTString()};`;
console.log(document.cookie);
// => "key1=value1; key3=value3;"

//クッキーの削除
document.cookie = "key1=; max-age=0;";
document.cookie = `key3=; expires=${new Date(0).toUTCString()};`;
console.log(document.cookie);
// => ""

メソッド

要素の作成

const df = document.createDocumentFragment();
const element = document.createElement('div');
const text = document.createTextNode('テスト');
const comment = document.createComment('コメント');

element.appendChild(text);
df.appendChild(element);
df.appendChild(comment);

console.log(df);
/* =>
#document-fragment
<div>テスト</div>
<!--コメント-->
*/

セレクタ

<div id="box">
  <div class="classNameA">テスト1</div>
  <div class="classNameB">テスト2</div>
  <p class="classNameA classNameB">テスト3</p>
  <p class="classNameB">テスト4</p>
  <input type="text" name="firstNmae" id="idsample1" />
  <input type="text" name="lastName" id="idsample2" />
</div>
console.log(document.getElementById('idsample1'));
// => <input type="text" name="firstNmae" id="idsample1" />
console.log(document.getElementsByClassName('classNameA'));
// =>  HTMLCollection(2) [div.classNameA, p.classNameA.classNameB]
console.log(document.getElementsByName('firstNmae'));
// => NodeList [input#idsample1]
console.log(document.getElementsByTagName('input'));
// => HTMLCollection(2) [input#idsample1, input#idsample2]
console.log(document.querySelector('#idsample2'));
// => <input type="text" name="lastName" id="idsample2" />
console.log(document.querySelectorAll('.classNameB'));
// => NodeList(3) [div.classNameB, p.classNameA.classNameB, p.classNameB]
作成日 : 2021年01月11日