태그 이름을 이용한 요소 노드 휙득
Document.prototype / Element.prototype.getElementByTagName 메서드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환
메서드 이름이 포함된 Elements가 복수형인 것에서 알 수 있듯이 여러개의 요소 노드 객체를 갖는 DOM컬렉션 객체인 HTMLcollection 객체를 반환
함수는 하나의 값만 반환할 수 있으므로 여러개의 값을 반환하려면 배열이나 객체와 같은 자료구조에 담아 반환해야함
getElementByTagName 메서드는 Document.prototype에 정의된 메서드와 Element.prototype에 정의된 메서드가 있음
Document.prototype.getElementsByTagName 메서드는 DOM의 루트 노드, 즉 Document를 통해 호출하며 DOM 전체에서 요소 노드를 탐색하여 반환
하지만 Element.prototype.getElementsByTagName 메서드는 특정 요소 노드를 통해 호출하며
특정 요소 노드 중에서 요소 노드를 탐색하여 반환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM - Create & Add Node</title>
</head>
<body>
<ul>
<li id="apple">Apple</li>
<li id="banana">Banana</li>
<li id="orange">Orange</li>
</ul>
<script>
/*
*/
// 태그 이름이 li인 요소 노드를 모두 탐색하여 반환
// 탐색된 요소 노드들은 HTMLCollection 객체에 담겨 반환
const elem = document.getElementsByTagName('li');
// HTMLCollection 객체를 배열로 변환하여 순회하며 color 프로퍼티 값을 변경
// [...] 배열로 가져 온다는 뜻
[...elem].forEach(elem => {elem.style.color = 'red'});
</script>
</body>
</html>
