4. [Javascript] Document 객체를 이용하여 HTML 값 활용하기

document 객체.

document는 웹 페이지를 구성하는 HTML 문서를 나타내는 객체입니다. 웹 브라우저에서 HTML 문서가 로드되면, 브라우저는 문서를 파싱하여 document 객체를 생성합니다. 이 객체는 웹 페이지에 존재하는 HTML 태그, CSS 스타일, JavaScript 코드 등 모든 정보에 접근하고 조작할 수 있도록 합니다.

document 객체는 HTML 문서의 모든 요소를 참조할 수 있습니다. 예를 들어, document.getElementById() 메서드를 사용하여 문서 내에 특정 ID를 가진 요소에 접근할 수 있습니다. 또한, document.getElementsByTagName() 메서드를 사용하여 문서 내에 특정 태그 이름을 가진 요소에 대한 참조를 가져올 수도 있습니다.

document 객체는 HTML 문서에 새로운 요소를 추가하거나 기존 요소를 수정하는 등의 다양한 작업을 수행할 수 있는 메서드와 속성을 가지고 있습니다. 이러한 작업을 통해 JavaScript를 사용하여 동적인 웹 페이지를 생성하고 제어할 수 있습니다.

예를 들어, document.createElement() 메서드를 사용하여 새로운 HTML 요소를 생성하고, appendChild() 메서드를 사용하여 해당 요소를 문서의 특정 위치에 추가할 수 있습니다. 또한, innerHTML 속성을 사용하여 HTML 요소의 내용을 동적으로 수정할 수도 있습니다.

---

콘솔에 직접 확인하기.

F12를 눌러 콘솔에 들어가면 콘솔에 명령어를 입력할 수 있습니다.
여기에 document.all 이라고 입력하게되면 아래와 같이 Array값 들을 볼 수 있습니다.

이처럼 document Object는 HTML의 요소 값들을 Javascript 에서 사용할 수 있도록 도와줍니다.

document.all

---

HTML의 요소 값 가져오기.

1. <div class="main__title"> 안의 <h1> 을 가져오겠습니다.

2. 상수 title에 document.querySelector 메소드를 이용하여 CSS Selector와 같이 Argument 값 (".main__title h1")을 작성해줍니다.

3. 콘솔 log를 통해 출력 창을 보면 class가 main__title인 <div>의 자식인 <h1> 값을 가져온것을 확인할 수 있습니다.

*querySelector 메소드는 Selector의 조건을 만족하는 요소가 여러개더라도 첫번째 값만 가져옵니다.

*querySelectorAll을 사용하면 Selector의 조건을 만족하는 모든 요소를 가져옵니다.

---

HTML의 요소 값 변경하기.

위 예제의 title.style.color = "blue" 와 같이 값을 변경할 수도 있습니다.

(style, color와 같은 속성 값은 콘솔에서 console.dir(요소 값) 명령로 확인 가능합니다.)

---

이 외 document 메소드들.

• getElementById(): 지정된 ID 속성 값을 가진 요소의 참조를 반환합니다.
• getElementsByTagName(): 지정된 태그 이름을 가진 모든 요소의 참조를 반환합니다.
• getElementsByClassName(): 지정된 클래스 이름을 가진 모든 요소의 참조를 반환합니다.
• querySelector(): 지정된 CSS 선택자를 사용하여 첫 번째 매칭 요소의 참조를 반환합니다.
• querySelectorAll(): 지정된 CSS 선택자를 사용하여 모든 매칭 요소의 참조를 반환합니다.
• createElement(): 지정된 HTML 요소를 만들어 요소의 참조를 반환합니다.
• appendChild(): 지정된 요소를 다른 요소의 자식으로 추가합니다.
• removeChild(): 지정된 요소를 부모 요소에서 제거합니다.
• setAttribute(): 요소의 지정된 속성에 값을 설정합니다.
• getAttribute(): 요소의 지정된 속성 값을 반환합니다.
• addEventListener(): 지정된 이벤트가 발생할 때 실행할 함수를 등록합니다.

이 외에도 많은 메소드가 있으며, 아래 공식문서에서 확인하여 사용하시면됩니다.

- 참고링크: https://developer.mozilla.org/ko/docs/Web/API/Document

Document - Web API | MDN