🎨 Programming/JavaScript

[JavaScript] 13. 문서 객체 모델(Document Object Model)

ryang x2 2020. 9. 19. 01:35
728x90
반응형

# 문서 객체 모델(Document Object Model) 

XML이나 HTML문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 

 

 

<html lang="ko"> 
<head> 
    <title>간단한 HTML 문서</title> 
</head> 
<body> 
    <h2>HTML 문서</h2> 
    <img src="images/apple.png"> 
</body> 
</html>

 

 

● document 

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

 

메소드

getElementsByTagName() 해당 태그 이름의 요소를 모두 선택합니다. 
getElementById() 해당 아이디의 요소를 선택합니다. (id는 중복xx)
getElementsByClassName( 해당 클래스에 속한 요소를 모두 선택합니다.
getElementsByName() 해당 name 속성값을 가지는 요소를 모두 선택합니다.
querySelectorAll() 해당 선택자로 선택되는 요소를 모두 선택합니다.

 

예시 1)

<body>
    <h2 name="ryang">문서 객체 모델 - 1</h2>
    <ul>
        <li>김사과</li>
        <li id="lee">이메론</li>
        <li class="hot">오렌지</li>
        <li id="lee">반하나</li>
        <li class="hot">박수박</li>
        <li name="ryang">박하량</li>
        <li class="add">김씨</li>
        <li class="add">박씨</li>
        <li class="add">임씨</li>
    </ul>
</body>
<script>
        'use strict'
        const tn = document.getElementsByTagName("li");
        for(let i=0; i<tn.length; i++){
            tn.item(i).style.color = "deepskyblue";  //  item : 각각의 요소들을 뜻함
        }
        
        const id = document.getElementById("lee");
        id.style.color = "deeppink";

        const cl = document.getElementsByClassName("hot");
        for(let i=0; i<cl.length; i++){
            cl.item(i).style.color = "green";
        }

        const ryang = document.getElementsByName("ryang");
        for(let i=0; i<ryang.length; i++){
            ryang.item(i).style.color = "gold";
        }

        const query = document.querySelectorAll("li.add");
        for(let i=0; i<query.length; i++){
            query.item(i).style.color = "gray";
        }
</script>

예시 2)

<body>
    <h2>문서 객체 모델 - 2</h2>
    <div>
        <nav id="gnb">
            <ul>
                <li class="first">내용1</li>
                <li>내용2</li>
                <li>내용3</li>
            </ul>
        </nav>
    </div>
</body>
<script>
        'use strict'
        window.onload = function(){     // 모든 문서를 다 읽은 후 실행
            const gnb = document.getElementById('gnb');
            console.log(gnb.parentNode);
        }
</script>

<script>
        'use strict'
        window.onload = function(){     // 모든 문서를 다 읽은 후 실행
            const gnb = document.getElementById('gnb');
            console.log(gnb.children[0]);
        }
</script>

<script>
        'use strict'
        window.onload = function(){     // 모든 문서를 다 읽은 후 실행
            const gnb = document.getElementById('gnb');
            console.log(gnb.children[0].nextElementSibling); // 형제 태그 xx
        }
</script>

<script>
        'use strict'
        window.onload = function(){     // 모든 문서를 다 읽은 후 실행
            const gnb = document.getElementById('gnb');
            console.log(gnb.children[0].children[1]);
        }
</script>

<script>
        'use strict'
        window.onload = function(){     // 모든 문서를 다 읽은 후 실행
            const gnb = document.getElementById('gnb');
            console.log(gnb.children[0].children[1].nextElementSibling);
        }
</script>

<script>
        'use strict'
        window.onload = function(){     // 모든 문서를 다 읽은 후 실행
            const gnb = document.getElementById('gnb');
            console.log(gnb.children[0].firstChild);
        }
</script>

* 빈 텍스트 처리 

익스플로러를 제외한 대부분의 브라우저는 요소와 요소 사이에 빈 공백 또는 개행이 이루어지면 텍스트노드로 처리됩니다. 따라서 노드간의 관계에 텍스트 노드가 중간에 사용되면 노드 이동이 불명확해 질 수 있습니다.

728x90
반응형