오늘은 JavaScript를 통해 HTML을 다루는 방법을 살펴보겠다.
https://nomadcoders.co/javascript-for-beginners
위 링크에서 노마드 코더 - 바닐라 JS로 크롬 앱 만들기를 통해 공부하였다.
(교재는 사용 안 함)
우리는 DOCUMENT 속성을 통해 JS로 HTML을 다룰 수 있다.
이에 대해 여러가지 속성을 다뤄보도록 하겠다.
Document Object 다루기
Document 알아보기
우선 document 타입을 알아보기에 앞서, 실습을 할 간단한 웹 페이지를 먼저 제작해 주었다.
웹 페이지의 내용은 없고, 웹 페이지의 title을 설정하고 js 파일과 css 파일과 연결만 해 놓은 상태다.
index.html 을 들어가서 f12를 누르면 콘솔창을 실행할 수 있다.
콘솔창에서는 브라우저에 기본적으로 내제된 js를 실행시킨다.
콘솔창에 document를 입력해보면
위와 같이 내가 작성했던 html의 내용을 보여준다.
즉, document 는 JavaScript를 통해 html을 다룰 수 있게 해준다.
document는 하나의 object이다.
콘솔창에 console.dir(document) 을 입력해보면
이렇게 확인할 수 있다.
Document로 title 속성 다뤄보기
이전에 html 파일에서 title 을 'Momentum'으로 설정해 놓았었다.
이를 js로 확인할 수 있다.
또한, 이러한 성질을 이용해 title 을 변경할 수도 있다.
Document로 body 호출하기
이번에는 html 문서의 <body> 부분만 호출해 보겠다.
Document로 location 호출하기
document 의 location 오브젝트를 호출해보자.
이 오브젝트는 우리가 어디에 위치하고 있는지 알려준다.
Document로 요소 호출하기
Document로 id 호출하기
우선, id를 이용한 실습을 하기 위해 html에 아이디 요소를 추가하였다.
id는 title이다.
id의 요소를 가져오고 싶을 때, js에서 getElementById() 함수를 사용한다.
이렇게 js로 title id의 내용을 불러왔다.
console.dir() 함수를 사용하여 아이디의 내용을 더 세부적으로 불러올 수 있다.
Document로 class 호출하기
class 를 이용한 실습을 하기 위해 html에 class를 추가해 주었다.
class의 요소를 가져오고 싶을 때는, js에서 getElementsByClassName() 함수를 사용한다.
이제 웹 페이지의 콘솔 창을 열어보면
class 속성이 잘 출력된 것을 볼 수 있다.
위 여러 개의 클래스들은 array이다.
Document로 tag 호출하기
이번에는 tag 속성을 불러와보도록 하겠다.
우선 html 코드에서 class와 id를 모두 지워주었다.
tag 속성을 가져올 땐 getElementsByTagName() 함수를 사용한다.
콘솔창을 열어서 확인해보면
태그 h1의 정보를 알려주고 있다.
querySelector 사용하기
querySelector 는 html을 css 방식으로 추출할 수 있게 해준다.
이 코드는 위에서 class를 불러온 코드와 동일하게 작동한다.
hello 라는 이름의 클래스를 가진 div에 h1을 넣어두었다.
쿼리셀렉터는 이 hello 클래스 안의 h1을 가져올 수 있다.
이 방식은CSS에서 요소를 가져오던 방법과 동일하다.
이렇게 하면 모든 h1을 선택하는 것이 아니라 hello 클래스 안에 있는 h1 태그만을 선택하게 된다.
JS로 HTML 문서 삽입하기
JS로 HTML 문서에 내용을 직접 삽입하고 싶다면 innerHTML을 사용한다.
이번에는 VScode에서 직접 작성해보았다.
원래는 title이 Grab me! 로 작성되어 있던 웹 페이지를
새로고침을 해보면
js에 작성한 내용대로 Got you!로 변경되어 있다.
우리는 js를 통해 html 내용을 바꿀 수도 있다.
