어제 오늘 내일

Javascript를 사용하여 특정 노드의 모든 자식 노드를 삭제하는 방법입니다. innerHTML, textContent replaceChildren() removeChild(), remove() 1. innerHTML, textContent innerHTML 자식노드1 자식노드2 function remove_children() { // 부모 노드 선택 const parent = document.getElementById('parent'); // 자식 노드 삭제 parent.innerHTML = ""; } parent.innerHTML = ''; innerHTML 속성을 이용하면 element 안에 포함된 HTML 또는 XML을 읽어오거나 설정할 수 있습니다. 여기서는, parent 노드 안의 HTML..

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

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

DOM에 특정 id를 가지는 element가 있는지 체크하는 방법입니다. DOM에 특정 id element가 존재하는지 체크하기 document.getElementById(id); getElementById() 함수는 dom에서 특정 id를 가지는 element를 조회하는 함수입니다. 이 함수는, 만약 찾는 id를 가진 element가 없으면 null을 리턴합니다. 이런 점을 이용하여, dom에 특정 id를 가지는 element가 있는지 체크할 수 있습니다. 예제 사과 바나나 // 특정 id가 존재하는지 체크하는 함수 function checkElementExist(id) { if(document.getElementById(id)) { document.write(id + ' is exist' + ' ')..

Javascript에서 class 이름으로 element를 찾는 방법은 다음과 같습니다. getElementsByClassName() querySelector() querySelectorAll() getElementsByClassName() 클래스 이름을 파라미터로 입력받아서 해당 클래스를 가진 모든 element 목록을 HTMLCollection 형태로 리턴합니다. 예제 - getElementsByClassName() 수박 사과 포도 .green { color : green; } .red { color: red; } .purple { color: purple; } .underline { text-decoration: underline; } // class 이름으로 element 목록 조회 const 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 문서에서 , , 과 같은 태그를 사용해서 작성..

HTML에서 목록을 표현할 때, , , 를 사용합니다. [HTML] 순서없는 목록 만들기 [HTML] 순서있는 목록 만들기 이번에는 HTML에서 목록을 표현하는 , , 에 동적으로 목록을 추가하고 삭제할 수 있는 방법을 소개합니다. 에 동적으로 추가하기 function addList() { // 1. 추가할 값을 input창에서 읽어온다 const addValue = document.getElementById('addValue').value; // 2. 추가할 li element 생성 // 2-1. 추가할 li element 생성 const li = document.createElement("li"); // 2-2. li에 id 속성 추가 li.setAttribute('id',addValue); // 2..