자바스크립트의 DOM에 대해 알아보자😍
얼마나 잘 알고 사용하고 있는지 찬찬히 뜯어보기..😵
돔돔..이공부 하기 전에는 참돔🍣밖에 몰랐는데....(미래의 내가 삭제하길)
DOM
| DOM | 설명 |
|---|---|
| Document Object MODEL | DOM을 사용하여 JavaScript는 HTML 문서의 모든 요소에 접근하고 변경할 수 있음 |
| HTML DOM | HTML을위한 표준 개체 모델 및 프로그래밍 인터페이스 (HTML 요소를 가져오고, 변경하고, 추가 또는 삭제하는 방법에 대한 표준) |
| DOM 트리 | 웹페이지의 내용은 Document객체가 관리 웹 브라우저가 웹 페이지를 읽어들이면 렌더링 엔진은 웹 페이지의 HTML을 해석하고 Document객체에서 문서내용을 관리하는 객체의 트리구조 |
| 노드(Node) | DOM 트리를 구성하는 객체 하나 기본적인 노드 3가지 문서노드 : 전체 문서를 가르키는 Document 객체 HTML 요소 노드 : HTML 요소를 가리키는 객체 텍스트 노드 : 텍스트를 가리키는 객체 |
|  🟣 - root, 문서노드 / 🔴🔵🟢🟠- HTML요소노드 / 나머지 : 텍스트 노드 | |
| HTML요소 트리 | 노드객체의 DOM 트리계층을 가리키는 프로퍼티(우선 익숙한 것만) firstElementChild / lastElementChild : 해당요소의 첫번째/마지막 자식 요소 객체를 참조한다. |
| 노드 객체 가져오기 Method | id속성으로 노드 가져오기 : document.getElementById("id값"); 요소이름으로 노드 가져오기 : document.getElementByTagName("태그명") 가리키는 태그를 분명하게 지정해주어야 한다. html내 모든요소 선택시 와일드 카드(" * ") 사용 class속성 값으로 노드 가져오기 : getElementByClassName("class명") name속성 값으로 노드 가져오기 : document.getElementByName("name 명 ") (참고 - id속성 제외 NodeList 반환) |
| CSS 선택자로 노드 가져오기 | document.querySelectorAll("선택자") document.querySelector("선택자") |
| 속성값 가져오기 | 요소 객체.getAttribute(""속성의 이름'') // 해당하는 속성이 없을 때 null or 빈문자열 반환 (예시 삽입 예정) |
| 속성값 설정하기 | 요소 객체.setAttribute(속성 이름, 속성 값) //해당하는 속성이 없를때 그 속성을 새롭게 추가 |
| 속성이 있는지 확인하기 | 요소 객체.hasAttribute(속성 이름) |
| 속성 삭제하기 | 요소 객체.removeAttribute(속성 이름) |
| HTML요소 내용 관련 | .innerHTML : 요소 안의 HTML코드를 가르킨다. 해당요소의 내용이 대입한 코드로 변경 .textContent /.innerText : 요소의 내용을 웹 페이지에 표시했을때의 텍스트 정보를 표시. 값은 지정한 요소의 자식 노드의 모든 텍스트를 연결한 값. .textContent /.innerText 차이점 : .textContent은 script요소안의 텍스트를 반환, .innerText은 반환하지 않음 .textContent은 공백문자 반환, .innerText은 공백 문자 제거 .textContent은 table, tbody, tr 요소 등 테이블 요소 수정 불가 |
| 노드 생성하기 | 새로운 객체 생성 : const Element = document.createElement("요소이름") 새로운 택스트 노드 생성 : 새로운 속성 노드 객체 생성 : document.createAttribute("속성이름") |
| 노드 삽입하기 | 요소의 마지막 자식 노드로 삽입 : 요소 노드.appendChild("삽입할 노드") 지정한 자식 노드 바로 앞에 삽입 : 요소 노드.insertBefore("삽입할 노드","자식 노드") |
| 노드 옮기기 | .appendChild()와 .insertBefore()를 문서에 삽입하면 해당 노드는 현재 위치에서 삭제되고 새로운 위치에 삽입됨. |
| 노드 삭제하기 | 노드.removeChild(자식 노드) |
| 노드 치환하기 | 노드.replaceChild(새로운 노드, 자식 노드) |
| DOM요소 이벤트 처리 |
(예시 업데이트 예정)
Ryuwisdom