DOM

Document Object Model(DOM)は、HTMLドキュメントのプログラミングインターフェースです.
HTMLドキュメント内のすべての要素をツリー構造のオブジェクトモデルとして定義および階層化できます.
JavascriptはDOMを使用してHTMLを操作できます.
この記事では、DOMのデータ型とAPIについて説明します.

DOMデータ型

1. document

HTMLドキュメントのすべて.つまり、オブジェクトモデルのルート値です.

2. element

DOM導入要素

<div id="test1">
</div>

const object = document.getElementById("test1");
console.log(object) // expect: div.test1

上のコードでは、DOM APIで選択したtest 1のようなものをelementと呼ぶ.

3. nodeList

ビット要素の集合です.

<div class="test2"></div>
<div class="test2"></div>
<div class="test2"></div>
<div class="test2"></div>

const object = document.getElementByClassName("test2"); 
// test2를 클래스로 가지고 있는 요소들의 집합

他にもattributeとnamedNodeMapがあります.

DOMインタフェース

1. HTML Object Collection

DOMが所有するオブジェクトセットからHTML要素にアクセスする方法.

const nav = document.nav; //<nav> 요소 선택

2. getElementById

idを持つ要素のうち、最初の要素を選択します.

<div id="test1"></div>
<div id="test2"></div>

const el = document.getElementById("test1");
console.log(el) // expect: div.test1

3. getElementsByTagName

태그 이름のすべてのHTML要素を選択します.

<div class="division">
  <input id='1' />
  <input id='2' />
</div>

const els = document.getElementById("input"); // <input>을 모두 선택
}

4. getElementsByClassName

対応する클래스명を持つすべてのHTML要素を選択します.

<div class="test2"></div>
<div class="test2"></div>
<div class="test2"></div>
<div class="test2"></div>

const els = document.getElementByClassName("test2"); 
for (target of els){
	target.style.color = "red";  // test2 클래스명을 가진 모든 요소들의 폰트 컬러를 red로 바꿈
}

5. getElementsByName

対応するname属性を持つすべてのHTML要素を選択します.

<div name='myname'></div>
<div name='myname'></div>

const els = document.getElementsByName("myname");
for (target of els) {
	print(target)	//각각의 요소 출력
}

6. querySelectorAll

querySelector AllはcssセレクタでHTML要素を選択します.

<div class="class1"></div>
<div id="id1"></div>

const el1 = document.querySelector('.class1') // class="class1"인 요소 선택
const el2 = document.querySelector('#id1') // id="id1"인 요소 선택