DOM (Document Object Model - 문서 객체 모델
- DOM은 HTML문서를 브라우저가 이해할 수 있도록 만든 Tree 자료구조
(DOM으로 HTML 조작 가능) - HTML문서의 계층적 구조와 정보를 표현, 뿐만 아니라 DOM을 제어할 수 있는 API, 즉 프로퍼티와 메소드도 제공
HTML에 JavaScript 적용하기
<script>태그- HTML에 JavaScript를 적용하기 위해서는
<script>태그를 이용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 이 부분에 들어가거나-->
>
</head>
<body>
<!-- 이 부분에 들어감-->>
</body>
</html>HTML에 jQuery 적용하기
- jQuery도 마찬가지로
<script>태그를 이용해서 jQuery 라이브러리를 불러옴
DOM 다루기 (CRUD + append)
CREATE 생성
document.createElement('div')를 통해 div 생성
document.createElement('div')
<div></div>
//자바스크립트에서 어떤 작업의 결과를 담으려면?
//변수를 선언하고 어떤 작업의 결과를 변수에 할당
//여기서는 div element를 tweetDiv에 할당
const tweetDiv = document.createElement('div')-> 아직 화면에 변화가 없는 것이 당연, APPEND 에서 tweetDiv를 트리구조에 연결!
APPEND 연결
document.body.append(tweetDiv);- append( ) 를 이용해서 body 안에 tweetDiv 를 연결해줌.
-> 아무것도 보이지 않는데 잘못 입력한 것인가?
No. div 요소에 아무런 내용을 입력하지 않아서 안보이는 것일 뿐이다. UPDATE를 통해 내용을 넣어줄 것임.
READ 조회
- DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫번째 인자로 셀렉터(selector)를 전달하여 사용할 수 있다.
- 셀렉터로는
html요소("div"), id(#~~),class(.~~)3가지가 가장 많이 쓰임.
const oneTweet = document.querySelector('.tweet')-> querySelector에 '.tweet'을 넣으면, 클래스 이름이 tweet인 html 엘리먼트 중 첫번째 엘리먼트를 조회할 수 있다.
const tweets = document.querySelectorAll('.tweet')-> querySelectorAll 로 클래스 이름이 tweet인 모든 html 요소를 배열형 객체로 받아온다.
const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true-> querySelector과 querySelectorAll 만 알아도 대부분의 요소를 조회할 수 있지만, get 으로 시작하는 DOM조회 메서드를 볼 수 있다. 이 메서드는 querySelector와 비슷한 역할을 하는 오래된 방식 !
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)-> CREATE 에서 생성한 div요소(tweetDiv)를 container 안에 마지막 자식요소로 추가한다.
div요소(tweetDiv)를 container 안에 마지막 자식요소로 추가된 모습
UPDATE 요소변경
- 먼저 oneDiv라는 이름의
<div>생성
const oneDiv = document.createElement('div');
console.log(oneDiv) // <div></div>- textContent 라는 요소를 사용해서, 비어있는
<div></div>에 문자열을 입력한다.
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div><div>dev</div>이대로 container 에 append 하면 css 스타일링이 적용되지 않는다. CSS 스타일링이 적용될 수 있도록 element에 class 를 추가하자! classList.add 를 이용해 추가한다.
oneDiv.classList.sdd('tweet')
console.log(oneDiv) // <div class= "tweet">dev</div>- 순서대로 div 생성, 문자열 추가, 클래스 추가라는 과정을 거쳤다.
이번에는 append()를 이용해서 container 의 자식요소로 넣어보자.
const container = document.querSelector('#container')
container.append(oneDiv)
dev 생성완료!
DELETE 삭제
- remove() 메서드를 사용
const oneDiv = document.createElement('div');
oneDiv.remove()- 여러개의 자식요소를 지우려면 어떻게 할까?
->removeChild - removeChild 는 자식요소를 지정해서 삭제하는 메서드. 모든 자식요소를 삭제하기 위해 반복문(while, for 등)을 활용할 수 있다. 다음 코드는 자식요소가 남아있지 않을 때까지, 첫번째 자식요소를 삭제하는 코드이다.
const container = document.querySelector('#container');
while(container.firstChild){
container.removeChild(container.firstChild);
}- 하지만 이렇게 되면, 제목인 tweet list 까지 삭제된다.
어떻게 tweet list를 남겨둘 수 있을까?
container 의 자식요소가 1개만 남을때까지 마지막에 오는 자식요소를 제거한다.
const container = document.querySelector('#container');
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}퀴즈
it("lexical scope와 closure에 대해 다시 확인합니다.", function () {
let age = 27;
let name = "jin";
let height = 179;
function outerFn() {
let age = 24;
name = "jimin";
let height = 178;
function innerFn() {
age = 26; // age = 24;가 바뀜 (함수 안에서만 작용, 전역변수에는 영향없음)
let name = "suga"; // 지역변수
return height; // 178리턴 (안을 먼저 확인)
}
innerFn();
expect(age).to.equal(26);
expect(name).to.equal("jimin");
return innerFn;
}
const innerFn = outerFn(); // outerFn() 실행해서 리턴값을 반환 !!
expect(age).to.equal(27); // age = 24, age = 26은 지역변수이므로 {} 안에서만 효력이 발생하므로 x
expect(name).to.equal("jimin");
expect(innerFn()).to.equal(178);
});
});
백엔드 개발자