어제 오늘 내일

NVM (Node Version Manager) GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active nod... github.com NVM은 여러 버전의 node를 설치해서 사용할 수 있도록 도와주는 도구입니다...

Javascript에서 노드 생성, 텍스트 생성, 추가, 변경, 삭제, 복사하는 방법을 정리하였습니다. 생성 createElement() createTextNode() 추가 before() after() prepend() append() insertAdjacentHTML() insertAdjacentElement() insertAdjacentText() appendChild() appencChild() vs appned() insertBefore() 변경 repaceWith() replaceChild() 삭제 remove() removeChild() 복사 cloneNode() 1. 생성 createElement() let element = document.createElement(tagName); cre..

javascript에서 dom의 요소(element)를 복사하여 붙여넣기 하는 방법입니다. cloneNode() dom의 노드(node)를 복사하는 함수입니다. var dupNode = node.cloneNode(deep); 이 함수는 node를 복사하여, 복사본을 리턴(dupNode)합니다. 파라미터 deep (optional) true/false 요소의 하위 요소까지 모두 복사하려면 true 요소의 하위 요소를 제외하고 복사하려면 false default : false 또는 true (최신 브라우저에서는 default 값이 false 이지만, 구형 브라우저에서는 default 값이 true입니다. 따라서, 이 값은 optional 이지만, 가능하면 파라미터 값을 명확하게 작성해 주는 것이 좋습니다. ..

특정 element에 자식 노드(node)가 존재하는지, 자식 요소(element)가 존재하는지 확인하는 방법입니다. 자식 노드(node) 존재 여부 확인 자식 요소(element) 존재 여부 확인 시작하기 전에! node와 element의 차이가 궁금하다면? [Javascript] node와 element의 차이 Javascript에서 DOM을 다루다 보면 node와 element가 자주 등장합니다. 이 2가지를 다루는 방법이 조금 달라서 헷갈리는 경우가 많은데, 이번 포스팅에서는 node와 element의 차이점을 정리해 보도록 하겠 hianna.tistory.com 자식 node, 자식 element를 탐색하는 방법이 궁금하다면? [Javascript] 부모, 자식, 형제 노드(node)와 요소(e..

지난번에는 node와 element의 차이에 대해서 정리해보았습니다. 이번에는 dom에서 부모, 자식, 형제 노드(node)와 요소(element)를 탐색하는 방법을 정리해 보도록 하겠습니다. node 탐색 부모(parent) 노드 자식(child) 노드 형제(sibling) 노드 element 탐색 부모(parent) 요소 자식(child) 요소 형제(sibling) 요소 1. node(노드) 탐색하기 dom은 node의 계층 구조로 이루어져 있습니다. 따라서, node에는 element, text, comment 등 여러 항목이 포함되어 있다는 것에 주의하세요. node의 부모, 형제, 자식은 아래 표와 같은 속성을 통해 접근할 수 있습니다. 부모(parent) 노드 탐색 parentNode : 부모..

Javascript에서 DOM을 다루다 보면 node와 element가 자주 등장합니다. 이 2가지를 다루는 방법이 조금 달라서 헷갈리는 경우가 많은데, 이번 포스팅에서는 node와 element의 차이점을 정리해 보도록 하겠습니다. node vs element DOM 문서는 node의 계층 구조로 이루어져 있습니다. 이 node는 여러 가지 다양한 유형이 존재합니다. 요소(element), 텍스트, 주석 등등... element는 이러한 node의 여러가지 유형 중 한 가지입니다. 위 그림과 같이 element는 여러 가지 node의 유형 중 한 타입입니다. 즉, node는 element의 상위 개념입니다. 좀 더 자세히 설명하면, element는 html 문서에서 , , 과 같은 태그를 사용해서 작성..

태그 안에 있는 내용을 읽고, 추가하고, 변경하고, 삭제하는 방법을 정리해보았습니다. 1. div 내용 가져오기 2. div 내용 변경 3. div 내용 추가 4. div 내용 삭제 1. div 내용 가져오기 안녕하세요? Javascript에서 div element에 접근하여, div 안의 내용을 읽을 때는 다음 3가지 속성을 사용할 수 있습니다. element.innerHTML element 안의 HTML, XML을 읽습니다. element.innerText element 안의 텍스트를 사용자에게 "보여지는 대로" 읽습니다. node.textContent node 안의 텍스트를 (, 에 상관없이) 읽습니다. 위 3가지 속성의 차이점은 지난 포스팅을 참조하세요. [Javascript] innerText와..

DOM 노드의 타입을 체크하기 위해서는 nodeType 프로퍼티를 사용합니다. nodeType 프로퍼티 var type = node.nodeType; nodeType은 node의 type을 상수로 리턴합니다. 리턴 상수 타입 예제 1 element , 3 text Hello 4 CDATASection 7 ProcessingInstruction 8 Comment 9 Document document 10 DocumentType 11 DocumentFragment 예제 안녕하세요? let elem = document.getElementById('sample'); const docuType = document.nodeType; const divType = elem.nodeType; const textType =..