Jade_o.o

JavaScript DOM 요소 추가와 삭제에 대해 알아보자 먼저 전체 html코드를 살펴보고 브라우저로 실행된 콘솔창도 함께 보자 (+) js 파일 분리해서 사용하는 경우 defer 추가해서 DOM 요소 로드 후에 실행해 줄 수 있다! 1 2 3 4 5 createNode appendNode appendChildNode prependNode before after removeNode removeChildNode let ul = document.querySelector('ul') console.log(ul) // null // html 코드 1 2 3 4 5 createNode appendNode appendChildNode prependNode before after removeNode removeCh..

JavaScript 다른 노드에 접근하는 방법에 대해 알아보자 밑에 보이는 코드는 전체 html, css 코드이다. 참고 요함 1 previous 테스트 2 next 테스트 3 4 5 getParent pElSibling pNoSibling nElSibling nNoSibling parengNode : 부모 요소를 가져온다. let container = document.getElementById('container'); let greenBox = document.getElementById('green'); let redBox = document.getElementById('red'); // parentNode : 부모 요소를 가져온다. function getParent(){ console.log(gree..

JavaScript 클래스 관련 메소드에 대해 알아보기 먼저 전체 html, css 코드를 살펴보고 브라우저로 실행된 콘솔창도 함께 보자 1 2 3 4 5 addClass removeClass containsClass toggleClass // 클래스 관련 메소드 let greenBox = document.getElementById('green'); addClass() : 클래스 추가 // 클래스 추가 function addClass() { greenBox.classList.add('box1'); console.log(greenBox.classList); } // html 코드 1 2 3 4 5 addClass removeClass containsClass toggleClass html 코드와 함께 보면..

요소 선택 1) getElementById : id 속성값으료 요소를 선택 (요소 하나만 선택) 2) getElementsByClassName : class 속성값으로 요소 선택, for문으로도 출력 가능 => HTMLCollection 형태 - 배열과 비슷한 상태, 태그 요소를 포함하고 있음 3) getElementsByTagName : 태그 이름으로 요소 선택 => HTMLCollection 형태 - 배열과 비슷한 상태, 태그 요소를 포함하고 있음 4) getElementsByName : name 속성값으로 요소를 선택 => NodeList 형태 - 배열과 비슷한 형태 5) querySelector : 선택자를 이용해서 요소 선택 => css 선택자와 동일하게 (클래스: . / id: # / 태그: ..