푸으름

✏️ 노드 리스트DOM에 접근할 때 querySelectorAll() 메서드를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있습니다. 이때 노드 정보를 여러 개 저장한 것을 노드 리스트라고 하고 배열과 비슷하게 동작할 수 있습니다. 예제를 통해서 접근해보겠습니다. Web Programming HTML CSS Javascript 위의 코드를 실행한 후 F12 키를 눌러서 콘솔 창에 document.querySelectorAll("li")를 입력한 모습입니다. querySelectorAll()은 노드 리스트를 반환하기 때문에 화면 출력 결과에서 Nodelist(3) [li, li, li]가 출력되었습니다. 이렇게 입력을 하면 노드 리스트뿐만 아니라 인덱스와 요솟값이 저장되고 lengt..

✏️ DOM 요소에 함수 직접 연결이벤트 처리기 함수가 간단한 경우에는 DOM 요소에 직접 함수를 연결할 수 있습니다. 아래의 예제 코드를 보면 img 요소를 가져와 변수에 저장한 후 onclick을 사용해 변수에 이벤트 처리기를 직접 연결합니다. 이미지를 클릭하면 창이 나타나지만 그 외의 다른 곳을 클릭하면 아무것도 나타나지 않습니다.  ✏️ 함수 이름을 사용해 연결이벤트가 발생했을 때 실행할 함수를 따로 정의해 놓았다면 함수 이름을 사용해 연결할 수 있습니다. 이 경우에는 함수 이름 다음에 괄호를 추가하지 않습니다. 아래 예제는 이미지를 cup 변수로 저장한 후 이벤트가 발생했을 때 changePic() 함수를 실행합니다. 빨간 컵을 클릭하면 파란색 컵으로 색깔..

✏️ DOM에 접근 - getElementById() 메서드document.getElementById("heading")// getElementById() 메서드를 사용하면 특정한 id가 포함된 DOM 요소에 접근할 수 있습니다.// 기본형 => 요소명.getElementById("id명") ✏️ DOM에 접근 - getElementsByClassName() 메서드document.getElementByClassName("bright")// getElementsByClassName() 메서드는 지정한 class 선택자 이름이 들어 있는 DOM 요소에 접근할 수 있습니다. class 선택자는 웹 문서 안의 여러 요소에서 사용할 수 있으므로 getElementsByClassName() 메서드를 사용하면 반환 ..

✏️ 문서 객체 모델(DOM)자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법을 말합니다. HTML 언어로 작성한 웹 문서의 DOM을 HTML DOM이라고 하며, XML 문서에서 사용하는 XML DOM도 있습니다. DOM은 웹 문서를 하나의 객체로 정희하고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 객체로 정의합니다.웹 문서 자체는 document 객체이고 삽입한 이미지는 image 객체입니다. ✏️ DOM 트리자바스크립트로 DOM을 조작하기 위해서는 DOM으로 어떻게 표현되는지를 알아야 합니다. DOM은 웹 문서의 요소들을 부모 요소와 자식 요소로 구분합니다. 마치 트리처럼 말이죠. Do it! // 위의 코드들을 CSS에서..