📌document
document는 우리가 javascript에서 html에 접근할 수 있는 방법이다.
document 안에는 수많은 정보들이 있다.
console에 document를 입력하면 작성한 html을 가져올 수 있다. document는 브라우저에 존재하는 object이다.
document는 JavaScript에서 html에 접근할 수 있는 방법이다.
JavaScript가 HTML document 객체(object)로 부터 title을 가지고 온다.
📌document.title
✔️document.title을 콘솔창에 쳐보면 html의 파일 이름을 확인 해 볼 수있다. 참고로 document는 브라우저에 이미 존재하는 object다.
✔️ JavaScript와 HTML은 연결되어 있기 때문에, JavaScript를 통해 HTML를 변경하고 읽을 수 있다.
<app.js>
document.title = "hello js";<index.html>
<title>Hello From HTML!</title><결과>
JavaScript로 index.html 파일명을 변경했다.
검색은 index 사이트 상에서 document.title을 쳐서 확인해볼 수 있다.
📌document.body
document는 웹사이트 그 자체를 의미한다.
📌console.dir()
log 함수 다음으로 가장 많이 사용하는 함수가 dir 함수이다. dir 함수는 객체의 속성을 계층구조로 출력한다. 대표적인 예제는 다음과 같다. 예제는 Brave 개발자 도구의 콘솔창을 이용하여 구현하였다.
log 함수로 document.body 객체를 출력하면 태그 내용이 나오고, dir 함수로 document.body 객체를 출력하면 객체의 속성이 출력된다.
📌용어 알기
- 객체
- 속성
- 계층구조
✔️객체(object)
객체는 한꺼번에 여러 값을 담을 수 있는 통(container)과 같은 자료구조(data structure)이다. 객체 안에는 name-value pair(이름-값 쌍)이 저장되어 있는데, 이를 객체의 속성이라고 한다.
const person = {
name: '윤아준', // 속성 이름 - 'name', 속성 값 - '윤아준'
age: 19, // 속성 이름 - 'age', 속성 값 - 19
'languages': ['Korean', 'English'], // 속성 이름 - 'languages', 속성 값 - 배열
'한국 나이': 20 // 속성 이름 - '한국 나이', 속성 값 - 20
};person변수에 할당된 객체에는 네 개의 속성이 저장되어 있다. 'languages'와 '한국 나이'와 같이 속성 이름 부분에 문자열을 써도 상관없지만, '한국 나이'에 들어간 공백과 같이 식별자에 허용되지 않는 문자가 들어간 속성 이름을 정의할 때는 반드시 문자열 표기를 사용해야 한다.
