[1분코딩] 자바스크립트 기초 - DOM

1분 코딩 자바스크립트 기초 강의 Part 3 정리

 

※ 이번 내용은 개발할때 자주 쓰는 것들이므로 꼭 알아둘것!!

◆ DOM (Document Object Model)

→ 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법

 

◆ DOM 요소에 접근하는 여러가지 방법

① querySelector("선택하고자하는 태그");

→ 선택하고자 하는 태그가 여러개이어도 첫번째 태그만 선택함

 

 

② querySelectorAll("선택하고자하는 태그");

→ 선택하고자 하는 태그가 여러개일 경우 모두 선택함

→ 배열처럼 되어있으므로 그 중 하나를 선택할꺼면

   querySelectorAll("선택하고자하는 태그")[1]; 이런식으로 사용하면 됨

 

◆ classList

① classList.add("추가하고 싶은 클래스명");

→ 클래스를 추가 생성

 

② classList.remove("제거하고 싶은 클래스명");

→ 클래스를 제거

 

③ classList.contains("확인하고 싶은 클래스명");

→ true/false로 클래스의 존재여부를 확인해줌

 

◆ HTML 태그 속성을 가져오거나 수정하는 함수

① getAttribute("속성명");

→ 속성의 정보를 가지고 옴 

→ 리턴값이 있는 함수

 

② setAtteribute("속성명","바꾸고싶은 내용");

→ 속성을 변경할때 사용

→ 리턴값이 없는 함수

 

 

◆ 태그를 자바스크립트로 넣고 싶을때

//li를 생성해서 sample에 넣고
var sample = doucument.createElement("li");

//그 안에 텍스트를 넣고 조립(위치선정)은 따로 해야함
sample.innerHTML="<h1>추가문구</h1>";

//위에서 생성한 태그 삽입하기
//상위태그에서 해야함
sample-mom.appendChild("sample");