엠마의 개발공부일지

Javascript DOM 본문

Stack/etc

Javascript DOM

Emmababy 2021. 5. 6. 21:21
728x90

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메서드 사용가능)

 

728x90

'Stack > etc' 카테고리의 다른 글

[Flexbox]  (0) 2022.03.31
[Crystal Report] 크리스탈레포트에 이미지 삽입방법  (0) 2021.07.13
Web development with Node & Express  (0) 2021.04.26
화요일 공부  (0) 2021.04.06
promise  (0) 2021.04.05
Comments