15 문서객체모델(DOM)

---

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

 

 

DOM은 xml이나 html문서에 접근하기 위한 일종의 인터페이스이다.
이 객체는 문서내에 모든 요소를 정의하고 요소에 접근하는 방법을 제공한다.

이러한 DOM은 표준 객체 모델이며, 위와 같은 계층 구조로 표현된다.

 

 

Document 객체

 

Document 객체는 웹 페이지 자체를 의미한다.
웹 페이지에 존재하는 HTML 요소에 접근할 때는 반드시 document 객체로부터 시작한다.

 

HTML 요소의 선택 메소드

메소드명	설명
document.getElementsByTagName()	해당 태그 이름의 요소를 모두 선택
document.getElementById()	해당 아이디의 요소를 선택
document.getElementsByClassName()	해당 클래스에 속한 요소를 모두 선택
ocument.getElementsByName()	해당 name 속성값을 가지는 요소를 모두 선택
querySelectorAll()	해당 선택자로 선택되는 요소를 모두 선택

 

예시

<ul>
        <li name="model">html</li>
        <li >CSS</li>
        <li class="js">JavaScript</li>
        <li class="js">Ajax</li>
        <li id="server">Apache</li>
        <li name="model">php</li>
</ul>

<script>
        'use strict';
        //태그명이 li인 요소
        const tagName = document.getElementsByTagName('li');
        for(let i=0; i<tagName.length; i++){
            console.log(tagName[i]);
        }
        console.log('-----------------------');
        //클래스명이 js인 요소
        const className = document.getElementsByClassName('js');
        for(let i in className){
            console.log(className[i]);
        }
        console.log('-----------------------');
        //id가 server인 요소
        const id = document.getElementById('server');
        console.log(id);
        console.log('-----------------------');
        //name이 model인 요소
        const name = document.getElementsByName('model');
        for(let i of name){
            console.log(i);
        }
        console.log('-----------------------');
        // li태그 이면서 클래스가 js인것
        const querySelector = document.querySelectorAll('li.js');
        for(let i in querySelector){
            console.log(querySelector[i]);
        }
</script>

 

	html	css	JavaScript	Ajax	Apache	php
태그명이 li인 요소	O	O	O	O	O	O
class명이 js인 요소			O	O
id가 server인 요소					O
name이 model인 요소	O					O
li태그 이면서 클래스가 js인 요소			O	O

 

 

---

열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.

수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>