-
2023 - 05 - 29 DOM (Document Object Modeling)Today I Learned/TIL 05 2023. 6. 2. 10:40
1. 문서 객체 생성과 선택 document.createElement(tagName) : 새로운 HTML 요소를 생성합니다. document.getElementById(id) : id 속성을 기준으로 요소를 선택합니다. document.getElementsByTagName(name) : 태그 이름을 기준으로 요소를 선택합니다. document.getElementsByClassName(name) : 클래스 이름을 기준으로 요소를 선택합니다. document.querySelector(selector) : CSS 선택자를 이용하여 요소를 선택합니다. document.querySelectorAll(selector) : CSS 선택자를 이용하여 모든 요소를 선택합니다. 2. 문서 객체 조작 element.innerHTML : 해당 요소 내부의 HTML 코드를 변경합니다. element.textContent : 해당 요소 내부의 텍스트를 변경합니다. element.setAttribute(attr, value) : 해당 요소의 속성 값을 변경합니다. element.getAttribute(attr) : 해당 요소의 속성 값을 가져옵니다. element.style.property : 해당 요소의 스타일 값을 변경합니다. element.appendChild(child) : 해당 요소의 하위 요소로 child를 추가합니다. element.removeChild(child) : 해당 요소의 하위 요소 중 child를 삭제합니다. element.classList.add(class) : 해당 요소의 클래스에 새로운 클래스를 추가합니다. element.classList.remove(class) : 해당 요소의 클래스 중에서 특정 클래스를 제거합니다. element.classList.toggle(class) : 해당 요소의 클래스 중에서 특정 클래스를 추가 또는 제거합니다. 3. 이벤트 처리 element.addEventListener(type, listener) : 해당 요소에서 이벤트가 발생했을 때 호출할 함수를 등록합니다. element.removeEventListener(type, listener) : 해당 요소에서 등록된 함수를 제거합니다. event.preventDefault() : 이벤트가 발생했을 때 기본 동작을 취소합니다. event.stopPropagation() : 이벤트의 버블링을 방지하기 위해 이벤트 전파를 중지합니다. 4. 기타 window.location.href : 현재 페이지의 URL을 가져옵니다. window.alert(message) : 경고 메시지를 출력합니다. window.confirm(message) : 확인 메시지를 출력하고 사용자의 답변에 따라 Boolean 값을 반환합니다.오늘 할일
1. 5주차 강의 듣기
2. 프로그래머스 문제 풀기, 스터디
3. 개인과제 주석 및 리뷰
4. CSS 공부
오늘 배운 것
사용자 = 브라우저 = 클라이언트. 같은 개념!
DOM: (Document Object Modeling)은 브라우저에 기본적으로 내장된 API 중 하나.
API는 다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할을 하고, 브라우저는 DOM 객체에 접근할 수 있도록 도와준다.
렌더링 (rendering) : 브라우저가 HTML을 해석(parsing)하는것
DOM Tree : 다음과 같은 계층화.
렌더 트리 (Render Tree) : HTML, CSS 및 JavaScript 문서를 파싱하여 브라우저에서 실제로 렌더링되는 최종 문서 모델을 나타내는 객체의 계층 구조.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <nav> <ul id="test"> <li>첫 번째 메뉴</li> <li>두 번째 메뉴</li> <li>세 번째 메뉴</li> </ul> </nav> <main> <h1>메인 영역의 제목입니다.</h1> <img src="이미지URL" alt="이미지 없음"> </main> <footer> copyright. </footer> </body> </html>VS Code에서 짤 수도 있지만, 브라우저의 사용자도구에서도 설정 가능.
사용자도구의 콘솔에 입력.
1. 해당 id명을 가진 요소 하나를 반환합니다. document.getElementById("id명") 2. 해당 선택자를 만족하는 요소 하나를 반환합니다. document.querySelector("선택자") 3. 해당 class명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다. document.getElementsByClassName("class명")[인덱스] 4. 해당 태그명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다. document.getElementsByTagName("태그명")[인덱스] 5. 해당 선택자를 만족하는 모든 요소들을 배열에 인덱스에 맞는 요소를 반환합니다. document.querySelectorAll("선택자명")[인덱스] 새로운 노드를 생성합니다. const div = document.createElement('div'); document.body.append(div); document.body.append(div);위에 html 코드를 예로 들면, (콘솔에 입력해야함)
ex) document.getElementById("test")
document.querySelector("선택자") -> 선택자는 id는 #, class는 . 찍어야 함. id나 class가 없으면 그냥 요소명<div> 같은.
document.querySelector("선택자") .children[인덱스] ->하위 노드값
document.querySelector("선택자") .parentElement[인덱스] -> 상위 노드값
내용 변경시 (앞에 내용에 이어서 점 찍고)
.innerText = "변경할 텍스트"
.setAttribute("style", "background-color: red;) 배경색 변경
ex) document.querySelector("#test") -> id이므로 #
ex) document.quertSelector('ul').children[1].innerText = "변경된 내용입니다."
/** property(=속성)을 바로 바꿔버려잇! */ // 이 둘은 차이가 있어요! element.innerHTML = new html content element.innerText = new text // style을 바꿔요. element.style.property = new style //method를 통해 클래스를 추가해봐요. element.setAttribute(attribute, value) // 어랏? 그럼 이런것도 가능?? element.setAttribute("style", "background-color:red;"); // .... element.style.backgroundColor = "red"; // input 필드의 변신// createElements const para = document.createElement("p"); para.innerText = "This is a paragraph"; document.body.appendChild(para); // createTextNode(elements는 아니구여, 그냥 글자...) let textNode = document.createTextNode("Hello World"); document.body.appendChild(textNode); // write. 조심 또 조심! document.write("Hello World!"); document.write("<h2>Hello World!</h2><p>Have a nice day!</p>"); // 골로 가는 코드 function myFunction() { document.write("Hello World!"); } // version 01 element.addEventListener("click", myFunction); function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; } // version 02 element.addEventListener("click", function() { document.getElementById("demo").innerHTML = "Hello World"; });'Today I Learned > TIL 05' 카테고리의 다른 글
2023 - 05 - 31 클래스 Getters & Setters (0) 2023.06.02 2023 - 05 - 30 클래스 Class 설계도 (0) 2023.06.02 2023 - 05- 28 콜백함수 제너레이터& async wait (0) 2023.06.01 2023 - 05 - 27 콜백함수 ; promise, 리팩토링 (0) 2023.06.01 2023 - 05 - 26 내부this에 다른 값 바인딩하기 (0) 2023.06.01