DOM

ウィンドウオブジェクト

ウィンドウオブジェクトはブラウザウィンドウを表し、JavaScriptの最上位レベルに存在するオブジェクトです.
JavaScriptコードのどこからでもアクセスできるため、グローバルオブジェクトと呼ばれています.
どのようなプログラムや方法を使用しても、最終的にはグローバルオブジェクト内部であるため、前はwindow.を省略することができる.

window.console.log('hello, DOM');

DOM (Document Object Model)

Webページに表示されるHTMLドキュメント全体をオブジェクトとして表し、各オブジェクトをノードと呼びます.

DOMツリー

HTMLの階層はDOMにも反映されており、この階層はツリーにたとえられ、DOMツリーと呼ばれています.
各ノード間の関係は,親,子,兄弟という用語で表される.

ノードタイプ(12種類)

要素ノード:タグを表すノード

テキストノード:文字列を表すノード
*特徴①要素ノードのサブノード②サブノード

を持つことができない.

アノテーションノード

ドキュメントオブジェクト

documentオブジェクトは、Webドキュメントの最上位オブジェクトであり、エントリポイントとして機能します.

console.log(document);

👆🏻 DOMの場合、直接アクセスすると、オブジェクトではなくDOMに対応するHTMLが出力されます.
     (タグではなくDOMをオブジェクトとして扱う場合、console.dir())

JavaScriptとしてタグを選択

id選択タグの使用

指定した文字列に一致するid属性を持つ要素を検索し、その要素オブジェクトを返します.存在しない場合はnullを返します.

// document.getElementById('id')
const toDoList = document.getElementById('to-do-list');

classとマークする選択

HTML Collectionと同様の配列を返し、存在しない場合は空のHTML Collection配列を返します.

// document.getElementsByClassName('class')
const list = document.getElementsByClassName('list');

そうじはいち
①数値形式のインデックス性
②length属性を使用可能
③配列の基本的な方法は使用できません
④ Array.isArray(類似アレイ)の戻り値false

タグ名でタグを選択

HTML Collection類似アレイに戻る

// document.getElementsByTagName('태그이름');
const all = document.getElementsByTagName('*'); // 모든 태그

cssセレクタとしてタグを選択

document.querySelector('css')このタグの最初のタグは、存在しない場合nullを返します.

const list = document.querySelector('.list');

document.querySelectorAll('css')NoteListのようなタグを返し、存在しない場合は空のタグを返します

const list = document.querySelectorAll('.list');

DOM移動プロセス

要素ノード

サブエレメント

// element.children: HTMLCollection 유사배열로 표현
const toDoList = document.querySelector('#to-do-list');
console.log(toDoList.children);


// element.firstElementChild: 없으면 null 반환
const toDoList = document.querySelector('#to-do-list');
console.log(toDoList.firstElementChild);


// element.lastElementChild: 없으면 null 반환
const toDoList = document.querySelector('#to-do-list');
console.log(toDoList.lastElementChild);

親要素

// element.parentElement
const list = document.querySelector('.list');
console.log(list.parentElement)

兄弟要素

ない場合はnullを返します

// element.previousElementSibling
const toDoList = document.querySelector('#to-do-list');
console.log(toDoList.previousElementSibling);

// element.nextElementSibling
const toDoList = document.querySelector('#to-do-list');
console.log(toDoList.nextElementSibling);

すべてのノード

サブノード

// node.childNodes: NodeList 유사배열로 표현

// node.firstChild

// node.lastChild

親ノード

// node.parentNode

兄弟ノード

// node.previousSibling

// node.nextSibling

要素ノードの構成

innerHTML

要素ノードに戻るHTMLコード文字列
内部HTML自体を修正するときによく使われます.

// element.innerHTML
const toDoList = document.querySelector('#to-do-list');
console.log(toDoList.innerHTML);

// 수정
toDoList.innerHTML += '<li>read a book</li>';

outerHTML

要素ノード自体のHTMLコード全体を文字列に戻す
新しい値が割り当てられると、要素自体が置き換えられます.

// element.outerHTML
const toDoList = document.querySelector('#to-do-list');
console.log(toDoList.outerHTML);

// 새로운 요소 할당
toDoList.outerHTML = '<p>기존 element 사라짐</p>';

