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] toggle() 활용 예제 코드  (0) 2023.05.08
[JavaScript] HTML 렌더링과 JavaScript 실행  (0) 2023.05.08
[JavaScript] 이벤트  (0) 2023.05.08
[JavaScript] 내장 함수  (0) 2023.04.17

티스토리툴바