document.anchors 컬렉션
anchors 컬렉션은 name 특성이 있는 문서의 모든 <a> 요소 모음을 반환한다.
컬렉션의 요소는 소스 코드에 나타나는 순서대로 정렬된다.
컬렉션은 속성과 메서드를 갖는다.
| 속성/메서드 | 설명 |
| length | 컬렉션에 있는 <a> 요소의 수 반환 |
| [index] | 인덱스 값을 이용하여 컬렉션 <a> 요소 반환 |
| item(index) | 인덱스 갑을 사용하여 컬렉션 <a> 요소 반환 |
| nameditem(id) | 지정된 id를 가진 컬렉션에서 <a> 요소 반환 |
<!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>
<a href="" name="html">HTML</a><br>
<a href="" name="css">CSS</a><br>
<a href="" name="js">JS</a><br>
<button onclick="myFunction()">Try it</button>
<p id="demo01"></p>
<p id="demo02"></p>
<script>
function myFunction() {
let x = document.anchors.length;
document.querySelector("#demo01").innerHTML = "anchors.length : " + x;
let y = document.anchors[0].innerHTML;
document.querySelector("#demo02").innerHTML = "anchors[0].innerHTML : " + y;
}
</script>
</body>
</html>
document.body 속성
문서의 본문을 설정하거나 반환한다.
document.body; // body 속성을 반환한다
document.body = newContent; // 새로운 콘텐츠값으로 설정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>body</title>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.body.style.backgroundColor = "pink";
}
</script>
</body>
</html>
try it button 클릭하면 backgroundcolor pink로 변경
images 컬렉션
문서의 모든 <img> 요소의 컬렉션을 반환한다. images 컬렉션도 자신의 속성과 메서드를 가진다.
| 속성/메서드 | 설명 |
| length | 컬렉션에 있는 <img> 요소의 수 반환 |
| [index] | 인덱스 값을 이용하여 컬렉션 <img> 요소 반환 |
| item(index) | 인덱스 값을 사용하여 컬렉션 <img> 요소 반환 |
| nameditem(id) | 지정된 id를 가진 컬렉션에서 <img> 요소 반환 |
<!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>
<img src="img/btob.jpg" alt="test01" width="200px" height="200px">
<img src="img/goo.jpg" alt="test02" width="200px" height="200px">
<img id="myimg" src="img/po.jpg" alt="test03" width="200px" height="200px">
<button onclick="myFunction()">Try it</button>
<p id="demo01"></p>
<p id="demo02"></p>
<p id="demo03"></p>
<script>
function myFunction() {
let x = document.images.length;
document.querySelector("#demo01").innerHTML = "images.length : " + x;
let y = document.images[0].src;
document.querySelector("#demo02").innerHTML = y;
let z = document.images.namedItem("myimg").src;
document.querySelector("#demo03").innerHTML = z;
}
</script>
</body>
</html>
'웹 프로그래밍 기초 > DOM 문서객체' 카테고리의 다른 글
| addEventListener (0) | 2025.04.11 |
|---|---|
| 이벤트 (1) | 2025.04.11 |
| HTML 요소 검색하기 (0) | 2025.04.11 |
| HTML 요소 추가/삭제하기 (0) | 2025.04.11 |
| HTML 요소 내용 변경하기 (0) | 2025.04.11 |