인사말
오늘은 DOM에 대해 배운다 명절기간동안 푹 쉬어 재충전 하여서 이제 다시 공부를 시작하려 한다 출발해보자!
script
HTML에 JavaScript를 적용하기 위해서는 < script > 태그를 이용한다
< script src="myScriptFile.js">< /script>
웹 브라우저가 작성된 코드를 해석하는 과정에서 < script > 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈추고 < script > 요소를 먼저 실행한다
< script > 요소는 등장과 함께 실행된다 중요!!!
DOM
console.dir - DOM 구조를 조회, DOM을 객체의 모습으로 출력
console.dir(document.body) - document.body를 DOM 객체의 모습으로 출력
document.body.children - children 속성으로 바로 진입 자식 개수 확인 가능
document.body.children을 변수에 집어 넣을 수 있다.
ex)
let a = document.body.children[1]
실제사용
1.새로운 < div > 요소를 만든다.
document.createElement('div')
2.div element를 변수 tweetDiv 에 할당한다.
const tweetDiv = document.createElement('div')
3.append 라는 메서드를 사용해서, 변수 tweetDiv 를 < body > 에 넣는다
document.body.append(tweetDiv)
이렇게 해도 아직 아무것도 안뜬다 그냥 < div >< /div > 만 생성했기 때문이다.
이 < div >< /div >를 컨테이너에 넣기 위해 컨테이너를 찾아야 한다. 지금부터 찾는 방법을 알아보자
*** querySelector 에 '.tweet' 을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있습니다.
const oneTweet = document.querySelector('.tweet')
*** 여러 개의 요소를 한 번에 가져오기 위해서는, querySelectorAll 을 사용합니다
const tweets = document.querySelectorAll('.tweet')
4.container의 맨 마지막 자식 요소로 tweetDiv를 추가합니다
const container = document.querySelector('#container')
container.append(tweetDiv)
이렇게 해도 아직 아무것도 안뜬다 왜냐하면 twwetDiv로 들어가긴 했지만 div 사이에 아무 글자도 없기 때문에 들어가 있어도 보이지 않는 것이다.
앞서 배운 내용을 활용하여 실제로 글이 보이는 Update를 해보겠다.
1.oneDiv라는 이름의 < div > 요소를 만든다
const oneDiv = document.createElement('div'); // < div >< /div >
2.textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력한다
oneDiv.textContent = 'dev'; // < div >dev< /div >
3.CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가한다
oneDiv.classList.add('tweet') // < div class="tweet">dev< /div >
4.append를 이용해 container의 자식 요소로 추가한다
const container = document.querySelector('#container')
container.append(oneDiv)
삭제하는 법을 알아보자
container.append(tweetDiv) //이렇게 추가하고
tweetDiv.remove() // 이렇게 없앨 수 있다
마무리
오늘은 DOM의 기초와 유효성 검사를 하였다. 유형성 검사는 실제로 작동하는 웹 페이지의 조건을 작성하는 실습이였는데 페어분과 같이 풀었다. 내일도 풀어야 하니 유효성 검사에 대한 내용은 내일 작성하겠다
