2023. 7. 23. 16:36ㆍ자바스크립트
문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 인터페이스입니다.
1. HTML 태그 이름(tag name)을 이용한 선택
예시)
<li>고양이</li>
<li>개</li>
<li>닭</li>
<script>
var selectedItem = document.getElementsByTagName("li"); // 모든 <li> 요소를 선택
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경
}
</script>
출력 결과
2. 아이디(id)를 이용한 선택
예시)
<Ul>
<li id="cat">고양이</li>
<li>개</li>
<li>닭</li>
</Ul>
<script>
var selectedItem = document.getElementById("cat"); // cat id값이 들어있는 요소를 선택
selectedItem.style.color = "red"; // 선택된 요소의 텍스트 색상을 변경
</script>
출력 결과
3. 클래스(class)를 이용한 선택
예시)
<Ul>
<li class="any1">고양이</li>
<li class="any2">개</li>
<li class="any3">닭</li>
</Ul>
<script>
var selectedItem = document.getElementsByClassName("any2"); // 'any2' Class 값이 들어있는 요소를 선택
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(0).style.color = "red"; // 선택된 요소의 텍스트 색상을 변경
}
</script>
출력 결과
4. name 속성(attribute)을 이용한 선택
예시)
<Ul>
<li name="any">고양이</li>
<li name="any">개</li>
<li name="any">닭</li>
</Ul>
<script>
var selectedItem = document.getElementsByName("any"); // any 네임값이 들어있는 요소를 선택
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = "red"; // 선택된 요소의 텍스트 색상을 변경
}
</script>
출력 결과
5. CSS 선택자(selector)를 이용한 선택
예시)
<Ul>
<li class="any1">고양이</li>
<li class="any2">개</li>
<li class="any3">닭</li>
</Ul>
<script>
var selectedItem = document.querySelectorAll("li.any3"); // li 태그중 any3 클래스 값을 선택
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = "red"; // 선택된 요소의 텍스트 색상을 변경
}
</script>
출력 결과
6. HTML 객체 집합(object collection)을 이용한 선택
예시)
<html>
<head>
<title>타이틀명</title>
</head>
<body>
<script>
var title = document.title; // <title> 태그 요소를 선택
document.write(title);
</script>
</body>
</html>
출력 결과
7. DOM 요소의 내용 변경
예시)
<label id="text">원래 문장</label>
<script>
var str = document.getElementById("text");
str.innerHTML = "바뀐 문장";
</script>
출력 결과
※ 혹시 설명에 오류가 있다면 양해 부탁드립니다.
'자바스크립트' 카테고리의 다른 글
| #33 자바스크립트에서 브라우저 객체 모델(BOM) 사용 (0) | 2023.07.24 |
|---|---|
| #32 자바스크립트에서 이벤트 리스너 등록/삭제 - addEventListener() , removeEventListener() (0) | 2023.07.23 |
| #30 자바스크립트에서 this 사용하기 (0) | 2023.07.20 |
| #29 자바스크립트에서 Object.assign() 메소드를 이용한 객체를 생성 및 create()와 차이점 (0) | 2023.07.20 |
| #28 자바스크립트에서 Object.create() 메소드를 이용한 객체를 생성 (1) | 2023.07.19 |