🍁Collection
내장 배열은 곧 컬렉션을 의미한다.
컬렉션은 태그에 접근하기 위한 도구로, 데이터를 저장하고 조작하는 여러 구조를 나타낸다.
자바스크립트는 문서 내용(HTML)을 기반으로 자동 생성되는 배열을 제공한다.
자바스크립트에서 사용하는 데이터 자료구조는 인덱스(index) 기반의 컬렉션, 키(key) 기반의 컬렉션이 있다.
- window.document.images
- window.document.links
- window.document.anchors
- window.document.forms
- window.document.forms[index].elements
- window.document.all
window.document.images
<body>
<h1>이미지</h1>
<img src="../asset/images/catty01.png">
<img src="../asset/images/catty02.png">
<img src="../asset/images/catty03.png">
<img src="../asset/images/catty04.png">
<img src="../asset/images/catty05.png">
<script>
console.log(document.images.length);
console.log(document.images[0].src);
for (var i=0; i<5; i++){
console.log(document.images[i].src);
}
</script>
</body>
가장 꼭대기의 window 객체는 유일하기 때문에 생략할 수 있다.
대부분의 경우 window를 생략하는 편이다.
키로 접근하는 방식 사용 (첫 번째 고양이 찾기)
document.images[0].width = 200; //index로 접근
document.images.img1.width = 200; //name으로 접근
document.images['img1'].width = 50; //key로 접근인덱스로도 접근할 수 있지만, name으로도 접근할 수 있다.
하지만 name으로 접근하는 방식은 어떨 때에는 되고 어떨 때에는 안 되기도 하는 불안정한 방식이다.
또한 인덱스는 언제 바뀔지 모르기 때문에 key로 접근하는 방식을 사용하는 게 좋다.
window.document.links
<body>
<h1>링크</h1>
<a href="https://naver.com">네이버</a>
<a href="https://google.com">구글</a>
<a href="https://daum.net">다음</a>
<script>
console.log(document.links.length);
for (var i=0; i<3; i++){
console.log(document.links[i].href);
}
</script>
</body>
링크가 내장 배열에 저장되었다.
window.document.anchors
<body>
<h1>앵커</h1>
<a name="a1">앵커1</a>
<a name="a2">앵커2</a>
<script>
console.log(document.anchors.length);
</script>
</body>
앵커가 내장 배열에 저장되었다.
window.document.forms
<body>
<h1>폼</h1>
<form>
<input type="text">
<input type="text">
<input type="text">
</form>
<form>
<input type="checkbox">
<input type="radio">
</form>
<script>
console.log(document.forms.length);
</script>
</body>
폼이 내장 배열에 저장되었다.
한 페이지에 폼 태그를 여러 개 쓰는 경우는 드물지만, 설명을 위해 여러 개의 폼 태그를 사용했다.
Uncaught TypeError: Cannot read properties of undefined (reading 'txt')
document.form1.txt.value = '테스트';
객체나 배열의 속성에 대해 정의되지 않은 또는 null인 변수에 접근하려고 할 때 발생한다. 또한 해당 변수나 객체를 정의하거나 할당하기 전에 접근하려고 하는 경우에도 오류가 발생할 수 있다.
즉, Uncaught TypeError는 null 오류라고 생각하면 된다. 이 오류를 해결하기 위해서는 해당 속성이나 변수가 정의되었는지 확인해야 한다.
window.document.forms[index].elements
console.log(document.forms[0].elements.length);
console.log(document.forms[1].elements.length);
window.document.all
console.log(document.all.length);
console.log(document.all[0]);
console.log(document.all[1]);
console.log(document.all[2]);
window.document.all은 BOM 구조에 포함되지 않았던 것도 넣는다.
폼 데이터 찾기
document.forms[0].txt1.value = '값1'; //방식 1 인덱스로 접근
document.all['txt1'].value = '값2'; //방식 2 속성 이름으로 접근
document.all.txt1.value = '값3'; //방식 3 직접 속성에 접근인덱스로 접근하는 방식은 document.forms을 통해 폼 요소에, 인덱스 [0]를 사용하여 첫 번째 폼에 접근한 후, 그 폼의 txt1이라는 이름을 가진 입력 요소의 값을 설정한다.
속성 이름으로 접근하는 방식은 document.all을 통해 속성 이름 'txt1'을 사용하여 해당 속성에 접근하고, 해당 속성의 값을 설정한다.
직접 속성에 접근하는 방식은 document.all을 통해 직접 속성에 접근하고, 'txt1'이라는 속성에 접근하여 값을 설정한다.
위의 3가지 방식으로 데이터를 찾을 수 있으나, all은 사장될 가능성이 있으므로 다른 방법을 찾는 것을 권장한다.
