0. DOM이란?
-HTML 문서 요소의 집합!
-HTML 문서는 각각의 node와 object의 집합으로 문서를 표현한다.
-따라서 각각 node 또는 object에 접근하여 문서 구조 / 스타일 / 내용등을 변경할 수 있도록 하는 것!
- HTML 태그 이름(tag name)을 이용한 선택
- 아이디(id)를 이용한 선택
- 클래스(class)를 이용한 선택
- name 속성(attribute)을 이용한 선택
- CSS 선택자(selector)를 이용한 선택
- HTML 객체 집합(object collection)을 이용한 선택
1. querySelector
querySelector란? "요소 선택자"
요소 선택자를 사용해 자신이 가져오고 싶은 요소를 가저오는 메소드
html에 class 이름이 box인 엘리먼트를 가져오려는 상황이라면
const boxEl = document.querySelector(".box");document.querySelector를 작성하고 괄호안에 ""을 작성후 클래스 선택자인 .을 붙여 가져온다.
2. getElementById
getElementById란? 엘리먼트에 선언된 해당 ID를 가지는 요소를 불러오는 메소드
const boxEl = document.getElementById("box");document.getElementById를 작성후 괄호안에 아이디 이름을 작성한다.
여기선 ID자체를 불러오는 방법이라 #을 작성하지 않아도 불러올 수 있다.
3. classList(add/remove/contains)
classList란? 선택 요소에 class를 더하거나, 뺴거나, 클래스가 존재하는지 체크하는 메소드
classList 뒤에 add / remove /contain을 붙여 사용할 수 있다.
add -> 요소를 추가한다
remove -> 는 해당 요소를 삭제한다
containes -> 은 해당 요소를 찾아달라는 메소드다
//boxEl 이라는 변수는 box라는 클래스를 요소를 담았다.
const boxEl = document.querySelector(".box");
//요소의 클래스 정보 객체 활용해보자
boxEl.classList.add("active");
//boxEl(.box)뒤에 active를 추가한다.
let isContains = boxEl.classList.contains("active");
//isContains라는 변수를 만들어 boxEl(.box)에 active가 있는지 알려주세요.
console.log(isContains); // true 있다.
boxEl.classList.remove("active");
//boxEl(.box)뒤에 active를 삭제한다.
isContains = boxEl.classList.contains("active");
//isConains라느 변수를 만들어 boxEl(.box)에 active가 삭제되어 있는지 알려주세요.
console.log(isContains) //false 없다.4. setAttribute
setAttribute란? 선택한 요소의 속성 값을 바꿀 수 있는 메소드
setAttribute("속성명","지정할 속성");const boxEl = document.querySelector(".box"); boxEl.setAttribute("style","background-color:black"); boxEl.setAttribute("style","font-size:200px");여기서 중복으로 setAttribute를 사용할경우 마지막에 선언된 setAttribute속성으로 변경된다.
5.innerHTMl / innerText
5-1.innerHTML
innerHTML이란? Element속성으로 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다.
HTML이나 XML을 가져온다.
5-3.innerText
innerText란? innerHTMl 과 다르게 해당 Element 내에서 사용자에게 보여지는 텍스트 값을 읽어온다. 또한 사용자가 보이는 상태 style등 마크업 언어가 적용된 상태d이다.
5-4. innerHTML vs InnerText
//ex1
let box1El = document.querySelector(".box1");
let box2El = document.querySelector(".box2");
box1El.innerHTML = "<button>test</button>"; //실제 마크업된 버튼이 출력
box2El.innerText = "<button>test</button>"; //<button>test</button> 코드 그대로 출력다른 예시도 살펴보자.
<div id ="test">반갑습니다. <span>하하<span></div>//javascript
document.getElementById("test").innerHTMl;
document.getElemeneById("test").innerText;innerHTML
안녕하세요 <span>ㅎㅎ<spna>HTMl구조까지 모두 가져온다.
innerText
안녕하세요 ㅎㅎ사용자에게 보이는 텍스트 값만 가져온다. 텍스트 복붙한 느낌적인 느낌
6. textContent
textContent란? 노드와 그 자손의 텍스트 콘텐츠를 모두 표현한다.
let boxEl = document.querySelector(".box");
console.log(boxEl.textContent); // 1 출력
boxEl.textContent = "KDT"; //boxEL 값 1을 -> KDT 로 내용을 변경하겠다.
console.log(boxEl.textContent); //KDT 출력6-1. textContent vs innerText 차이점
<div id="box">
<style>#box{color:red;}</style>
<span>안녕 반갑습니다.</span>
<p style="display:none;">디스플레이 none</p>
</div>textContent는 눈에 보이지 않는 값까지 반환하고,
innerText는 눈에 보이는것만 반환한다.
console.log("textContent:",box.textContent);
console.log("innerTentx:",box.innerText);
textContent:
#box{color:red;}
안녕 반갑습니다.
디스플레이 none
innerText:안녕 반갑습니다.7.createElement
createElement란? Html DOM 요소를 만들어내는 메소드
const liEl = document.createElement("li"); const boxEl = documetn.createElement("div");
8.append, appendChild
특정 DOM 요소에 다른 요소를 자식으로 붙이는 메소드
DOM요소.append(추가할 내용)
DOM요소.appendChild(추가할 요소)
append()는
1. append node와 String을 전부 추가할 수 있다.
2. append 는 여러가지 값을 한번에 붙일 수 있다.
3. append 는 반환(리턴) 값이 없다.
appendChild()는
1. appendChild는 Node만 추가할 수 있다.
2. appendChild는 한 번에 하나만 추가 할 수 있다.
3. appendChild는 추가한 Node를 반환(리턴)한다.
9. prepend
prepend란? prepend는 append와 반대로 부모노드의 첫번째 요소를 추가한다.
10. remove
remove란? 선택한 DOM을 지우는 메소드
const list = document.querySelector(".list");
console.log(list.remove); //list클래스 삭제11. parentNode
parentNode란? DOM 요소의 부모 노드를 가져오는 메소드 "부모님 모셔와^^"
[노드 접근]
parentNode : 부모 노드
childNodes : 자식 노드 리스트
firstChild : 첫 번째 자식 노드
lastChild : 마지막 자식 노드
nextSibling : 다음 형제 노드
previousSibling : 이전 형제 노드
12. childNodes
childNodes란? DOM요소의 자식 요소를 전부 확인하는 메소드
childNodes는 엔터까지도 공백까지도 모두 반환해서 보여준다.
<ul>
<li>1</li>
<li class="list">2</li>
<li>3</li>
<li>4</li>
</ul>const list = document.querySelector("ul"); console.log(list.childNodes);
13. children
children란? DOM 요소의 자식 노드만을 확인하는 메소드
const list = document.querySelector("ul"); console.log(list.children);
14. onclick
onclick란 HTML요소에 속성 값으로 Js함수를 연결한다.
<body> <div class="box" onclick="test();">click</div> </body>function test() { alert("TEST"); }
15.AddEventListener
AddEventListener란? 선택 요소에 지정한 이벤트가 발생하면, 약속 된 명령어를 실행시키는 메소드
let boxEl = document.querySelector(".box");
//boxEl로 박스를 선택하고
boxEl.addEventListener("click", function() {
alert("click!");
})
//클릭이벤트를 발생시켜 boxEl 을 클릭하면 모달창에 click!을 뛰운다.AddEventListener 종류
• Click : 클릭
• Mouse 계열
• Mouseover : 요소에 커서를 올렸을 때
• Mouseout : 마우스가 요소를 벗어날 때
• Mousedown : 마우스 버튼을 누르고 있는 상태 • Mouseup : 마우스 버튼을 떼는 순간
• Focus : 포커스가 갔을 때
• Blur : 포커스가 벗어나는 순간
• Key 계열
• Keypress:키를누르는순간+누르고있는동안계속발생
• Keydown:키를누르는순간에만발생 • Keyup:키를눌렀다가떼는순간
• Load : 웹페이지에 필요한 모든 파일(html, css, js 등)의 다운로드가 완료 되 었을 때
• Resize : 브라우저 창의 크기가 변경 될 때
• Scroll : 스크롤이 발생할 때
• Unload : 링크를 타고 이동하거나, 브라우저를 닫을 때
• Change:폼필드의상태가변경되었을때
