getElementsByTagName() 메서드는 HTMLCollection 객체를 반환한다. 이 객체는 HTML 요소의 배열과 같은 목록(컬렉션)이다. 컬렉션의 요소는 인덱스 번호로 접근할 수 있으나 배열은 아니므로 배열 메서드는 쓸 수 없다. length 속성으로 요소의 수를 정의한다.
NodeList : 문서 노드의 모음
NodeList 객체는 HTML Collection 객체와 거의 비슷하다. getElementsByClassName() 같은 메서드는 HTML Collection 객체를 반환하고 querySelectorAll() 메서드는 NodeList객체를 반환한다.
item(), forEach() 메서드와 length 속성을 제공한다.
HTML Collection 과의 차이점
HTML Collection은 HTML 요소 모음이고, NodeList는 문서 노드의 모음이다.
두 객체는 객체의 배열과 같은 목로이고, length 속성을 가지며, 컬렉션이다(모음집)
그리고 배열과 같은 각 항목에 접근하기 위해 인덱스를 제공한다.
다만, HTML Collection 항목은 이름, id 또는 인덱스 번호로 접근할 수 있지만 NodeList 항목은 인덱스 번호로만 접근할 수 있다. 그리고 NodeList 객체는 문서 노드의 모음이므로 속성 노드와 텍스트 노드를 포함할 수 있다.
form 객체
form 객체는 document 객체의 하위 Object Collections이며, HTML <form> 요소를 나타낸다.
| <form> 요소 접근 방법 | 설명 |
| document.forms['myForm'] | namd='myForm'인 form 접근 |
| document.forms[0] | 1번째 form 접근 |
| form의 name값 | form의 name값으로 직접 접근 가능 |
| <form> 내부 입력요소 접근 방법 | 설명 |
| document.forms[0].elements[0] | 1번째 form의 1번째 입력요소 접근 |
| form의 name값.내부요소 name값 | 해당 name의 입력요소 접근 |
| forms[0].elements.item(0) | 1번째 form의 1번째 입력요소 접근 |
| forms[0].elements.namedItem(name값) | 해당 name의 입력요소 접근 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="myForm" name="form1">
first name : <input type="text" name="fname" value="Donald"><br>
last name : <input type="text" name="lname" value="Duck"><br>
</form>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
document.forms[0].name = "newName";
console.log(document.forms["form1"]);
let x = document.forms[0].name;
document.querySelector("#demo").innerHTML = x;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="myForm" name="form1">
first name : <input type="text" name="fname" value="Donald"><br>
last name : <input type="text" name="lname" value="Duck"><br>
<input type="button" onclick="myFunction()" value="Reset form">
</form>
<script>
function myFunction() {
document.forms[0].reset();
}
</script>
</body>
</html>