DEV Community: portaloo

Documentとは

portaloo — Mon, 11 Jan 2021 16:20:20 +0000

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

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

セレクタ

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

Elementとは

portaloo — Sun, 10 Jan 2021 14:55:57 +0000

EventTargetはイベントのターゲットとなるオブジェクトです。
イベントリスナーの登録や削除を行えます。

EventTargetのメソッド

addEventListener - イベントリスナの登録

addEventListenerの第1引数にイベントの名称、
第2引数にイベント発生時に実行する関数を指定する事でイベントの登録が行なえます。

例えば、クリックのイベントは以下のように登録できます。
buttonAをクリックするとdiv要素のクリックイベントも呼び出されます。

<div id="outer">
  <div id="inner">
    <button id="buttonA">A</button>
  </div>
</div>

document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(){console.log('inner');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA buttonA2 inner outer

第3引数としてbooleanを指定可能で、上記はfalseを指定した以下と同様です。

document.getElementById('outer').addEventListener('click',function(){console.log('outer');},false);
document.getElementById('inner').addEventListener('click',function(){console.log('inner');},false);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');},false);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');},false);
//buttonAをクリックする => buttonA buttonA2 inner outer

第3引数としてtrueを指定すると、実行の順序が逆になります。

document.getElementById('outer').addEventListener('click',function(){console.log('outer');},true);
document.getElementById('inner').addEventListener('click',function(){console.log('inner');},true);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');},true);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');},true);
//buttonAをクリックする => outer inner buttonA buttonA2

イベントリスナーが登録されていると、イベント発生元となった要素を含む親の要素でもそのイベントが実行されます。
そのイベントの実行順序が3つ目の引数で制御できるようになっています。

イベントの伝播はwindowオブジェクトからイベント発生元まで下位へ辿っていくキャプチャーフェーズと、
イベント発生元から上位要素へと辿っていくバブリングフェーズがあります。
つまり、「ouuter -> inner -> buttonA -> inner -> outer」の順序でイベントが伝播し、
前半がキャプチャーフェーズ、後半がバブリングフェーズとなっています。
引数をtrueとするとキャプチャーフェーズでイベントが実行されるため順序が逆となったというわけです。

もちろん混在も可能で、次のようにすると「outer -> buttonA -> inner」と実行がされます。

document.getElementById('outer').addEventListener('click',function(){console.log('outer');},true);
document.getElementById('inner').addEventListener('click',function(){console.log('inner');},false);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => outer buttonA buttonA2 inner

イベントの伝播はstopPropagation()で止める事ができます。

document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(e){console.log('inner');e.stopPropagation();});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA buttonA2 inner

ただし、stopPropagation()だと同じ要素に登録したリスナーの実行は止められません。

document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(){console.log('inner');});
document.getElementById('buttonA').addEventListener('click',function(e){console.log('buttonA');e.stopPropagation();});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA buttonA2

同じ要素のリスナーも含め、イベントの実行を止めるには、stopImmediatePropagation()を使います。

document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(){console.log('inner');});
document.getElementById('buttonA').addEventListener('click',function(e){console.log('buttonA');e.stopPropagation();});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA

既定の動作、例えばチェックボックスクリック時のチェックを止めたい場合はpreventDefault()で処理を停止できます。

<label><input id="check" type="checkbox" />Check</label>

document.getElementById('check').addEventListener('click',function(e){e.preventDefault();});

addEventListenerの第3引数には、より複雑なオブジェクトをオプションとして指定する事もできます。

document.getElementById('outer').addEventListener('click',function(e){console.log('outer');e.preventDefault();},{
  capture : true , once : true,　passive :false,
});
document.getElementById('inner').addEventListener('click',function(e){console.log('inner');e.preventDefault();},{
  capture : true , once : true,  passive :true,
});
document.getElementById('buttonA').addEventListener('click',function(e){console.log('buttonA');e.preventDefault();},{
  capture : true , once : false, passive :false,
});
//buttonAをクリックする(1回目) => outer inner (警告) buttonA
//buttonAをクリックする(2回目) => buttonA

「capture」は第3引数にbooleanを指定したときと同じものです。trueの場合にバブリングフェーズでのイベント実行が行われます。
「once」はtrueの場合、イベントの実行を1回行うとリスナは削除されます。
「passive」はtrueの場合、preventDefault()がリスナで呼ばれるとコンソールに警告が出力されます。

removeEventListener - イベントリスナの削除

removeEventListenerを使うと、指定したイベントからリスナを削除できます。

<div id="outer">
  <div id="inner">
    <button id="buttonA">A</button>
  </div>
</div>

const clickListener1 = function(){console.log('buttonA1');};
const clickListener2 = function(){console.log('buttonA2');};
document.getElementById('buttonA').addEventListener('click',clickListener1);
document.getElementById('buttonA').addEventListener('click',clickListener2);
document.getElementById('buttonA').removeEventListener('click',clickListener1);
//buttonAをクリックする => buttonA2

第2引数を指定すると、キャプチャーフェーズで実行されるリスナであるかが一致する場合にだけ削除が行われます。

const clickListener1 = function(){console.log('buttonA1');};
const clickListener2 = function(){console.log('buttonA2');};
document.getElementById('buttonA').addEventListener('click',clickListener1,false);
document.getElementById('buttonA').addEventListener('click',clickListener2,true);
document.getElementById('buttonA').removeEventListener('click',clickListener1,false);
document.getElementById('buttonA').removeEventListener('click',clickListener2,false);
//buttonAをクリックする => buttonA2

EventTargetとは

portaloo — Tue, 05 Jan 2021 17:29:53 +0000