Documentとは
Tags: javascript
Published: 2021-01-11 16:20:20

---
title: Documentとは
description: DocumentとはWebページ全体を表すインターフェイスです。
canonical_url: https://javascript-reference.org/dom/document/
---

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

## プロパティ

### 各文書情報へのアクセス

```javascript
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

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

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

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

### 表示中ページのURL document.location

```javascript
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で有効期限を指定することも可能。

```javascript document.cookie
//クッキーの設定
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);
// => ""
```

## メソッド

### 要素の作成

```javascript
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>
<!--コメント-->
*/
```

### セレクタ

```html
<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>
```

```javascript
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]
```