Jade_o.o

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: # / 태그: ..

요소.addEventListener(이벤트, 명령) • 선택 요소에 지정한 이벤트가 발생하면, 약속 된 명령어를 실행시키는 메소드 let boxEl = document.querySelector(".box"); console.log(boxEl); boxEl.addEventListener("click", function() { alert("click!"); }) document.querySelector(".box").addEventListener("click", function() { alert("click"); }) addEventListener 이벤트의 종류 • Click : 클릭 • Mouse 계열 1) Mouseover : 요소에 커서를 올렸을 때 2) Mouseout : 마우스가 요소를 벗어날 때 ..