본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[Javascript] 문서 객체

문서 객체

문서 객체 모델(Document Object Model)은 자바스크립트를 통해 브라우저에서 동작하는 형태를 접근하는 방식이며, 문서와 관력된 객체입니다.


문서 객체

문서 객체 속성
종류 설명
createElement() 요소 노드를 생성합니다.
createTextNode() 텍스트 노드를 생성합니다.
appendChild() 객체에 노드를 추가합니다.
setAttribute() 객체의 속성을 설정합니다.
getAttribute() 객체의 속성을 가져옵니다.
getElementById() ID 속성을 가져옵니다.
getElementsByName() 객체의 속성 이름을 가져옵니다.
getElementsByTagName() 태그를 선택합니다.
removeChild() 객체의 자식 노드를 제거합니다.
querySelector() 선택자로 가장 처음 선택되는 문서 객체를 가져옵니다.
querySelectorAll() 선택자로 선택되는 문서 객체를 배열로 가져옵니다.
자바스크립트와 제이쿼리의 비교
선택 자바스크립트 제이쿼리
이름 document.getElementsByName()
아이디 document.getElementsById("아이디") $("#아이디")
태그 document.getElementsByTagName("태그") $("태그")
자식 선택자 childNodes

Sample1

getElementById를 이용한 ID선택하는 예제입니다.

결과

getElementById

  • .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
  • .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
  • .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
  • .nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.
Javascript
window.onload = function(){
    document.getElementById("off1").onclick = function(){
        document.getElementById("list").style.color="#000"
    }
    document.getElementById("btn1").onclick = function(){
        document.getElementById("list").style.color="#c7254e"
    } 
}
jQuery
$(document).ready(function(){
    $("#off1").on("click", function(){
        $("#list").css("color","#000");
    });
    $("#btn1").on("click", function(){
        $("#list").css("color","#c7254e");
    });
});
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript</title>
</head>
<body>
    
    <h3>getElementById</h3>
    <div id="list">
        <ul>
            <li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
            <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
            <li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
            <li>.nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.</li>
        </ul>
    </div>
    
    <div class="choice">
        <button href="#c" id="off1">리셋</button>
        <button href="#c" id="btn1">클릭하면 글씨색이 변경됩니다.</button>
    </div>

    <script>        
        window.onload = function(){
            document.getElementById("off1").onclick = function(){
                document.getElementById("list").style.color="#000"
            }
            document.getElementById("btn1").onclick = function(){
                document.getElementById("list").style.color="#c7254e"
            } 
        }
    </script>
    
    <!-- jQuery로 작성한다면~ -->
<!--
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#off1").on("click", function(){
                $("#list").css("color","#000");
            });
            $("#btn1").on("click", function(){
                $("#list").css("color","#c7254e");
            });
        });
    </script>
-->
</body>
</html>

참고(Reference)

  • MDN JavaScript

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기