portalooの投稿 - Crieit

Documentとは

2021-01-12T01:21:53+09:00

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

"キー名=値"でクッキーの設定を行う。
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
テスト

*/

セレクタ


  テスト1
  テスト2
  テスト3
  テスト4

console.log(document.getElementById('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'));
// => 
console.log(document.querySelectorAll('.classNameB'));
// => NodeList(3) [div.classNameB, p.classNameA.classNameB, p.classNameB]

Elementとは

2021-01-10T23:54:13+09:00

Elementとは

Elementとは文書の要素を示すインターフェイスです。

プロパティ

兄弟要素


  A
  B
  C

console.log(document.getElementById('pb').previousElementSibling);
//=> A
console.log(document.getElementById('pb').nextElementSibling);
//=> C

各要素の値


  テスト

console.log(document.getElementById('box').innerHTML);
//=> " テスト "
console.log(document.getElementById('box').outerHTML);
//=> " テスト
 "
console.log(document.getElementById('box').id);
//=> "box"
console.log(document.getElementById('box').localName);
//=> "div"
console.log(document.getElementById('box').tagName);
//=> "DIV"
console.log(document.getElementById('box').tabStop);
//=> undefined

属性のリスト attributes

console.log(document.getElementById('box').attributes);
//=> NamedNodeMap {0: id, 1: name, 2: class, id: id, name: name, class: class, length: 3}

クラス

console.log(document.getElementById('box').classList);
//=> DOMTokenList(3) ["classA", "classB", "classC", value: "classA classB classC"]

console.log(document.getElementById('box').className);
//=> classA classB classC
undefined

要素の大きさと位置

console.log(document.getElementById('text').clientWidth); // 要素の内部の幅
console.log(document.getElementById('text').clientHeight); //要素の内部の高さ
console.log(document.getElementById('text').clientLeft); //要素左の位置
console.log(document.getElementById('text').clientTop); //要素上の位置

スクロール

console.log(document.getElementById('text').scrollHeight);  //スクロールビューの幅
console.log(document.getElementById('text').scrollWidth); //スクロールビューの高さ
console.log(document.getElementById('text').scrollLeft); //水平方向スクロール位置
console.log(document.getElementById('text').scrollTop); //垂直方向スクロール位置

メソッド

セレクタで祖先要素または地震を取得

console.log(document.getElementById('pc').closest('div.class1'));
// =>  
console.log(document.getElementById('pc').closest('div.class2'));
// => …

要素の取得


  テスト1
  テスト2
  テスト3

const div = document.getElementById('box');
console.log(div.getElementsByClassName('classA'));
//=> HTMLCollection(2) [p#p1.classA, p#p3.classA, p1: p#p1.classA, p3: p#p3.classA]
console.log(div.getElementsByTagName('p'));
//=> HTMLCollection(3) [p#p1.classA, p#p2.classB, p#p3.classA, p1: p#p1.classA, p2: p#p2.classB, p3: p#p3.classA]
console.log(div.querySelector('#p2'));
//=> テスト2
console.log(div.querySelectorAll('p.classA'));
//=> NodeList(2) [p#p1.classA, p#p3.classA]

属性の取得

const div = document.getElementById("box");
for(const name of div.getAttributeNames()) {
  const value = div.getAttribute(name);
  console.log(`${name}=${value}`);
}
//"id=box"
//"class=className"
//"style=border:solid 1px black"

属性の存在チェック

const div = document.getElementById("box");
console.log(div.hasAttribute('id'));　// true
console.log(div.hasAttribute('style')); // false
console.log(div.hasAttributes()); // true

属性の削除チェック

const div = document.getElementById("box");
div.removeAttribute('class');
div.setAttribute('id','newid');
console.log(div.outerHTML);// => "A"

属性の切り替え

const button = document.querySelector("button");
document.querySelector("button").addEventListener("click", function(){
  var input = document.querySelector("input");
  input.toggleAttribute("disabled");
});

要素、テキストの追加

const div = document.createElement("div");
const divnew1 = document.createElement("div");
divnew1.id = "n1";
divnew1.textContent ="テスト"
div.appendChild(divnew1);

const divnew2 = document.createElement("div");
divnew2.id = "n2";
divnew1.insertAdjacentElement('beforebegin',divnew2);

console.log(div.outerHTML);
// => 
テスト

const div = document.createElement("div");
const divnew1 = document.createElement("div");
divnew1.id = "n1";
divnew1.textContent ="テスト"
div.appendChild(divnew1);

divnew1.insertAdjacentHTML('afterbegin','');

console.log(div.outerHTML);
// => 
テスト

const div = document.createElement("div");
const divnew1 = document.createElement("div");
divnew1.id = "n1";
divnew1.textContent ="テスト"
div.appendChild(divnew1);

divnew1.insertAdjacentText('beforeend','追加');

console.log(div.outerHTML);
// => テスト追加

第一引数の位置指定は以下の中から選択できる。

beforebegin 対象要素の前
afterbegin 対象要素内の先頭
beforeend 対象要素内の末尾
afterend 対象要素の後

一致


  1
  2
  3

const items = document.querySelectorAll('li');
items.forEach(item => {
  console.log(item.matches('.classA'));
});
// => true false true

EventTargetとは

2021-01-06T02:05:48+09:00

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

EventTargetのメソッド

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

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

例えば、クリックのイベントは以下のように登録できます。
buttonAをクリックすると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()で処理を停止できます。

Check

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を使うと、指定したイベントからリスナを削除できます。

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