html에 접근
document.documentElement
body에 접근
document.body
style에 접근
documetn.body.style
id에 접근
document.getElementById('')
모든 p 태그에 접근
document.getElementsByTagName('')
개수
.length
pList는 for of로 순회 가능
<p태그의 폰트 사이즈를 30px>
for(p of pList) {
p.style.fontSize = '30px';
}
<p태그의 투명도를 랜덤하게>
for(p of pList) {
p.style.opacity =String(Math.random());
}
getElementsBy
를 이용해 클래스 네임이나, 네임으로도 노드에 접근 O
document.getElementsByClassName()
document.getElementsByName()
문서 객체 선택
document.querySelectorAll()
document.querySelector()
두 번째 h3를 찾기
document.querySelector('h3:nth-of-type(2)');
짝수 번째 p만 찾기
const pList = document.querySelectorAll('p:nth-of-type(2n)')
querySelectorAll
과 getElementsByTagName
의 차이
querySelectorAll
getElementsByTagName
부모노드 접근
red.parentNode
red.parentElement
node type (자주 사용하는 것)
Node.ELEMENT_NODE (1)
<p>
or <div>
.Node.ATTRIBUTE_NODE (2)
Node.TEXT_NODE (3)
Node.COMMENT_NODE (8)
<!-- … -->
.Node.DOCUMENT_NODE (9)
자식 노드 접근
.childNodes
.children
형제 노드 접근
형제노드
형제 노드 중 모든 타입을 가져오기
.previousElementSibling
.nextSibling
형제 노드 중 요소 노드만
.previousElementSibling
.nextElementSibling
텍스트 노드의 정보
.nodeName
.nodeType
.nodeValue
: 텍스트 노드만 이를 통해 텍스트 수정 가능
.textContent
.innerHTML
사용요소 만들기
document.createElement('li')
노드의 자식 만들기
.appendChild()
innerHTML
사용하지 않고 만들기
const newLi2 = document.createElement('li');
const newText = document.createTextNode('pink');
newLi2.appendChild(newText);
ul.appendChild(newLi2)
원하는 곳에 삽입하기
.innerBefore(넣을 것, 어떤 거 앞에 넣을지)
복제
.cloneNode
(true)
삭제
.removechild
innerHtml
vs innerText
.className
(사용 잘 X)
.className = 'bg-red';
클래스 이름 반환
.classList
ClassList
클래스 추가
.classlist.add()
제거
.classlist.remove
변환
.classlist.replace( , )
setInterval(()=> {
box.classList.tolglle('bg-red');
}, 1000)
<button onclick="alert('click')">클릭</button>
<button onclick="sayHello()">클릭2</button>
<button id="btn">클릭3</button>
<button id="btn2">클릭4</button>
function sayHello() {
alert("Hello");
}
const el = document.getElementById("btn");
el.onclick = sayHello;
const el2 = document.getElementById("btn2");
el2.addEventListener("click", sayHello);
addEventListener()
이벤트 버블링
자식요소에서 발생된 이벤트 객체는 부모와 그 부모를 통해 전파
하위요소에서 상위요소로 더 이상 부모가 없을 때까지 이벤트가 거슬러 올라 감
(버블과 비슷)
버블링이 안되는 것도 있음
버블링하게 하고 싶으면
event.target
event.currenttarget