javascript+es6

[ javascript ] 10. DOM , BOM

변쌤(이젠강남) 2023. 9. 20. 14:34
반응형

# DOM 문법

 

  1.  문서 객체 모델(DOM)
  2.  getElementById
  3.  getElementsByName
  4.  getElementsByTagName
  5.  getElementsByClassName

 

# 문서 객체 모델(DOM)이란

문서 객체 모델(The Document Object Model, 이하 DOM) 

HTML 문서를 로드한 후, 해당 문서에 대한 모델을 메모리에 생성합니다

이때 모델은 객체의 트리로 구성되는데, 이것을 DOM tree라 합니다.

자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

웹 문서를 구조화한 DOM 트리(DOM tree)와 이벤트 등을 정리해 놓은 표준

 

DOM은 HTML문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜 주는 역할을 함

이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 노드(node)라고 합니다.

 

JS에서 HTML를 제어할수 있게 해 줌

 

 

DOM  
문서객체모델 DOM소개

 

 

dom tree구조

- DOM 트리와 노드

DOM에는 단순히 태그에 해당하는 요소 노드뿐만 아니라 여러 종류의 노드가 있고

DOM 트리에서 가지가 갈라져 나가는 부분은 노드라고 하고,
DOM 트리의 시작 부분, 즉 html 노드를 나무의 뿌리에 해당하는 루트 노드라고  합니다.

 

- 노드를 구성하는 원칙

  • 모든 HTML 태그는 요소 노드
  •  HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드
  • HTML 태그에 있는 속성은 모두 자식 노드인 속성 노드
  • 주석들은 주석 노드

 

- 문서 노드(Document Node)

최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 하고, DOM tree에 접근하기 위한 시작점(entry point)입니다.

 

- 요소 노드(Element Node)

요소 노드는 HTML 엘리먼트를 표현합니다.

 

- 어트리뷰트 노드(Attribute Node)

어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현

 

- 텍스트 노드(Text Node)

텍스트 노드는 HTML 요소의 텍스트를 표현

 

노드 (Node) : HTML 요소, 텍스트, 주석 등 모든 것을 의미

요소 (Element) : HTML요소를 의미

 

 <div class="con-box">
        <!-- 주석  - 주석노드 --> 
        <p> <!-- 요소노드 -->
            <a href="#">링크</a> 
            <!-- href 속성 노드 -->
        </p>        
        안녕하세요 <!-- 텍스트노드 -->
        <p>
            <a href="#">링크</a>
        </p>
</div>

 

 

# HTMLCollection와 NodeList 

공통점 : 

DOM API로 요소를 취득할 때 반환되는 이트러블 객체

for... of, 스프레드문법, 구조분해할당이 가능

 

메서드외 설명 mdn
getElementById() 찾으려는 요소 ID. ID는 대소문자를 구분하는 문자열로, 문서 내에서 유일 바로가기
getElementsByName() 문서의 동일한 속성의 이름 바로가기
getElementsByTagName() 문서의 동일한 태그이름  바로가기
getElementsByClassName() 문서의 동일한 클래스이름 바로가기
HTMLCollection forEach문 사용불가능 바로가기
NodeList forEach문 사용가능 바로가기
스타일 바로가기 바로가기

 

 

HTMLCollection , NodeList

유사배열

배열처럼  [ ] 식으로 배열과 유사하게 생긴 객체를 유사배열이라 합니다.

HTMLCollection과 nodelist도 유사배열

유사배열은 index와 length 프로퍼티를 가지고 있지만 배열은 아니라는 것입니다.

Array.isArray(대상) 메서드를 사용하여 배열이 맞는지 확인할 수 있고 

배열이면 true 유사배열은 false 결과로 나옵니다.

Array.from(대상)을 이용하며 배열처리 후 사용가능 

수업시간에 나중에  스프레드연산자 이용하여 사용할 수 있습니다.

 

유사배열은 map, reduce, filter 등을 사용할수 없음

 

# 스타일적용

element.style.backgroundColor = "red".

# getElementById

해당 id명을 가진 요소 하나만 반환

 

html문서의 ID를 가진 HTML 요소를 나타내는 개체를 document.getElementById() 반환합니다.

id는 대소문자를 구별합니다.

id는 고유하므로 한문서에 하나만 사용해야 하지만 만약 여러 개 이면 첫 번째 id를 가진 요소를 반환합니다.

 

const element = document.getElementById(id);

html )

    <body>
        <p id="message">문단입니다.</p>
        <p>문단입니다.</p>
        <p>문단입니다.</p>
    </body>

js)

const p = document.getElementById('message');
console.log(p);

 

# getElementsByName

결과 : NodeList : forEach문 사용가능

 

html)

<input type="radio" name="language" value="JavaScript">
<input type="radio" name="language" value="TypeScript">
<input type="radio" name="language" value="React">
<input type="radio" name="language" value="Vue">

js)

let elements = document.getElementsByName(name);

let elements = document.getElementsByName('language');
elements[0].vlaue = JavaScript
elements[1].vlaue = TypeScript
elements[2].vlaue = React
elements[3].vlaue = Vue