textContent

テキストのみが返されますが、要素ノードのHTMLコンテンツは返されません.

// element.textContent
const toDoList = document.querySelector('#to-do-list');
console.log(toDoList.textContent);

🗣 ユーザーが入力した値をWebページに反映する場合は、innerHTMLではなくテキストコンテンツを使用します.

要素ノードの操作

作成

// document.createElement('태그이름')
const book = document.createElement('li');

入力内容

element.textContent , element.innerHTML , ...

book.textContent = 'read a book';

追加または移動

パラメータを使用して文字列を渡し、複数の値を渡す順序でノードを一度に追加できます.

// 추가
const toDoList = document.querySelector('#to-do-list');

// element.prepend(): 메소드를 호출한 노드의 제일 첫번째 자식 노드로 추가
toDoList.prepend(book);

// element.append(): 메소드를 호출한 노드의 제일 마지막 자식 노드로 추가
toDoList.append(book);

// element.before(): 메소드를 호출한 노드의 앞쪽에 형제 노드로 추가
toDoList.before(book);

// element.after(): 메소드를 호출한 노드의 뒤쪽에 형제 노드로 추가
toDoList.after(book, '<li class="list">clean my room</li>');

削除

// element.remove()
const toDoList = document.querySelector('#to-do-list');
toDoList.children[2].remove();

HTML属性の処理

ほとんどのHTML属性はDOMオブジェクトのプロパティに変換されます.
ほとんどの場合、「class」はHTML属性名に従って要素ノードのプロファイルとして生成されますが、例外的に「class」は「className」として生成されます.

const toDoList = document.querySelector('#to-do-list');
console.log(toDoList.className);

ただし、標準属性でない場合は変換されません.(undefinedに戻ってアクセス)
ただし、以下の方法で非標準のHTML属性を処理することもできます.

// element.getAttribute('속성'): 속성에 접근
const toDoList = document.querySelector('#to-do-list');
console.log(toDoList.getAttribute('class'));

// element.setAttribute('속성', '값'): 속성 추가(수정)
const toDoList = document.querySelector('#to-do-list');
toDoList.setAttribute('class', 'list');

// element.removeAttribute('속성'): 속성 제거
const toDoList.document.querySelector('#to-do-list');
toDoList.removeAttribute('class');

input.getAttribute('value')は更新されていません.代わりにinput.value

dataset

HTMLではdata-*属性を指定し、JSではelement.dataset.*にアクセスします.

<button class="btn" data-status="대기중">대기중</button>
<button class="btn" data-status="진행중">진행중</button>
<button class="btn" data-status="완료">완료</button>

const btns = document.querySelectorAll('.btn');
for (let btn of btns) {
  const status = btn.dataset.status;
  btn.addEventListener('click', () => {
    console.log(status);
  });
}

処理スタイル

スタイル

複数の単語で作成されるプロパティはcamelタグ法を使用します.

// element.style.styleName = 'value'
const toDoList = document.querySelector('#to-do-list');
toDoList.children[0].style.textDecoration = 'line-through';

タグに値を直接適用してスタイルの優先度を高めるか、同じスタイルを他の複数のタグに適用する必要がある場合は、不要な類似コードを大量に記述する必要があります.

class間接適用スタイルを変更するには

クラスに適用するスタイルを指定し、タグに適用します.

// element.className
myTag.children[0].className = 'done';

ただし、クラス全体のプロパティ値が変化します.

element.classListメソッドの使用

classListクラスの属性値を類似配列として扱うプロパティ

// classList.add(): 클래스 추가, 여러 개의 값을 전달하여 여러 클래스 추가 가능
const toDoList = document.querySelector('#to-do-list');
const list = toDoList.children;
list[0].classList.add('done', 'class-name');

// classList.remove(): 클래스 삭제, 여러 개의 값을 전달하여 여러 클래스 삭제 가능
list[0].classList.remove('done', 'class-name');

// classList.toggle(): 클래스 없으면 추가하고 있으면 삭제하며, 하나의 클래스만 적용 가능
list[0].classList.toggle('done', true);  // add의 기능만 강제
list[0].classList.toggle('done', false);  // remove의 기능만 강제