728x90
728x90
document 객체
- 웹 문서에서 <body> 태그를 만나면 만들어지는 객체
- HTML 문서 정보를 가지고 있음
노드 접근하기
# 태그 선택자 이용
1 2 3 4 5 6 7 | document.querySelector("태그명") // 또는 // 컬렉션 타입 반환 // 인덱스 연산자 []를 이용해서 각 노드에 접근 가능 document.getElementsByTagName("태그명"); | cs |
# id 선택자 이용
1 2 3 4 5 | document.querySelector("#아이디명") // 또는 document.getElementById("아이디명"); // # 없이 | cs |
# class 선택자 이용
1 2 3 4 5 6 7 | document.querySelector(".클래스명") // 또는 // 컬렉션 타입 반환 // 인덱스 연산자 []를 이용해서 각 노드에 접근 가능 document.getElementsByClassName("클래스명"); // . 없이 | cs |
# 해당 문서의 form에 접근
1 2 3 4 5 6 7 8 | // form들을 컬렉션 타입으로 반환 document.forms // 인덱스 연산자 []를 사용해서 특정 폼에 접근 document.forms[인덱스] // 특정 폼의 특정 폼 요소에 접근 document.forms[인덱스].elements[인덱스] | cs |
# 포함하고 있는 하위 노드에 접근
1 | document.querySelector("요소").querySelecotr("요소") | cs |
# 요소 생성
1 | let 노드명 = document.createElement("태그명"); | cs |
# 요소에 속성 값 할당
1 2 3 | 노드명.setAttribute("속성명", "속성값"); // ex : 노드명.setAttribute("class", "card"); | cs |
반응형
728x90
노드 속성 및 메서드
# 노드 내 텍스트에 접근
- 텍스트 가져오기 : 노드명.textContent
- 텍스트 입력 : 노드명.textContent = "문자열";
# 노드 내 HTML 요소에 접근
- 하위 HTML 요소 가져오기 : 노드명.innerHTML
- 하위 HTML 요소 입력 : 노드명.innerHTML = "<h1>제목</h1> <p>내용</p>" ;
- 하위 HTML 요소 추가 : 노드명.append(하위노드명);
# 노드 스타일
- 해당 노드에 적용된 스타일 목록 가져오기 : 노드명.style
- 스타일 속성 값 가져오기 : 노드명.style.속성명
- 스타일 속성 적용 : 노드명.style.속성명 = 속성값;
# 이미지 변경
- 이미지노드명.src = "경로/파일명.확장자";
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // 버튼을 클릭할 때마다 이미지가 변경되도록 <script> let isImageChange = false; let btnChangeNode = document.querySelector("#btnChange"); // 이벤트 리스너 btnChangeNode.addEventListener("click", changeImage); // 토글 기능 function changeImage() { let imgNode = document.querySelector("img"); if (isImageChange) { imgNode.src = "../js/img2.png"; } else { imgNode.src = "../js/img1.png"; } isImageChange = !isImageChange; } </script> | cs |
# 요소의 상태에 따라 true/false 반환
- 노드명.checked : 체크박스, 라디오버튼
- 노드명.selected : 콤보박스
- 노드명.visible
- 노드명.hidden
- 노드명.animated
→ if 문에 활용
# 요소 삭제
- 노드명.remove();
320x100
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] 비동기 통신 : AJAX (0) | 2023.05.09 |
|---|---|
| [JavaScript] 비동기 통신 기초 : Promise 타입 (0) | 2023.05.09 |
| [JavaScript] HTML 렌더링과 JavaScript 실행 (0) | 2023.05.08 |
| [JavaScript] 이벤트 (0) | 2023.05.08 |
| [JavaScript] 내장 함수 (0) | 2023.04.17 |
댓글