Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- lombok
- 오라클오류
- 서블릿용어
- @RunWith
- 타임존
- 롬복
- 자료구조
- jdbc연결안됨
- 서버기본
- 크리스탈레포트이미지
- fcmwebpush
- EC@
- git
- RequestBody
- api문서만들기
- 타임존설정
- 추상클래스
- IT기본지식
- 이미지누끼
- 스토리지기본
- openaddressing
- 크리스탈리포트이미지삽입
- ResponseBody
- 게시판댓글
- JDBC
- Ajax
- 크리스탈레포트누끼
- 크리스탈레포트그림
- import안될때
- 크리스탈리포트이미지
Archives
- Today
- Total
엠마의 개발공부일지
Javascript DOM 본문
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 : 해당속성 제거
스타일 입히기
- 선택자로 선택 후 .style.backgroundColor = '#DDDDDD'; 와 같이 지정
- 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