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]