07-1 문서 객체 조작하기
1. 문서 객체
html, head, body, title, h1, div, span 등을 HTML 언어에서는 요소라고 부르지만 자바스크립트에서는 문서 객체라고
부른다. 또한 문서 객체를 조합해서 만든 전체적인 형태를 문서 객체 모델이라고 부른다.
2. DOMContentLoaded 이벤트
document.addEventListener('DOMContentLoaded', ( ) => {
})
ㄴ 문서 객체를 조작할 때는 DOMContentLoaded 이벤트를 사용한다.
ㄴ함수 h1은 text를 매개변수로 받아 <h1> 태그와 함께 출력된다. <head>에서 h1 함수를 사용하여 '1번째 script 태그'
를 <body>에 추가하였다. 그러나 출력 결과에는 반영이 되어 있지 않다. 그 이유는 HTML 코드를 위에서 아래로
차례대로 실행하기 때문이다. <head>에서 h1 함수를 실행할 때는 아직 <body> 태그를 읽기 전이고 <body>태그가
생성이 되지 않았기 때문에 출력되지 않는다.
ㄴdocument.addEventListener('DOMContentLoaded,( )=>{ }') 는 '문서 객체를 모두 읽어 들인 후 DOMContentLoaded
상태가 되면 콜백 함수를 실행한다'는 뜻이다. 즉 html 코드를 쭉 읽으며 <1번째 h1 태그>를 출력하고
DOMContentLoaded 상태가 되었을 때 h1 함수를 실행하여 '1번째 script 태그'가 추가된다.
3. 문서 객체 가져오기
document.querySelector(선택자)
document.querySelectorAll(선택자)
ㄴ querySelector() 메소드는 요소를 하나만 추출하고 querySelectorAll() 메소드는 문서 객체를 여러 개 추출한다.
| 이름 | 설명 | 예시 |
| 태그 선택자 | 특정 태그를 가진 요소를 추출한다. | querySelector(태그) |
| 아이디 선택자 | 특정 id 속성을 가진 요소를 추출한다. | querySelector(#아이디) |
| 클래스 선택자 | 특정 class 속성을 가진 요소를 추출한다. | querySelector(.클래스) |
| 속성 선택자 | 특정 속성 값을 갖고 있는 요소를 추출한다. | querySelector([속성=값]) |
| 후손 선택자 | 선택자_A 아래에 있는 선택자_B를 추출한다. | querySelector(선택자_A 선택자_B) |
ㄴ DOMContentLoaded 상태가 되면 콜백 함수로 <h1>과 <h2> 태그를 조작하였다. querysSelector() 메소드를
사용하여 한 개의 <h1> 태그를 추출했고 querySelectorAll() 메소드를 사용하여 html의 모든 <h2> 태그를
추출하여 배열에 저장하였다. 모든 <h2> 태그를 조작하기 위해서 forEach() 메소드를 사용해야 한다.
4. 글자 조작하기
| 속성 이름 | 설명 |
| 문서 객체.textContent | 입력된 문자열을 그대로 넣는다. |
| 문서 객체.innerHTML | 입력된 문자열을 HTML 형식으로 넣는다 |
ㄴ innerHTML은 <h1> 태그를 html 코드로 반영하여 출력한 반면, textContent는 <h1> 태그를 그냥 문자열로 출력한다.
5. 속성 조작하기
| 메소드 이름 | 설명 |
| 문서 객체.setAttribute(속성 이름, 값) | 특정 속성에 값을 지정한다. |
| 문서 객체.getAttribute(속성 이름) | 특정 속성을 추출한다. |
ㄴ link라는 class를 가진 <a> 태그를 세 개 만들고 DOMContentLoaded 상태가 되었을 때 link라는 class를 가진
요소를 추출하였고 각 <a> 태그의 href 속성에 hls 배열에 저장해둔 링크를 지정했다.
6. 스타일 조작하기
h1.style.backgroundColor --> 가장 많이 사용하는 방법
h1.style['backgroundColor']
h1.style['background-color']
ㄴ 자바스크립트에서 스타일을 조정할 수 있는 3가지 방법이다.
7. 문서 객체 생성하기
document.createElement(문서 객체 이름)
ㄴ 문서 객체를 생성하고 싶을 때 사용하는 메소드이다. 객체를 만들고 어떤 문서 아래에 추가할지 지정을 해야 한다.
위에 있는 문서 객체를 부모, 아래에 있는 문서 객체를 자식이라고 부른다.
ㄴ <table>에 새로운 항목을 추가하기 위해 <tr> 태그를 생성하였고 innerHTML로 <td> 태그와 내용을
삽입하였다. 또한 appendChild 버튼을 만들어서 버튼을 클릭할 때 항목이 추가되도록 설정하였다.
8. 문서 객체 제거하기
부모 객체.removeChild(자식 객체)
삭제하려는 문서 객체.parentNode.removeChild(삭제하려는 문서 객체)
9. 이벤트 설정하기
모든 문서 객체는 생성되거나 클릭되거나 마우스를 위에 올릴 때 이벤트라는 것이 발생한다.
1) 이벤트 연결하기
문서 객체.addEventListener(이벤트 이름, 콜백 함수)
ㄴ addEventListener의 콜백 함수를 이벤트 리스너 또는 이벤트 핸들러라고도 한다.
2) 이벤트 연결 제거하기
문서 객체.removeEventListener(이벤트 이름, 이벤트 리스너)
ㄴ addEventListener에서 작성했던 이벤트 리스너 부분은 상수 listener에 따로 저장하였다. 이벤트를 제거하는 메소드인
removeEventListener는 이벤트 리스너를 변수 또는 상수로 가지고 있어야 하기 때문이다. remove event 버튼을 클릭
하고 '클릭 횟수 : 4' 부분을 클릭하여도 횟수가 올라가지 않는다.
'혼공스보면서 혼공스(JS)' 카테고리의 다른 글
| CH8. 예외처리- 예외 처리 고급 (0) | 2021.07.18 |
|---|---|
| CH7. 문서 객체 모델- 이벤트 활용 (0) | 2021.07.13 |
| CH6. 객체- 객체와 배열 고급 (0) | 2021.07.11 |
| CH6. 객체- 객체의 속성과 메소드 사용하기 (0) | 2021.07.11 |
| CH6. 객체- 객체의 기본 (0) | 2021.07.10 |
