어제 오늘 내일

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

체크박스 선택을 초기화하는 방법입니다. 체크박스 초기화 하기 개 고양이 토끼 function initCheckbox() { // 초기화할 checkbox 선택 const checkboxes = document.getElementsByName('animal'); // 체크박스 목록을 순회하며 checked 값을 초기화 checkboxes.forEach((checkbox) => { checkbox.checked = false; }) } 위 예제는 체크박스를 몇 개 선택한 후, '초기화' 버튼을 클릭하면 선택된 체크박스가 초기화 됩니다. const checkboxes = document.getElementsByName('animal'); 초기화할 체크박스 목록을 선택합니다. getElementsByName()..

Javascript의 문자열에서 특정 문자를 제거하기 위해서는 replace() 함수를 사용할 수 있습니다. replace() 특정 문자 제거하기 특정 문자 모두 제거하기 특정 문자 대소문자 구분 없이 모두 제거하기 replace() let newStr = str.replace(substr, newSubstr); replace() 함수는 str문자열에서 파라미터로 입력 받은 substr과 일치하는 부분을 찾아서, (substr은 일반 문자열이 될 수도 있고, 정규식이 될 수도 있습니다.) newSubstr로 교체한 문자열을 리턴합니다. (newSubstr은 일반 문자열이 될 수도 있고, 함수가 될 수도 있습니다.) 파라미터 substr 변경할 대상 문자열 (또는 정규식) 이 값이 일반 문자열일 경우, 전..

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

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