쑥쑥자라기🌱

브라우저가 콘텐츠를 화면에 보여주기 위해서 HTML 문서를 해석할 때 DOM 객체가 만들어지는데 이 때 HTML 태그들이 가지고 있는 각각의 속성들은 요소 노드의 프로퍼티가 됩니다. 대부분의 HTML 속성들은 이름 그대로 요소 노드의 프로퍼티로 생성이 되는데요. 한 가지 주의해야 될 점은 모든 HTML 속성이 요소 노드의 프로퍼티로 생성되지는 않는다는 겁니다. tomorrow라는 id를 가진 ol 태그에 href 소성을 넣어뒀는데 사실 이 ol 태그에 href 속성을 추가하는 건 HTML 표준이 아닙니다. 그래서 tomorrow의 href 속성에 접근해보면 undefined가 출력되는 것을 확인할 수 있습니다. // HTML 속성(HTML attribute) const tomorrow = document..

노드를 삭제하거나 이동하는 방법에 대해서 살펴보겠습니다. 노드를 삭제하거나 이동하는 방법은 생각보다 간단한데요. 먼저 노드를 삭제하는 방법은 remove 메소드를 활용하는 겁니다. // 노드 삭제와 이동 const today = document.querySelector('#today'); const tomorrow = document.querySelector('#tomorrow'); // 노드 삭제하기: Node.remove(); tomorrow.remove(); today.children[2].remove(); 원하는 노드를 선택해서 remove라는 메소드를 호출하기만 하면 이렇게 내일 할 일의 목록이 모두 사라진 걸 확인할 수 있는데요. 만약 오늘 할 일의 세 번째 자식 요소 노드를 삭제하고 싶다면 ..

const today = document.querySelector('#today'); today.innerHTML = '처음' + today.innerHTML; today.innerHTML = today.innerHTML + '마지막' today.outerHTML = '이전' + today.outerHTML; const newToday = document.querySelector('#today'); newToday.outerHTML = newToday.outerHTML + '다음'; innerHTML과 outerHTML을 활용하면 문자열로 요소를 만들어서 태그 안쪽에 처음이나 마지막 아니면 태그 자체의 앞이나 뒤에 자유롭게 HTML 태그를 추가할 수가 있습니다. 그런데 innerHTML이나 outerHT..

HTML 문서를 객체로 표현한 DOM의 각 노드들은 정말 다양한 프로퍼티들을 가지고 있습니다. // 요소 노드 주요 프로퍼티 const myTag = document.querySelector('#list-1'); // innerHTML console.log(myTag.innerHTML); 첫 번째는 innerHTML이라는 프로퍼티입니다. 이 프로퍼티는 이름에서도 유추할 수 있듯이 요소 안에 있는 HTML 자체를 문자열로 리턴해주는데요. 한 가지 주의해야 되는 부분은 태그와 태그 사이의 줄바꿈이나 들여 쓰기 같은 부분들도 모두 포함된다는 점입니다. HTML 파일로 돌아가서 방금 출력한 부분을 표시해보면 Cat-1 Ragdoll British Shorthair Scottish Fold Bengal Siame..

요소 노드에 대한 이동 프로퍼티 프로퍼티유형결과 element.children 자식 요소 노드 element의 자식 요소 모음(HTMLCollection) element.firstElementChild 자식 요소 노드 element의 첫 번째 자식 요소 하나 element.lastElementChild 자식 요소 노드 element의 마지막 자식 요소 하나 element.parentElement 부모 요소 노드 element의 부모 요소 하나 element.previousElementSibling 형제 요소 노드 element의 이전(previous) 혹은 좌측(left)에 있는 요소 하나 element.nextElementSibling 형제 요소 노드 element의 다음(next) 혹은 우측(righ..

DOM(Document Object Model 문서 객체 모델 가장 바깥에 HTML 태그 안에 body 태그와 head 태그 그리고 head 태그 안에는 meta 태그와 title 태그, body 태그 안에는 h1, h2 태그와 script 태그 이렇게 태그 안에 태그 형태의 계층 구조를 이루고 있습니다. 그리고 이 계층 간의 관계를 부모 태그와 자식 태그라는 용어로 표현하는데요. 지난 시간에 살펴본 DOM도 이 HTML 문서를 객체화 한 것이기 때문에 document 객체를 최상위로 해서 똑같이 계층 구조를 이루고 이것을 나무에 비유해서 DOM 트리라고 표현합니다. 그리고 이 DOM 트리에서는 각 객체를 노드라는 용어로 표현하는데요. 그래서 각 노드 간의 관계를 부모 노드와 자식 노드, 같은 위치의 노..

대부분의 브라우저에 있는 개발자 도구는 console.log와 console.dir메소드를 지원합니다. 두 메소드 모두 파라미터로 전달받은 값을 콘솔에 출력하는 역할을 합니다. 과연 이 둘은 어떤 차이가 있을까요? const str = 'Codeit'; const num = 123; const bool = true; const arr = [1, 2, 3]; const obj = { name: 'Codeit', email: 'codeit@codeit.kr', }; function func() { console.log('I love Codeit!'); } console.log('--- str ---'); console.log(str); console.dir(str); console.log('--- num -..

DOM이란 Document Object Model의 약자로 한국어로는 문서 객체 모델입니다. 웹 브라우저 안에 나타나는 콘텐츠 부분을 웹 페이지라고도 부르지만 다르게는 웹 문서라고도 표현하는데요. 그래서 DOM을 간단하게 요약하면 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것이라고 생각하면 됩니다. 그리고 이미 사용해봤던 document 객체가 이 웹 문서의 최상단 객체로 진입점의 역할을 하는데요. 그래서 이 document 객체를 활용하면 웹 페이지의 내부에 무엇이든 수정할 수 있고 새로운 콘텐츠를 만들어 낼 수도 있습니다. 콘솔에 document 객체를 출력하면 윈도우 객체와는 다르게 HTML 태그가 출력이 되는데 typeof 연산자로 자료형을 확인해보면 object가 출력되지만 DOM..