푸으름

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

✏️ 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에서..