DOM ( Document Object Model ) : 문서(html) 객체 모델
- '<html></html>' 하위 태그 : 각각의 기능(Method), 속성(properties)를 갖고 있는 문서 객체
특징
- getElements로 가져오는 객체는 우선적으로 HTMLCollection의 index를 선택해야 함
- = 배열처럼 사용
== 엘리먼트 가져오기 ==
- tag의 값을 element로 가져오는 메서드
- = byId, byClassName, byTagName
document.getElementById( 'idName' )
:단일 엘리먼트 리턴 (id는 한개뿐임으로)
<body>
<h1 id="h1">h1</h1>
<script>
const h1 = document.getElementById('h1');
console.log(h1);
</script>
</body>
document.getElementByClassName( 'className' )
: 복수 엘리먼트가 리턴 (HTMLCollection 타입으로 리턴)
<body>
<ul>
<li class="list">list1</li>
<li class="list">list2</li>
<li class="list">list3</li>
</ul>
<script>
const list = document.getElementsByClassName('list');
console.log(list);
// 번지로 따로 출력 가능
console.log(list[1]); //list의 1번지
</script>
</body>
document.getElementByTagName( 'tagName' )
: 복수 엘리먼트 리턴 (HTMLCollection 타입으로 리턴)
<body>
<ul>
<li class="list">list1</li>
<li class="list">list2</li>
<li class="list">list3</li>
</ul>
<script>
const ul = document.getElementsByTagName('ul');
console.log(ul);
// 번지로 따로 출력 가능
console.log(ul[0]); //0번지 ul
//0번지 ul의 children = li태그의 개수
console.log(ul[0].children.length); // 3
</script>
</body>
'HTML.CSS.JS > JS' 카테고리의 다른 글
| [JS] 여행 준비물 점검 목록 (버튼으로 추가, 삭제하기) (0) | 2023.04.21 |
|---|---|
| [JS] history 객체 (0) | 2023.04.21 |
| [JS] location 객체 사용 (url로 이동, 페이지 새로고침) (0) | 2023.04.21 |
| [JS] setInterval 정해진 시간주기로 지속적 함수 호출 (0) | 2023.04.21 |
| [JS] setTimeout 정해진 시간후 함수 실행 (0) | 2023.04.21 |