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 자식 요소..

133_자바스크립트 , 요소 읽어 오기 [적용] 요소를 가져오고 싶을 때 요소에서 클래스 작업을 하고 싶을 때 [문법] 속성 의미 타입 document.documentElement 루트 요소 html 요소 document.head head 요소 head 요소 document.body body 요소 body 요소 [내용] document.documentElement는 문서의 루트 요소를 지정한다. HTML 문서의 html 요소를 말한다. 'console.dir(dicument.documentElement)'의 콘솔 로그에서 html 요소가 반환되는 것을 확인할 수 있다. document.head는 head 요소를 가져오며, head에 script 태그와 link 태그를 동적으로 삽입할 수 있다. const..

132_자바스크립트 클래스명으로 요소 읽어 오기 [적용] 클래스명과 일치하는 요소를 모두 가져오고 싶을 때 [문법] 메소드 의미 반환 document.getElementsByClassName(클래스명) 클래스명 일치 요소 모두 가져오기 요소의 배열(HTMLCollection) [내용] document.getElementsByClassName()은 클래스명과 일치하는 HTML 요소를 모두 가져오며, querySelector()와 달리 인수는 클래스명만 전달할 수 있다. HTML index.html JavaScript main.js // foo 요소 document.getElementsByClassName('box'); 각 요소의 처리는 for문을 사용하며, forEach()는 사용할 수 없다. const ..