143_자바스크립트에서 요소 교체하기 [적용] 부모 요소에서 자식 요소를 교체하고 싶을 때 [문법] 메소드 의미 반환 부모노드.replaceChild(새노드, 교체대상노드) 부모 노드의 자식 노드를 교체 교체된 노드 [내용] relplaceChild()는 부모 노드 내 자식 노드를 새로운 노드로 교체한다. 두 번째 인수를 첫번째 인수로 변경하며, 변경된 노드는 DOM 트리에서 제거되고 replaceChild()의 반환값이 된다. 대상 노드가 존재하지 않으면 에러가 발생하므로 주의하자. 화면 표시 3초 후 새 노드로 교체하는 예시를 확인해 보자. HTML index.html { // 컨테이너 const container = document.querySelector('.container'); // 교체 전 ..

142_자바스크립트에서 요소 복사하기 [적용] 유저의 클릭에 따라 요소를 추가하고 싶을 때 [문법] 메소드 의미 반환 노드.cloneNode([진리값*]) 노드 복제 노드(Node) * 생략 가능 [내용] cloneNode()는 요소를 복제한다.인수에 true를 전달하면 자식 노드도 복제한다.복제한 노드를 화면에 표시할 때는 appendChild()를 사용한다.화면 표시후 3초 뒤 .box 요소를 복제하여 표시하는 예시를 확인해 보자. HTML index.html 박스 JavaScript main.js setTimeout(() => { // 자식 노드를 포함하여 #myBox 요소 복제 const cloneBox = document.querySelector('#myBox').cloneNode(true); ..

141_자바스크립트에서 요소 생성하기 [적용] HTML 요소를 동적으로 생성하고 싶을 때 모달 윈도우 창을 생성하고 싶을 때 [문법] 메소드 의미 반환 docu,memt.createElement('태그염', 옵션) 태그명 요소를 생성 요소 [내용] createElement()는 인수에 전달된 태그명으로 요소를 생성한다. // div 요소 생성 const divElement = document.createElement('div'); // a 요소 생성 const anchorElement = document.createElemen('a'); createElement()를 생성해도 화면에는 아무런 변화가 없으며, appendChild() 등을 사용해 요소를 추가해야 DOM 요소로 사용할 수 있다. 또한, in..

140_자바스크립트에서 요소 자신 삭제하기 [적용] 요소를 동적으로 삭제하고 싶을 때 [문법] 메소드 의미 반환 노드.remove() 요소를 제거 없음 [내용] remove()는 요소 자신을 제거하므로 부모 요소를 통해 요소를 제거하는 removeChild()와 다르다. HTML index.html 제거되는 요소 JavaScript main.js // 3초후 처리가 실행 setTimeout(() => { const childElement = document.querySelector('#child'); // #child 요소 제거 childElement.remove(); }, 3000); 실행결과 removeChild()와 같은 방식으로 3초 후 요소가 제거된다. 참조 : 실무에 바로 적용하는 자바스크립트..

139_자바스크립트에서 요소를 동적으로 삭제하기 [적용] 요소를 동적으로 삭제하고 싶을 때 [문법] 메소드 의미 반환 부모노드.removeChild(자식노드) 부모 요소에서 자식 요소 제거 제거된 요소(Element) [내용] removeChild()는 부모 요소에서 자식 요소를 제거한다. #parent 요소 내 #child 요소를 3초 후 삭제하는 예시를 확인해 보자. HTML index.html 제거된 요소 JavaScript main.js // 3초 후 처리를 실행 setIimeout(() => { const parentElement = document.querySelector('#parent'); const childElement = document.querySelector('#child'); /..

138_자바스크립트 HTML 코드 요소 추가하기 [적용] 동적 표시 요소를 추가하고 싶을 때 모달 윈도우 창을 화면에 추가하고 싶을 때 [문법1] 메소드 의미 반환 부모요소.insertAdjacentHTML(삽입위치,문자열) 문자열을 HTML로 삽입 요소(Element) [문법2] 삽입 위치 의미 'beforebegin' 부모 요소 바로 앞 'afterbegin' 부모 요소 제일 앞 'beforeend' 부모 요소 제일 뒤 'afterend' 무오 요소 바로 뒤 [내용] insertAdjacentHTML()은 첫 번째 인수값의 위치에 두 번째 인수의 문자열을 HTML(혹은 XML)로 삽입하며, 삽입 위치의 기존 요소는 삭제하지 않는다. 3초후 .new-box 요소를 추가하는 예시를 확인해 보자. HTML..

137_자바스크립트 요소 앞/뒤에 다른 요소 추가하기 [적용] HTML 요소의 삽입 위치를 상세히 지정하고 싶을 때 [문법] 메소드 의미 반환 노드1.before(노드2) 노드1 앞에 노드2 추가 없음 노드1.after(노드2) 노드1 뒤에 노드2 추가 없음 부모노드.hasChild(자식노드) 부모 노드에 자식 노드 존재여부 확인 진리값 [내용] before()와 after()는 지정한 요소의 앞/뒤로 노드를 추가한다. #targetBox 요소의 앞뒤로 #myBox1 요소와 #myBox2 요소를 삽입하는 예씨를 확인해 보자. HTML index.html #myBox1 요소 #myBox2 요소 #targetBox 요소 JavaScript main.js const myBox1 = document.queryS..

136_자바스크립트 지정 위치에 요소 추가하기 [적용] 동적 표시 요소를 추가하고 싶을 때 모달(modal) 윈도우 창을 화면에 추가하고 싶을 때 [문법] 메소드 의미 반환 부모노드.insertBefore(자식녿, 희망위치의노드) 부모 노드 내 노드 추가 요소(Element) [내용] inserBefore()는 부모 요소 내 지정 요소의 앞에 노드를 삽입한다. 다음 예시를 통해 3초 후 .container 요소의 제일 앞, 4초후 #box2 요소의 바로 앞에 삽입되는 노드를 확인해 보자 HTML index.html #myBox1 요소 #myBox2 요소 자식 요소1 자식 요소2 JavaScript main.js const container = document.querySelector('.container..

135_자바스크립트 부모 요소에 자식 요소 추가하기 [적용] 동적 표시 요소를 추가하고 싶을 때 모달(modal) 윈도우 창을 화면에 추가하고 싶을 때 [문법] 메소드 의미 반환 부모노드.appendChild(자식노드) 부모 노드에 자식 노드 추가 요소(Element) [내용] appendChild()는 부모의 노드 끝에 자식 노드를 추가한다. 페이지를 열어 3초후 .container 요소에 #myBox 요소를 추가하는 예시를 확인해 보자 HTML index.html #myBox 요소 자식 요소1 자식 요소2 JavaScript main.js const container = document.querySelector('.container'); const myBox = document.querySelecto..

134_자바스크립트 부모/자식/전/후 요소 읽어 오기 [적용] 특정 요소와 관련된 요소를 가져오고 싶을 때 [문법] 속성 의미 타입 부모노드.children 자식 노드 요소군(HTMLCollection) 부모노드.firstElementChild 첫 번째 자식 노드 요소(Element) 부모노드.lastElementChild 마지막 자식 노드 요소(Element) 노드.nextElementSibling 다음 노드 요소(Element) 노드.previousElementSibling 이전 노드 요소(Element) 자식노드.parentNode 부모 노드 노드(Node) [내용] 특정 요소와 관련하여 부모 요소, 자식 요소, 전후 요소를 가져온다. HTML index.html 자식 요소1 자식 요소2 자식 요소..