문서라고

document이란웹페지전体を表스인타페이스입니다.

찬성

各文書情報への악세스

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)

表示中ペーji의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

"キー名=値" decuckki-の設定を行う.
경로그리고 쿡키 を有効 とする 파스, 도메인 드메인 , 보안 이며 https 通信時 의 み 送 信 , max-age 로 寿 命 (秒) を指定 で き .
寿命可能.

``javascript document.cookie
//クッキーの設定
document.cookie = "key1=value1";
document.cookie = "key2=value2; path=/; domain=exmaple.com;max-age=60;";
document.cookie = 키3=값3; 안전한; 만료=${new Date('2100/01/01').toGMTString()};`;
console.log(문서.쿠키);
//=> "키1=값1; 키3=값3;"

//쿱키의 削除
document.cookie = "키1=; 최대 연령=0;";
문서.쿠키 = key3=; expires=${new Date(0).toUTCString()}; ;
console.log(문서.쿠키);
//=> ""

## メソッド

### 要素の作成



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

세레크타

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