DOM(Document Object Model)
-
HTML 문서의 태그들을 객체로 생성하고 객체들의 관계(상/하위) 에 따라 트리 자료구조로 구성한 객체
-
document 객체는 window 객체의 하위 객체로 DOM 트리의 가장 최상위 객체
-
HTML 태그(요소)를 노드라고 한다.
BOM은 브라우저 제어(새로고침등)
DOM은 HTML(HEAD, BODY, 등등의 태그들에 접근)제어문서 객체 가져오기
-
HTML 문서에 당연히 있는 내용들을 태그별로 가져올 수 있다.
document.head; document.title; document.body;id로 검색
-
태그의 속성 id 속성 값을 이용해서 객체를 가져온다.
document.getElementById("아이디");class로 검색
-
태그의 class 속성 값을 이용해서 객체를 배열에 담아 가져온다.
-
동일한 class 속성 값을 갖는 태그가 여러개 존재할 수 있기 때문에 배열로 리턴
document.getElementsByClassName("클래스");name으로 검색
-
태그의 name 속성 값을 이용해서 객체를 배열에 담아 가져온다.
-
동일한 name 속성 값을 갖는 태그가 여러 개 존재할 수 있기 때문에 배열로 리턴
document.getElementsByName("이름");태그로 검색
-
태그명을 이용해서 객체를 배열에 담아 가져온다.
-
동일한 태그가 여러 개 존재할 수 있기 때문에 배열로 리턴
documnet.getElementsByName("태그");위 5가지 보다 'CSS 선택자를 이용'해서 검색 많이 사용함
-이걸로 위 다섯가지를 대체함.CSS 선택자를 이용해서 검색
document.querySelector("선택자"); document.querySelectorAll("선택자");
문서 객체 조작하기
textContent, innerHTML
-
textContent : 문서 객체 내에 문자 그대로 넣는다.
-
innerHTML : HTML 형식으로 넣는다.
문서객체.textContent 문서객체.innerHTMLsetAttribute, getAttribute
-
setAttribute : 문서 객체의 속성을 추가하거나 수정할 때
-
getAttribute : 문서 객체의 속성을 가져올 때
-
data-xxx : data-로 시작하는 표준 커스텀 속성. data-index, data-id, data-role 등 data-의 형식으로 시작하면 어떤 속성이든 필요에 따라 임의로 추가할 수 있다.
문서객체.setAttribute(속성이름, 값)
문서객체.getAttribute(속성이름)style 조작
-
문서 객체의 스타일을 조작할 때는 style로 접근할 수 있다.
-
style 속성은 - 기호 대신 캐멀 케이스로 사용
ex. background-color => backgroundColor문서객체.style.속성 = "값"
classList
- 사실 스타일을 조작할 때 style로 접근하는 방식보다 미리 클래스에 스타일을 지정하고 classList로 조작
- contains : 해당 클래스명 유무를 체크하는 역할
(if문이랑 같이씀) - toggle : 있다면 삭제, 없다면 추가를 알아서 해줌
문서객체.classList.add("클래스명");
문서객체.classList.remove("클래스명");
// contains 다크모드 만들때 사용
문서객체.classList.contains("클래스명");
문서객체.classList.toggle("클래스명");문서 객체 추가하기
- createElement로 문서 객체를 생성
- appendChild로 부모 객체에 자식 객체를 추가
const 자식객체 = document.createElement(문서객체이름); // 태그
부모객체.appendChild(자식객체);문서 객체 삭제하기
- 부모 객체에서 자식 객체를 삭제할 수 있다.
- 만약 부모 객체에 접근해야 한다면 parentNode를 사용한다.
부모객체(문서객체.parentNode).removeChild(자식객체)// EX)
<div id="testId" class="testClass" name="testName">
Hello, World!
</div>
<div id="testId2" class="testClass" name="testName">
Hello, JavaScript!
</div>CSS 선택자를 이용해서 검색
let div = document.querySelector("#testId");
div = document.querySelector(".testClass");
-> 클래스가 2개지만 querySelector쓰면 맨 첫번째 것만 가져옴
console.log(div);
let divList = document.querySelectorAll("div");
// 모두 가져옴
console.log(divList); -
querySelector쓰면 맨 첫번째 클래스만 가져옴
-
querySelectorAll쓰면 클래스 두개 다 가져옴
classList -contains 홈페이지 다크모드 만들때 사용할 수 있다.
// EX)
-html 작성
<head>
<style> -다크모드 스타일 설정
.black{
background-color: black;
color: white;
}
</style>
</head>
<body>
<button onclick="btn12()">contains</button> -contain버튼생성
<div id="testId" class="testClass" name="testName">
Hello, World!
</div>
<div id="testId2" class="testClass" name="testName">
Hello, JavaScript!
</div>
<body>-위 html에 해당되는 js 작성
function btn12(){
const div2 = document.querySelector("#testId2");
const check = div2.classList.contains("black");
console.log(check);
if(check){
div2.classList.remove("black");
}else{
div2.classList.add("black");
}
}-> querySelector 를 사용하여 아이디testId2 를 긁어와 div2에 담는다.
-> 객체.classList.contains를 사용하여 black이 포함되어 있으면 true를 반환, 없으면 false반환
-> contains는 if문과 함께 씀
-> 조건을 걸서 check가 true이면 black(다크모드)이 포함되어 있기 때문에 remove 사용하여 black지움
check가 fale이면 black이 없기 때문에 add 사용하여 black추가
=> 여기서 toggle을 사용할 수도 있다.
toggle : 있다면 삭제, 없다면 추가를 알아서 해줌
const div2 = document.querySelector("#testId2");
div2.classList.toggle("black");