20250311 데브코스 프론트엔드 Day6

March 11, 2025

💡 인사이트

onclick은 옛날 문법이긴 하다.

실무에서는 전체 선택자 써서 리셋시키면 안된다. 사용한 태그 모두 적어서 리셋해야 된다.

한가지 스타일 속성 적용할 때는 style.속성명 = "값";, 여러 스타일 적용할 때는 style.cssText = "값";

id는 고유하기 때문에 getElement 단수고, 나머지는 중복 가능하기 때문에 getElements 복수다.

getElements(복수)로 선택할 때는 객체로 반환되기 때문에 [idx]로 몇 번째 요소인지 알려줘야 됨.
ie. document.getElementsByClassName('myClass')[0]
document.getElementsByTagName('div')[2]

공백도 text 문자요소로 인식한다. 따라서 자식요소(.firstChild&.lastChild)를 찾을 때 #text(=공백)가 반환되기도 한다.

window.onload 이벤트 vs DOMContentLoaded 이벤트

window.onload 이벤트

모든 리소스(이미지, 스타일시트, 외부 스크립트 등)가 로드되고, DOM 트리가 완전히 구성된 후 실행됨.
모든 리소스가 다운로드되기를 기다리므로, 페이지 로딩 느릴 수 있음.

window.onload = function(){
  ...
};

DOMContentLoaded 이벤트

초기 HTML 문서가 파싱되고, DOM 트리 구성되는 시점에 실행됨.
이미지나 스타일시트 등의 외부 리소스 로딩을 기다리지 않기 때문에 속도가 빠름.

document.addEventListener("DOMContentLoaded",() => {
  ...
});

getElementById

아이디를 찾는다.

getElementsByTagName

태그를 찾는다.

getElementsByName

name 속성을 찾는다.
name은 img, a, form 같은 태그에만 들어간다.

createElement

createElement(‘태그명’) 새로운 요소(html) 생성

appendChild

appendChild(자식요소)의 부모요소에 자식요소 추가

setAttribute & getAttribute

setAttribute(‘속성명’, 값), 속성추가
getAttribute(‘속성명값’)

innerHTML & innerText & textContent

innerHTML : 텍스트 내용(요소)의 참조나 설정
innterText : 문자열의 참조나 설정
textContet : 텍스트 내용 참조

childNodes & children

parentNode

firstChild & firstElementChild

firstChild : 첫번째 자식요소를 찾음. 맨 처음 자식노드 참조.
firstElementChild : 첫번째 자식태그를 찾음. ie. ul

lastChild & lastElementChild

lastChild : 마지막 자식요소를 찾음.
lastElementChild : 마지막 자식태그를 찾음.

previousSibling & previousElementSibling

nextSibling & nextElementSibling

createElement & createTextNode & appendChild

createElement로 html 태그 만들고, createTextNode로 텍스트 생성하고, (html태그).appendChild(텍스트)로 html태그 사이에 텍스트 추가.

insertBefore

특정 부모 노드 내에서 지정한 자식 노드 바로 앞에 새로운 노드 삽입.
parentNode.insertBefore(newNode, referenceNode)

function element16(){
    let newNode = document.createElement('div');
    let newText = document.createTextNode('insertBefore, 입니다')
    console.log(newNode) //div
    console.log(newText) //insertBefore, 입니다
    newNode.appendChild(newText) // <div>insertBefore, 입니다</div>

    let newTags = document.getElementsByClassName('insertBefore')[0]
    newTags.insertBefore(newNode, newTags.childNodes[0]);
    //                 새로만든요소, 기준요소
    newNode.style.cssText = 'background: green; color: #fff; font-weight: bold';
}

hasAttribute

true나 false 반환

removeAttribute

지정된 속성 제거

append

생성된 노드를 요소가 끝나기 전에 삽입. 여러개의 노드와 문자열을 추가.

remove

DOM에서 아예 요소를 제거

classList

- add

클래스 추가

- remove

클래스 삭제

- toggle

클래스 없으면 추가, 있으면 삭제

- contains

true나 false 반환

- replace

기존 클래스 새로운 클래스로 대체

cloneNode

노드의 복사본을 만들고 복제본을 반환

querySelector & querySlectorAll

# 면 id, . 면 class
querySelector : 선택자와 일치하는 첫번째 가져옴
querySlectorAll : 전부 가져옴

템플릿 리터럴

`${변수명}`

data- 속성

data-로 시작하면 커스텀 속성을 만들 수 있다.
커스텀 속성을 사용해 자바스크립트에서 요소에 추가적인 데이터를 저장 및 읽기가 가능하다.

Reflow / Repaint

DOM 트리 생성
스타일 규칙 생성
렌더 트리 생성
레이아웃 (→ 리플로우)
페인트 (→ 리페인트)

💡 인사이트