Javascript DOM

DOM(Document Object Model)

 : HTML문서를 객체로 표현한것

 : 브라우저가 HTML문서를 읽고, 해석할 때 DOM객체가 만들어 진다

 

 

JS로 HTML태그 제어하기

• 요소 노드 생성 : const li = document.createElement("li");
• 생성된 노드에 내용추가 : li.textContent = '글자추가';
• 요소 노드 추가 : head.prepend(li);    -(queryselector사용한 변수)
•   ✔.prepend : 맨 앞에추가
•   ✔.append : 맨 뒤에추가
•   ✔.before : 앞에 추가
•   ✔.after : 뒤에추가

 

HTML 속성 제어

📌HTML의 각 tag들은 요소노드의 프로퍼티가 됨

⭐예외 : HTML표준이 아닌속성(ex-href)

• .getAttribute : 속성에 접근가능
• .setAttribute : 처음이면 속성추가, 이미 있다면 속성수정
• .removeAttribute : 해당속성 제거

 

 

스타일 입히기

1. 선택자로 선택 후 .style.backgroundColor = '#DDDDDD'; 와 같이 지정
2. className(전체클래스에 스타일), classList(add, remove, toggle메서드 사용가능)