collection
내장 배열(=컬렉션)
문서 내용(HTML)을 기반으로 자동 생성되는 배열을 제공한다.
태그에 접근하기 위한 도구이다.
1. window.document.images
- 현재 문서에 있는 모든 <img> 요소들의 컬렉션을 반환한다.
- 페이지에 있는 이미지를 접근하고 조작하는 데 사용된다.
<body>
<h1>이미지</h1>
<img src="../asset/images/catty01.png" name="img1">
<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(window.document.images.length); //5
console.log(window.document.images[0]); //<img src="../asset/images/catty01.png">
for (var i=0; i<5; i++){
console.log(document.images[i].src);
}
</script>
</body>2. window.document.links
- 현재 문서에 있는 모든 href 속성을 가진 <a> 요소들의 컬렉션을 반환한다.
- 페이지에 있는 모든 하이퍼링크에 접근할 수 있다.
<body>
<h1>링크</h1>
<a href="https://naver.com">네이버</a>
<a href="https://google.com" name="link2">구글</a>
<a href="https://daum.net">다음</a>
<h1>앵커</h1>
<a name="a1">앵커1</a>
<a name="a2">앵커2</a>
<script>
//a 태그라고 다 링크에 포함되는 것이 아니라 앵커는 제외한다.
console.log(document.links.length); //3
</script>3. window.document.anchors
- 현재 문서에 있는 모든 name 속성을 가진 <a> (앵커) 요소들의 컬렉션을 반환한다.
- 주로 링크의 목적지로 사용되는 앵커 태그에 접근하는 데 사용된다.
<body>
<h1>링크</h1>
<a href="https://naver.com">네이버</a>
<a href="https://google.com" name="link2">구글</a>
<a href="https://daum.net">다음</a>
<h1>앵커</h1>
<a name="a1">앵커1</a>
<a name="a2">앵커2</a>
<script>
console.log(document.anchors.length); //2
</script>
</body>
4. window.document.forms
- 현재 문서에 있는 모든 <form> 요소들의 컬렉션을 반환한다.
- 페이지에 있는 폼을 접근하고 조작하는 데 사용된다.
<body>
<h1>이미지</h1>
<img src="../asset/images/catty01.png" name="img1">
<img src="../asset/images/catty02.png">
<img src="../asset/images/catty03.png">
<img src="../asset/images/catty04.png">
<img src="../asset/images/catty05.png">
<h1>링크</h1>
<a href="https://naver.com">네이버</a>
<a href="https://google.com" name="link2">구글</a>
<a href="https://daum.net">다음</a>
<h1>앵커</h1>
<a name="a1">앵커1</a>
<a name="a2">앵커2</a>
<h1>폼</h1>
<form>
<input type="text" name="txt1">
<input type="text">
<input type="text">
<img>
<a href=""></a>
</form>
<form>
<input type="checkbox">
<input type="radio">
</form>
<script>
//이미지의 배열을 가지고 있다.
console.log(window.document.images.length); //5
console.log(window.document.images[0]); //<img src="../asset/images/catty01.png">
for (var i=0; i<5; i++){
console.log(document.images[i].src);
}
console.clear();
//a 태그라고 다 링크에 포함되는 것이 아니라 앵커는 제외한다.
console.log(document.links.length); //3
for (var i=0; i<3; i++){
console.log(document.links[i].href);
}
console.log(document.anchors.length); //2
console.log(document.forms.length); //2
//Cannot read properties of undefined(reading 'txt1')
//txt1이 정의되지않았다. >
// document.form1.txt1.value = '테스트';
document.forms[0].txt1.value = '테스트';
console.log(document.forms[0].elements.length); //3
console.log(document.all.length);
console.log(document.all[0]);
</script>
<script>
//첫번째 사진 크기 조절
// document.images[0].width = 200; //배열로 접근 (권장)
// document.images.img1.width = 300; //name으로 접근(비권장: 작동하는 속성이 있고 안되는 속성이 있음)
document.images['img1'].width = 50; //key로 접근 (권장)
</script>
<script>
// document.links[1].target = '_black';
document.links.link2.target = '_black';
// document.links['link2'].target = '_black';
</script>
<script>
document.forms[0].txt1.value = '111'; // (권장)
document.all.txt1.value = '222';
document.add['txt1'].value = '333';
</script>
</body>
5. window.document.forms[index].elements
폼 내부의 폼 요소들 (예: 입력 필드, 버튼 등) 에 접근한다.
index는 페이지에 여러 개의 폼이 있는 경우 몇 번째 폼을 선택할지 지정하는 데 사용된다.
img, a, link 등 form의 하위 태그가 아니라 포함되지않는다.
<body>
<h1>이미지</h1>
<img src="../asset/images/catty01.png" name="img1">
<img src="../asset/images/catty02.png">
<img src="../asset/images/catty03.png">
<img src="../asset/images/catty04.png">
<img src="../asset/images/catty05.png">
<h1>링크</h1>
<a href="https://naver.com">네이버</a>
<a href="https://google.com" name="link2">구글</a>
<a href="https://daum.net">다음</a>
<h1>앵커</h1>
<a name="a1">앵커1</a>
<a name="a2">앵커2</a>
<h1>폼</h1>
<form>
<input type="text" name="txt1">
<input type="text">
<input type="text">
<img>
<a href=""></a>
</form>
<form>
<input type="checkbox">
<input type="radio">
</form>
<script>
//이미지의 배열을 가지고 있다.
console.log(window.document.images.length); //5
console.log(window.document.images[0]); //<img src="../asset/images/catty01.png">
for (var i=0; i<5; i++){
console.log(document.images[i].src);
}
console.clear();
//a 태그라고 다 링크에 포함되는 것이 아니라 앵커는 제외한다.
console.log(document.links.length); //3
for (var i=0; i<3; i++){
console.log(document.links[i].href);
}
console.log(document.anchors.length); //2
console.log(document.forms.length); //2
//Cannot read properties of undefined(reading 'txt1')
//txt1이 정의되지않았다. >
// document.form1.txt1.value = '테스트';
document.forms[0].txt1.value = '테스트';
console.log(document.forms[0].elements.length); //3
console.log(document.all.length);
console.log(document.all[0]);
</script>
<script>
//첫번째 사진 크기 조절
// document.images[0].width = 200; //배열로 접근 (권장)
// document.images.img1.width = 300; //name으로 접근(비권장: 작동하는 속성이 있고 안되는 속성이 있음)
document.images['img1'].width = 50; //key로 접근 (권장)
</script>
<script>
// document.links[1].target = '_black';
document.links.link2.target = '_black';
// document.links['link2'].target = '_black';
</script>
<script>
document.forms[0].txt1.value = '111'; // (권장)
document.all.txt1.value = '222';
document.add['txt1'].value = '333';
</script>
</body>
6. window.document.all
MS가 만들어낸 비표준 속성이다.
계층구조 관계없이 현재 문서에 있는 모든 요소들의 컬렉션을 반환한다.
하지만,
document.all을 사용하는 것은 오래된 방식이며 현대 브라우저에서의 호환성 문제가 있으므로 권장하지 않는다.
<body>
<h1>이미지</h1>
<img src="../asset/images/catty01.png" name="img1">
<img src="../asset/images/catty02.png">
<img src="../asset/images/catty03.png">
<img src="../asset/images/catty04.png">
<img src="../asset/images/catty05.png">
<h1>링크</h1>
<a href="https://naver.com">네이버</a>
<a href="https://google.com" name="link2">구글</a>
<a href="https://daum.net">다음</a>
<h1>앵커</h1>
<a name="a1">앵커1</a>
<a name="a2">앵커2</a>
<h1>폼</h1>
<form>
<input type="text" name="txt1">
<input type="text">
<input type="text">
<img>
<a href=""></a>
</form>
<form>
<input type="checkbox">
<input type="radio">
</form>
<script>
//이미지의 배열을 가지고 있다.
console.log(window.document.images.length); //5
console.log(window.document.images[0]); //<img src="../asset/images/catty01.png">
for (var i=0; i<5; i++){
console.log(document.images[i].src);
}
console.clear();
//a 태그라고 다 링크에 포함되는 것이 아니라 앵커는 제외한다.
console.log(document.links.length); //3
for (var i=0; i<3; i++){
console.log(document.links[i].href);
}
console.log(document.anchors.length); //2
console.log(document.forms.length); //2
//Cannot read properties of undefined(reading 'txt1')
//txt1이 정의되지않았다. >
// document.form1.txt1.value = '테스트';
document.forms[0].txt1.value = '테스트';
console.log(document.forms[0].elements.length); //3
console.log(document.all.length);
console.log(document.all[0]);
</script>
<script>
//첫번째 사진 크기 조절
// document.images[0].width = 200; //배열로 접근 (권장)
// document.images.img1.width = 300; //name으로 접근(비권장: 작동하는 속성이 있고 안되는 속성이 있음)
document.images['img1'].width = 50; //key로 접근 (권장)
</script>
<script>
// document.links[1].target = '_black';
document.links.link2.target = '_black';
// document.links['link2'].target = '_black';
</script>
<script>
document.forms[0].txt1.value = '111'; // (권장)
document.all.txt1.value = '222';
document.add['txt1'].value = '333';
</script>
</body>
'WEB > JavaScript' 카테고리의 다른 글
| [JavaScript] Message Box(alert, confirm, prompt) (0) | 2023.10.06 |
|---|---|
| image 조작 (0) | 2023.10.06 |
| [JavaScript] BOM - screen, loaction, history (0) | 2023.10.05 |
| [Javascript] BOM - window (0) | 2023.10.05 |
| [JavaScript] HTML 속성 조작하기 (0) | 2023.10.05 |
