1. DOM
DOM : Document Object Model. HTML 요소를 JavaScript Object 처럼 조작할수있는 모델이다.
DOM을 사용해 HTML로 구성된 웹페이지를 동적으로 움직이게 할 수있다.
1) HTML에 JavaScript 적용하기
<script src="../index.js" /><script> 태그를 사용한다.
<script> 태그는 등장과 함께 실행된다. 웹 브라우저는 작성된 코드를 해석하다 <script> 요소를 만나게 될때 HTML 해석을 멈추고 <script> 요소를 먼저 실행한다.
(1) <script>를 <head> 안쪽에 삽입하는 경우
브라우저가 코드를 순서대로 읽다가 html요소를 읽기 전에 script 요소를 읽고 html 해석을 잠시 멈추게 된다.
script 요소에는 html 요소를 콘솔로 출력하는 코드가 있지만 현재 html은 아직 해석되지 않은 상태이다.
따라서 출력할 요소를 찾을 수 없기 때문에 오류가 발생할수있다.
(2) <script>를 </body> 위에 삽입하는 경우
브라우저가 코드를 순서대로 읽고 모든 HTML 요소를 읽은 다음 script를 요소를 읽게 된다.
HTML 코드를 모두 읽고 script 파일을 실행하기 때문에 사용자는 화면의 콘텐츠를 빨리 볼수 있다.
하지만 HTML 코드가 JS에 의존적인 코드일 경우, scirpt 요소의 다운로드가 늦어지면 사용자가 아직 미완성된 콘텐츠를 보게 될 수 있다.
2) 자식요소 찾기 / 부모요소 찾기
💡 console.dir
DOM을 객체의 모습으로 출력한다. DOM 구조를 조회할때 유용하다.
(1) 자식 요소 찾기
document.body.children
자바스크립트의 DOM은 document 객체에 구현되어 있다.
브라우저에서 작동되는 자바스크립트 코드는 document 객체를 조회할수있다.
어떤 요소의 자식 요소를 찾고 싶을 경우, .children 메서드로 요소의 자식요소를 찾을 수 있다.
(2) 부모 요소 찾기
Node.parentElement
❓ parentElement와 parentNode의 차이
- parentElement : 노드의 부모요소를 반환한다. 부모가 없거나 부모가 DOM 요소가 아닐경우 null을 반환한다.
- parentNode : 부모 노드를 반환한다.
DOM은 트리구조로 구성되어있다.
트리 구조의 특징은 부모는 하나이고, 부모는 자식이 여러개 있다는 것이다.
그러므로 DOM을 다룰때에는 자식요소와 부모요소를 찾는 방법을 잘 알아야 한다.
2. DOM으로 CRUD 하기
1) Create - Append
(1) Create
document.createElement('html 요소')html 요소를 추가하기위한 메서드. 사용시 아무 효과가 나타나지 않는 것처럼 보일 수 있는데, 이것은 요소가 단지 생성만 되었기 때문이다. 요소를 나타나게 하기 위해서는 Append(추가)하는 것이 필요하다.
(2) Append
document.추가요소가 들어갈 요소.append('추가할요소')textContent 활용해서 문자열 추가가 가능하다.
2) Read
document.querySelector()
document.querySelectorAll()
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()querySelector
: 파라미터로 css 선택자를 입력받고, 찾은 element중 첫번째 element를 리턴. 선택자를 콤마로 구분하여 전달할 경우 여러개의 선택자중 첫번째로 발견되는 element를 리턴.
querySelectorAll
: 파라미터로 받은 css 선택자로 찾은 모든 element 목록을 리턴한다. 콤마로 구분한 문자열을 넘겨주면 각각의 선택자에 해당하는 모든 element를 리턴한다. 이때, 리턴되는 요소들은 배열처럼 사용할수있지만 배열은 아니다. 이것을 유사배열 또는 배열형 객체(Array-like Object)라고 한다.
document.getElementById()
: id로 요소찾기. id는 유일한 값이므로 하나의 element만 리턴
document.getElementsByClassName()
: class로 요소찾기. 해당 클래스를 가지는 모든 element의 목록을 리턴. 다수의 클래스를 찾을때는 스페이스로 클래스이름을 구분한다.
document.getElementsByTagName()
: 태그 이름으로 요소찾기. 해당 태그를 가지는 모든 element의 목록을 리턴.
사용시에는 가급적 querySelector과 querySelectorAll을 사용한다.
3) Update
// Class 관련
.classList // 클래스 리스트 조회
.classList.add() // 클래스 추가
.classList.remove() // 클래스 삭제
.classList.item() // 인덱스를 이용해 클래스 반환
.classList.toggle() // 클래스가 있을경우 제거, 없을 경우 추가
.classList.contains() // 지정한 클래스가 존재하는지 확인
.classList.replace(A, B) // A를 B로 교체
// 속성 설정
element.setAttribute('속성이름', '속성값') // 속성 추가
element.removeAttribute('속성이름', '속성값') // 속성 삭제
4) Delete
element.remove()
element.innerHTML() = '';
element.removeChild(element)innerHTML의 경우 보안과 관련된 문제가 있기 때문에 removeChild()를 사용하는 것을 권장한다.
********
DOM 관련된것들 공부...
일단 콘솔 다루는게 좀 헷갈린다
그래서 이것저것 죄다 찍어보면서 공부하는 중
그리고 node라는게 정확히 뭔지 element랑은 어떻게 구분되는지 조금 더 공부해야할거같다.
메서드는 너무 많고 다 외울순 없으니까 일단 자주 사용된다고 하는 것들 위주로 익히고 나머지는 검색해가면서 계속 시도해볼라구
오늘은 딥다이브 객체부분도 공부했으니까 정리해야하는데,, 아마 내일할듯
'study > TIL' 카테고리의 다른 글
| 23.01.12 - 고차 함수, filter, map, reduce (0) | 2023.01.12 |
|---|---|
| 23.01.08 - 유효성 검사, 이벤트 객체 (0) | 2023.01.08 |
| 23.01.04 - 복습 및 추가 보완 (0) | 2023.01.04 |
| 23.01.03 - 클로저, spread/rest 문법, 구조 분해 할당 (0) | 2023.01.03 |
| 23.01.02 - 원시 자료형과 참조 자료형, 스코프 (0) | 2023.01.02 |
