DOM 적용해보기 앞서 배운 DOM을 통해 HTML를 DOM으로 적용하여 변경해 봅시다. (Create / Read / Update / Delete / Append) Enter your name: Enter your title: Your question: 하하호호 kimcoding / 2023-05-01T14:08:33Z ☑ // example // 위의 html code를 javascript DOM형식으로 변경합니다. // data.js에서 데이터를 받아 contentData로 보냅니다. // // data.js의 예시 // const contentData = [ // { // id : 'id값', // createdAt: '작성날짜', // title: '질문의 제목', // url: '하이퍼 링크'..

DOM 활용 (CRUDA) DOM의 기초적으로 활용하기 위해서 Create (생성) / Read (읽기) / Update (갱신) / Delete (삭제) / Append (적용) 하는 법을 알아보겠습니다. 생성 (Create) // createElement const oneDiv = document.createElement('div'); // oneDiv 변수에 tag를 생성한다. console.log(oneDiv); // // createTextNode const textNode = document.createTextNode('Banana'); 읽기 (Read) // querySelector // 입력한 선택자와 일치하는 문서 내의 첫 번째 요소를 반환한다. // 일치하는 요소가 없다면 null을 반..

DOM (문서 객체 모델) 이란? (Document Object Model) DOM 구조 자바스크립트의 DOM은 트리구조를 띄고 있습니다. // 트리 자료구조 (tree data structure) 트리 자료구조는 노드들의 계층 구조로 이루어진다. 즉, 트리 자료구조는 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조(부자, 형제 관계)를 표현하는 비선형 자료구조를 말한다. 트리 자료구조는 하나의 최상위 노드에서 시작한다. // 루트 노드 (root node) 최상위 노드를 말하고, 최상위 노드는 부모 노드가 없다. 루트 노드는 0개 이상의 자식 노드를 갖는다. // 리프 노드 (leaf node) 자식 노드가 없는 노드를 말한다. HTML 요소를 JavaScript의 Object처럼 조작할 수 ..