목록DOM (6)

하얀 코딩

[DOM - 6] Element 추가 / 삭제

Document API document.createElement() 문자열 인자로 element tag를 입력하면 해당 엘리먼트가 생성돼 반환됨 Element API .appendChild(인자) 추가할 element를 인자로 받아 호출된 element의 자식으로 인자를 추가함 .removeChild(인자) 삭제할 element를 인자로 받아 호출된 element의 자식중에서 해당 element를 삭제 .insertBefore(인자1, 인자2) 특정 요소를 다른 요소 앞에 삽입할 때 주로 활용됩니다. 이 메서드는 두 개의 매개변수를 받으며, 첫 번째 매개변수는 삽입하려는 요소를, 두 번째 매개변수는 참조 요소를 나타냅니다. .cloneNode() 호출된 element를 복사해서 반환함
DOM 2023. 12. 12. 23:20
[DOM - 5] querySelectorAll

querySelectorAll는 JavaScript를 사용하여 웹 페이지에서 CSS 선택자에 맞는 모든 HTML 요소를 선택하는 메서드입니다. 이 메서드를 사용하면 여러 개의 요소를 선택하고 NodeList(요소 목록)을 반환합니다. 문법 let elements = document.querySelectorAll("CSS_선택자"); 동작 querySelectorAll은 문서에서 CSS 선택자에 맞는 모든 요소를 선택하고 NodeList를 반환합니다. NodeList는 배열 유사 객체이므로 배열처럼 인덱스를 사용하여 각 요소에 액세스할 수 있습니다. 예시 클래스 이름으로 요소 선택 let buttons = document.querySelectorAll(".button"); // 클래스가 "button"인 ..
DOM 2023. 12. 12. 23:10
[DOM - 4] querySelector

querySelector는 JavaScript를 사용하여 웹 페이지에서 원하는 HTML 요소를 선택하는 메서드입니다. 이 메서드는 CSS 선택자를 사용하여 요소를 찾고 선택할 수 있으며, 선택한 요소를 JavaScript로 조작하거나 정보를 가져올 수 있습니다. 문법 let element = document.querySelector("CSS_선택자"); 동작 querySelector는 문서에서 첫 번째로 일치하는 요소를 선택합니다. 따라서 여러 요소가 일치하는 경우 첫 번째 요소만 선택됩니다. 일치하는 요소가 없으면 null이 반환됩니다. 예시 클래스 이름으로 요소 선택 let firstButton = document.querySelector(".button"); // 클래스가 "button"인 첫 번째..
DOM 2023. 12. 12. 23:03
[DOM - 3] 단일 Element 선택

DOM API를 활용해 문서에서 엘리먼트를 선택하는 방법 (구식) 1. document.getElementBy~ : 단일 엘리먼트를 선택하는 메소드 getElementById 지정된 id 속성 값과 일치하는 단일 요소를 반환합니다. id 속성은 문서 내에서 고유해야 합니다. getElementsByClassName 지정된 클래스 이름과 일치하는 모든 요소를 선택하고 HTMLCollection(요소의 컬렉션)을 반환합니다. getElementsByTagName 지정된 HTML 태그 이름과 일치하는 모든 요소를 선택하고 HTMLCollection을 반환합니다. getElementsByName 지정된 name 속성 값과 일치하는 모든 요소를 선택하고 NodeList(요소의 목록)을 반환합니다. 이는 주로 폼 ..
DOM 2023. 12. 12. 22:53
[DOM - 2] 탐색 API

자식, 부모 엘리먼트에 접근하는 방법 .children : 해당 object의 자식 노드에 대한 배열 .parentNode : 부모 노드 .firstElementChild : 첫 자식 엘리먼트 .lastElementChild : 마지막 자식 엘리먼트 같은 레벨의 형제 엘리먼트에 접근하는 방법 .nextElementSibling .previousElementSibling
DOM 2023. 12. 12. 22:22
[DOM - 1] DOM 기초

DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작 할 수 있는 Model입니다. JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다. HTML을 조작할 수 있다는 게 무슨 뜻일까요? HTML을 분석하여 HTML의 아주 작은 부분까지 접근할 수 있는 구조를 만들었습니다. (DOM) DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있습니다. 앞서 학습한 조건문과 반복문, 배열, 객체를 활용하면 소셜 미디어에서 새롭게 생성되는 게시물을 저장하고 분류하는 작업을 구현할 수 있습니다. HTML에 JavaScript를 적용하기 위해서는 웹 브라우저가 작성된 코드를 해석하는 과정에..
DOM 2023. 1. 4. 01:49
이전 Prev 1 Next 다음