어제 오늘 내일

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에서 특정 부모 노드가 가지는 특정 자식 노드를 찾는 방법입니다. 부모 노드를 선택합니다. 부모 노드에서 특정 자식 노드를 선택합니다. 부모 노드를 선택하거나, 특정 자식 노드를 선택할 때 getElementById(), getElementsByClassName(), querySelector() 등의 노드 선택 함수를 사용할 수 있습니다. 노드를 선택하는 방법은 지난 포스팅을 참조하세요. [Javascript] 선택자, DOM 특정 요소(element) 찾기 Javascript에서 DOM의 특정 요소(element)를 찾는 방법을 정리합니다. 1. getElementById() 2. getElementsByClassName() 3. getElementByTagName(..

childElementCount DOM에서 Javascript를 이용하여 자식 요소(element)의 개수를 확인하기 위해서 Element의 childElementCount 속성을 사용할 수 있습니다. ParentNode.childElementCount childElementCount는 요소의 자식 요소(child element) 개수를 리턴합니다. (단, 이 속성은 IE9 이전 버전에서는 지원하지 않습니다.) 예제 바나나 사과 ======== 결과 ======== // parent element 선택 const parent = document.getElementById('parent'); // childElementCount 값 찍기 document.write(parent.childElementCoun..

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..