-
JavaScript 문서 모델 객체(Document Object Model)프로그래밍/JavaScript 2022. 10. 7. 07:29728x90
자바스크립트를 이용하여 웹 문서(HTML, XML 등)에 접근하고 제어할 수 있도록 객체를 이용해 웹 문서를 체계적으로 정리하는 방법으로, 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
DOM 트리
<!DOCTYPE html> <html lang="en"> <head> <title>간단 문서</title> </head> <body> <h2>간단 문서</h2> <img src="images/me.jpg" alt="이미지설명"> </body> </html>
HTML 구조
document 객체
웹페이지 자체를 의미하는 객체로 웹페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로 부터 시작한다.
종류 설명 getElementsByTagName() 해당 태그 이름의 요소를 모두 선택 getElementById() 해당 Id의 요소를 선택 getElementsByClassName() 해당 클래스에 속한 요소를 모두 선택 getElementsByName() 해당 name 속성값을 가지는 요소를 모두 선택 querySelectorAll() 해당 선택자로 선택되는 요소를 모두 선택 <!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>문서객체모델</title> </head> <body> <ul> <li class="backend">Java</li> <li class="front">HTML</li> <li class="front">CSS</li> <li class="front">JavaScript</li> <li>JSP</li> <li class="backend">Spring</li> <li class="backend">Python</li> <li name="database">Mysql</li> <li name="database">Oracle</li> <li id="tool">Git</li> </ul> <script> 'use strict'; const tagName = document.getElementsByTagName("li"); for(let i = 0;i<tagName.length;i++){ console.log(tagName[i]); tagName[i].style.color = "deeppink"; } const id = document.getElementById("tool"); id.style.color = "gold"; const className = document.getElementsByClassName("front"); for(let i = 0;i<className.length;i++){ console.log(className[i]); className[i].style.color = "deepskyblue"; } const name = document.getElementsByName("database"); for(let i = 0;i<name.length;i++){ console.log(name[i]); name[i].style.color = "yellowgreen"; } const qs = document.querySelectorAll("li.backend"); for(let i = 0;i<qs.length;i++){ console.log(qs[i]); qs[i].style.color = "black"; } </script> </body> </html>
노드
HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장하고 HTML 문서의 정보는 “노드 트리” 라고 불리는 계층적 구조에 저장한다. 노드 트리는 노드들의 집합이며 최상위 레벨인 루트 노드로 부터 시작하고, 가장 낮은 텍스트 노드까지 존재한다. 따라서 HTML DOM을 이용하여 노드트리에 포함된 모든 노드에 접근이 가능하다.
노드 종류
종류 설명 문서노드 문서 전체를 나타내는 노드 요소 노드 HTML 요소를 나타내는 노드, 속성 노드를 가질 수 있는 유일한 노드 속성 노드 HTML 요소의 속성을 나타내는 노드 텍스트 노드 HTML 문서의 모든 텍스트 주석 노드 HTML 문서의 모든 주석 노드간의 관계
종류 설명 parentNode 부모 노드 children 자식 노드 childNodes 자식 노드 리스트 firstChild 첫번째 자식 노드 firstElementChild 첫번째 자식 요소 노드 lastChild 마지막 자식 노드 nextSibling 다음 형제 노드 nextElementSibling 다음 형제 요소 노드 previousSibling 이전 형제 노드 previousElementSibling 이전 형제 요소 노드 <!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>문서객체모델2</title> <script> window.onload = function(){ // html 문서가 모두 실행된 후에 실행하라. const gnb = document.getElementById('gnb'); console.log(gnb); // nav console.log(gnb.parentNode); // div console.log(gnb.children[0]); // ul console.log(gnb.children[0].nextElementSibling); // null console.log(gnb.children[0].children[1]); // <li>내용 - 2</li> console.log(gnb.children[0].children[1].nextElementSibling); // <li>내용 - 3</li> console.log(gnb.children[0].firstChild); // #text : ul 옆으로 개행과 띄어쓰기가 포함됨. console.log(gnb.children[0].firstElementChild); // <li class="first">내용 - 1</li> } </script> </head> <body> <div> <nav id="gnb"> <ul> <li class="first">내용 - 1</li> <li>내용 - 2</li> <li>내용 - 3</li> </ul> </nav> </div> </body> </html>
728x90'프로그래밍 > JavaScript' 카테고리의 다른 글
JavaScript 노드 제거 (0) 2022.10.09 JavaScript 노드 연결 & 노드 생성 (0) 2022.10.08 JavaScript BOM(Brower Object Model)_2 (0) 2022.10.06 JavaScript BOM(Brower Object Model)_1 (0) 2022.10.05 JavaScript Date 객체 (0) 2022.10.04