요소 선택 방법 (DOM)

728x90

⭐️ 요소 선택방법 (DOM) ⭐️

01. DOM (Document Object Model) 문서 객체 모델

HTML 문서 내의 모든 요소를 각각의 객체로 정의하여, 각각의 요소에 접근하는 방법을 제공하는 인터페이스를 의미합니다.
HTML 문서와 자바스크립트를 연결해주는 통역사의 역할을 합니다.
자바스크립트는 DOM 을 통해 HTML 문서의 각 요소에 접근할 수 있고, 이를 통해 HTML 문서의 요소를 생성, 변형, 삭제하는 등의 웹 페이지 제어가 가능합니다.
DOM 은 document 객체의 집합이며, 객체의 부자관계를 나타내는 트리 구조로 표현됩니다.

   ___ 참고하기 ___
1) 인터페이스 (interface) 는 서로 다른 두 시스템이 정보를 교환하는 경우의 접점 또는 경계면을 의미합니다.
2) ' 문서 객체 '는 HTML 문서의 태그들을 자바스크립트 (Javascript) 가 이용할 수 있도록 만든 객체를 말합니다.
3) DOM 은 BOM (Browser Object Model) 중의 하나로, BOM 의 최상위 객체인 ' Window 객체 '의 하위 객체 입니다.
4) Text 형식의 HTML 문서를 브라우저에 렌더링 하려면, HTML 문서를 브라우저가 이해할 수 있는 구조(DOM)로 메모리에 올려야 합니다.
      여기서 렌더링은 논리적인 문서의 표현식을 그래픽 표현식으로 변형시키는 과정을 말합니다.
      렌더링은 DOM 요소와 스타일에 기반을 둔 레이아웃을 계산하고, 계산된 요소를 화면에 표현하는 과정으로 이루어집니다.
5) 문서 객체 생성의 종류
      - 정적 생성 : HTML 문서에 태그를 사용하여 직접 작성하여 생성합니다.
      - 동적 생성 : HTML 페이지에 없던 문서 객체를 Javascript 를 이용하여 생성하는 것을 말합니다.

[1] 노드 (node)

DOM 에서 객체화한 각각의 객체를 말하며, 정보를 저장한 계층적 단위를 의미합니다 .
<head>, <body>, <title>, <script>, <h1> 등의 태그 요소 뿐만 아니라, 태그 안의 텍스트나 속성도 각각의 노드 입니다.
태그 요소는 ' 요소 노드 ', 텍스트를 ' 텍스트 노드 '라고 말합니다.
각 노드는 부모-자식 관계로 연결 되어 있으며, 부속 노드를 가지는 노드를 부모 노드라고 하고 부모에 속하는 부속 노드를 자식 노드라고 합니다.

[2] 트리(tree) 구조

HTML 문서의 정보가 저장되는 DOM 의 계층적 연결 구조를 의미합니다.
최상위의 뿌리를 기준으로 아래로 가지를 뻗어나가는 나무 모양으로 표현됩니다.

02. 요소 선택방법

요소는 선택자를 통해서 불러오는데, 요소를 선택하는 방법 (접근 방법)은 다음과 같습니다.

[1] 요소를 직접 선택하는 메서드

___ 참고하기 ___
1) 메서드 (method) 는 어떤 객체가 가지고 있는 동작을 의미합니다.
자바스크립트에서는 객체 안에 프로퍼티(property)로 정의된 함수를 메서드라고 말합니다.

메서드	설명
getElementById( )	document.getElementById('content') 일 경우, HTML 요소 중에서 id 속성이 'content'인 요소를 선택합니다.
getElementByClassName( )	document.getElementByClassName('menu') 일 경우, HTML 요소 중에서 class 명이 'menu' 인 요소들을 선택합니다.
getElementByClassName( )	document.getElementByClassName('ul') 일 경우, HTML 요소 중에서 태그 명이 'ul' 인 요소들을 선택합니다.
querySelecter( )	요소의 선택 방법이 css 선택 방법과 동일합니다. 선택된 요소 중에서 첫번 쨰 요소만 선택합니다. document.querySelecter('.lnb') document.querySelecter(div) document.querySelecter('#gnb li')
querySelecterAll( )	querySelecter( ) 는 선택된 요소 중 첫 번쨰 요소만 선택하는 반면, querySelecterAll( ) 는 모든 요소를 선택합니다.

# 요소 선택 메서드의 예

<!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>요소를 직접 선택하는 메서드</title>
        <script>
            window.onload = function() {
                var list1 = document.querySelector('#box1 > ul > li');
                var list2 = document.querySelectorAll('#box2 > ul > li');
                console.log(list1);
                console.log(list2);
            };
        </script>
    </head>
    <body>
        <div id="box1">
            <ui>
                <li>내용1</li>
                <li>내용2</li>
                <li>내용3</li>
            </ui>
        </div>
        <div id="box2">
            <ui>
                <li>내용4</li>
                <li>내용5</li>
                <li>내용6</li>
            </ui>
        </div>
    </body>
    </html>

document.querySelectorAll( )로 요소를 선택했을 경우, 모든 요소가 선택되지 때문에 변수에 배열로 저장됩니다.

[2] 상대 위치로 선택하는 방법

선택한 요소의 현재 위치를 기준으로 요소를 선택합니다.

속성 값	속성 설명
parentNode	선택된 요소의 부모 노드를 선택합니다.
childNodes	선택된 요소의 자식 노드들(요소 노드, 텍스트 노드)를 선택합니다.
children	선택된 요소의 자식 노드들(요소 노드)를 선택합니다. childNodes 는 '엔터(enter)' 도 빈 문자(text)로 인식하여 자식 노드로 취급하지만, children 은 엔터를 자식 노드로 취급하지 않는 차이점이 있습니다.
nextSibling	선택된 요소의 이전 형제 노드를 선택합니다.
previousSibling	선택된 요소의 다음 형제 노드를 선택합니다.
firstChild	선택된 요소의 자식 노드 중 첫 번쨰 노드를 선택합니다.
lastChild	선택된 요소의 자식 노드 중 마지막 노드를 선택합니다.
tagName	선택된 요소의 태그명을 반환합니다.
nodeValue	선택된 요소의 Value 값을 반환합니다.
nodeType	선택된 요소의 타입을 반환합니다. 반환 값이 1 이면 요소, 2 이면 속성, 3 이면 텍스트 를 의미합니다.
id	선택된 요소의 id 값을 반환합니다.
className	선택된 요소의 class 값을 반환합니다.

728x90

'Javascript' 카테고리의 다른 글

내장 함수 (3)	2022.08.16
배열 객체 (1) (2)	2022.08.12
지역 / 전역 변수 (3)	2022.08.06
함수 (7)	2022.07.27
데이터 유형 (7)	2022.07.27

깜냥깜냥🐾코딩 혜윰

요소 선택 방법 (DOM)