자바스크립트 - DOM

 

 

DOM 은 Document Object Model 의 약자

즉 HTML 요소를 Object 처럼 조작할수 있는 Model임

 

특정 요소의 스타일을 변경하거나 요소를 추가 제거 등등 동적으로 움직이게 만들수 있음

1. 자바스크립트

2. 제이쿼리 - 호환성이 너무 떨어짐

두가지 방법으로 사용가능함!

 

동적?

 

html 파일에서 스크립트를 위에서 부르면 스크립트 안에서 작성한 요소가 없다고 판단을 하기에 (동기) 작동을 안함

단 스크립트 안에 defer 속성을 추가 하면 페이지가 모두 로드가 된 후에 스크립트가 작동함

 

요소를 알아보는 예시)

document.body.children -> body 안에 있는 자식요소를 알수 있음

document.body.children[0] -> 0번째 자식 요소를 가지고 있는 요소

 

 

1. CREATE

2. APPEND

3. READ 

4. UPDATE

5. DELETE

 

돔을 제어하는 다양한 예시

const tweetDiv = document.createElement('div');

아직 화면에는 나타나지 않음! 만들기만 했음

 

document.body.append(tweetDiv);

-> 요소 맨 아래에 빈 div 태그 추가!

 

tweetDiv.classList.add("tweet")

-> tweetDiv  변수 안에 있는 div 태그에 tweet 클래스 추가

주의할점 클래스를 추가 할떄 . 기호 쓰지 않게!!!!

 

tweetDiv.remove();

-> html 안에 있는 요소 화면에서 제거

 

const oneTweet = document.querySelector(".tweet")

-> tweet 클래스를 가진 요소중 제일 앞에 있는거 가져옴

 

const tweets = document.querySelectorAll(".tweet")

-> tweet 클래스를 가진 모든 요소를 NodeList 로 가져옴

 

newTweet.textContent = "spring"

-> 요소안에 텍스트 추가함

-innerHTML 사용은 가능하지만 사용하지 않는것이 좋음!!!!!!!!

 

newTweet.setAttribute("id","newTweet")

-> 속성 제어로 아이디 값 추가!

 

containerTweet.removeChild(containerTweet.firstChild);

-> container 안에 들어가 있는 첫번째 요소 삭제

 

while(container.firstChild){
        container.removeChild(container.firstChild)
 };

-> 반복문으로 요소를 한번에 제거!

 

 

이벤트 - addEventListener 로 사용!

 

 

 

 

※ctrl + R 은 관리자 모드 콘솔에 있는 모든거 초기화※