개요
그동안 신나게 자바스크립트로 이런저런 문제도 풀고 뭐 만들기도 하고..
로직도 만들고 해봤으니 이제 그 자바스크립트로 실제 html 페이지를 조작해보자.
각각의 자세한 설명은 다른 포스트에서 하나하나 깊게 해보고,
이번 포스트에서는 그냥 간단한 CRUD(create, read, update, delete) - 즉, 생성, 읽기, 수정, 삭제를 해보자.
준비물
- 크롬 브라우저(다른 브라우저도 가능하지만.. 따라하려면 크롬으로)
- 인터넷
실습 환경 설정
우선 크롬 브라우저를 열어서 다음 포털을 열고,
F12 혹은 Ctrl+Shift+i 키로 개발자 도구를 열고, "콘솔"탭을 눌러 아래와 같은 화면이 나오면 준비 완료.
CRUD
Create - 특정 요소를 생성해서 페이지에 추가해보기
사심을 담아 내 블로그로 가는 버튼을 만들어서 상단 "다음을 시작페이지로" 옆에 추가를 해보자
우선 집어넣기 전에 버튼을 생성해줘야 하는데,
콘솔창에 하기와 같이 입력해주고 엔터를 친다.
const button = document.createElement('button'); // 버튼 요소를 만들고,
button.textContent = "프론트 하는 코디베어"; // 텍스트를 "프론트 하는 코디베어"로 채워준다.
아무것도 변한게 없지만 button이라는 html 요소가 생성되었다.
이제 이걸 "다음을 시작페이지로" 옆에 추가해보자.
해당 DOM은 'inner_head' 클래스를 가진 DOM 내부의 'a' 요소인데, css 속성 중 position이 absolute로 되어있으므로 inner_head안에 넣어도 저 옆에는 안붙을 것 같으니, a태그 안에 직접 추가를 해보자.
하기와 같이 입력을 하고 엔터를 치자.
document.querySelector('.inner_head .ico_vert').append(button)
방금 생성한 내용을 담고 있는 버튼이 "다음을 시작페이지로" 옆에 추가되었다.
이렇게 브라우저에 내가 원하는 dom을 만들고, 추가해줄 수 있다.
Read - 원하는 요소 읽어오기
그럼 이번엔 "카카오계정으로 로그인" 버튼의 정보를 읽어와보자.
이걸 읽어와서 내 블로그로 가는 버튼으로 바꿔보자.
콘솔창에 하기와 같이 치고 엔터를 쳐준다
const loginBtn = document.querySelector('.link_login ');querySelector의 매개변수로 css 선택자와 동일하게 해당 버튼의 클래스명을 넣어주면 선택 할 수 있다.
그 다음 다시 콘솔창에 'loginBtn'을 입력해보면..
로그인 버튼이 담긴 a태그가 나오면서 마우스 커서를 올리면 브라우저 상에서 버튼이 파란색으로 선택되는걸 볼 수 있다.
이렇게 원하는 DOM을 읽어올 수 있다.
Update - 원하는 요소의 내용을 수정하기
이제 해당 버튼의 내용을 내 블로그로 수정해보자.
이미 로그인 버튼을 변수로 지정해 두었으니 하기와 같이 입력후 엔터만 치면 된다.
loginBtn.textContent = "프론트 하는 코디베어";
로그인 버튼이 내 블로그 링크로 바뀌었다.
하지만 클릭을 해봐야 로그인창으로 넘어가버리니 이번엔 링크도 바꿔보자
loginBtn.href = 'https://frontend-bear.tistory.com/';loginBtn의 href를 내 블로그 주소로 바꿨다.
아직 눌러보진 말자.
누르면 여태 한게 다 날아간다.
실제 다음서버를 조작하는게 아니라 그냥 지금 내가 보고 있는 페이지만을 수정하는 거기 때문이다.
Delete - 원하는 요소 삭제하기
아~ 까 만들었던 "다음을 시작페이지로" 옆에 있는 "프론트 하는 코디베어" 버튼을 포함해서 저 부분을 그냥 삭제해보자.
하기와 같이 입력하면된다.
document.querySelector('.link_launch').remove();해당 DOM은 link_launch 라는 클래스를 가지고 있으므로 해당 클래스를 선택한 뒤,
remove() 매서드로 날려버리면 해당 DOM이 삭제된다.
이제 기본적인 CRUD에 대해 다 알아보았으니 내 블로그로 가는 버튼을 눌러서 거짓된 기쁨을 누려보고 끝내도록 하자.