NodeList : forEach문 사용가능

 

예시)

<body>
<h2> 좋아하는 동물은 선택하세요 </h2>
 <p>
        <label for="dog">강아지</label>
        <input type="radio" name="ani" value="강아지" id="dog"> 
        <label for="cat">고양이</label>
        <input type="radio" name="ani" value="고양이" id="cat"> 
        <label for="panda">판다</label>
        <input type="radio" name="ani" value="판다" id="panda"> 
    </p>
        <p>
            <button id="btn">확인</button>
        </p>
        <div id="output">
            출력결과
       </div>
</body>

<script>
        let btn = document.getElementById('btn');
        let output = document.getElementById('output');

        btn.addEventListener('click', function(){           
            let ani = document.getElementsByName('ani');
            for( let i = 0 ; i < ani.length ; i++ ) {                
                if (ani[i].checked) {                    
                    output.innerText = `좋아하는동물: ${ani[i].value}`;
                }
            }
        });
    </script>

 

 

# getElementsByTagName

해당 태그명을 가진 모든 요소들을 배열에 담아 인덱스에 맞는 요소를 반환

결과: HTMLCollection 배열 : 유사 배열 객체(array-like object)

forEach문 사용 불가능

 

let elements = document.getElementsByTagName(tagName);
<body>    
    <h2>title1</h2>
    <p>This is the first paragraph.</p>
    <h2>title2</h2>
    <p>This is the second paragraph.</p>
    <h2>title3</h2>
    <p>This is the third paragraph.</p>

    <button id="btnCount">H2 개수</button>

    <script>
        let btn = document.getElementById('btnCount');
        btn.addEventListener('click', () => {
            let headings = document.getElementsByTagName('h2');
            alert(`H2 tags: ${headings.length}`);
        });
    </script>
</body>

</html>

 

 

# getElementsByClassName

class명을 가진 모든 요소들을 배열에 담아 인덱스에 맞는 요소를 반환

결과: HTMLCollection 배열 : 유사 배열 객체(array-like object)

forEach문 사용 불가능

 

let elements = document.getElementsByClassName(names);
let elements = rootElement.getElementsByClassName(names);

 

<header>
        <nav>
            <ul id="menu">
                <li class="item">HTML</li>
                <li class="item">CSS</li>
                <li class="item highlight">JavaScript</li>
                <li class="item">TypeScript</li>
            </ul>
        </nav>
        <h1>getElementsByClassName Demo</h1>
    </header>
    <section>
        <article>
            <h2 class="secondary">Example 1</h2>
        </article>
        <article>
            <h2 class="secondary">Example 2</h2>
        </article>
    </section>
let menu = document.getElementById('menu');
let items = menu.getElementsByClassName('item');
let elements = document.getElementsByClassName('secondary');
console.log(elements[0] )
console.log(elements[1] )

<h2 class="secondary">Example 1</h2>
<h2 class="secondary">Example 2</h2>

 

 

 

# BOM이란 ( 브라우저 객체 모델 )

Browser Object Model의 약어로 웹 브라우저를 제어하기 위해서 브라우저를 객체화한 것을 말합니다.

객체의 값을 나타내는  프로퍼티와 어떠한 수행을 하는 메서드를 갖고 있고 브라우저를 객체화 함으로써 이러한 객체로 브라우저를 제어할 수 있습니다.

 

- 현재 페이지 주소 가져오기 

console.log('주소: ', location.href);

 

- 이전 페이지 / 앞 페이지 이동

history.back();    // 이전 페이지 이동
history.forward(); // 앞 페이지 이동

 

 

- Browser 객체

 

1) window  -  모든 객체가 소속된 객체이며, 브라우저 창을 의미

메서드 설명
window.open() 웹 브라우저에서 새창  - window.open(url, name, specs, replace);
window.close() 브라우저 창을 닫을 때
window.alert() 사용자에게 중요한 내용이나 경고를 띄울 때 사용 , 중간값 체크
window.confirm() 사용자에게 true 또는 false값을 리턴 받을 수 있는 함수
window.prompt() 사용자에게 입력값을 받을 수 있는 창을 띄워주는 함수 
window.localStorage() 웹 브라우저에서 데이터를 저장하는 객체

 

 

2) screen: 사용자 환경의 디스플레이 정보 객체

3) location: 현재 페이지의 url을 다루는 객체

4) navigator: 웹브라우저 및 브라우저 환경 정보 객체

5) history: 현재의 브라우저가 접근했던 URL history

 

 

 

 

반응형

'javascript+es6' 카테고리의 다른 글

[ javascript ] 12. 이벤트 종류와 작성법  (0) 2023.09.24
[ javascript ] 11. DOM 선택, 출력, 속성,탐색  (0) 2023.09.24
[ javascript ] 09. Date객체, Math객체  (0) 2023.09.19
[ javascript ] 08. Array객체  (0) 2023.09.17
[ javascript ] 07. String 객체  (1) 2023.09.17

'javascript+es6'의 다른글

  • 현재글[ javascript ] 10. DOM , BOM

관련글

티스토리툴바