[Java Script] DOM / 기본 메서드

Java Script

[Java Script] DOM / 기본 메서드

웹개발자(진) 2024. 4. 1. 21:11

잡담

이번에 정보처리기사 실기 신청했습니다. 4월 27일 한 달도 안 남았는데요.. 요즘 정보처리기사 실기 합격률이 10%대로 나온다던데, 벌써 두렵습니다. java랑 python은 학원에서 수업으로 공부하던 거로 치면 될 거 같은데 C언어는 대학교 때 배웠던 게 기억이 잘 안 나네요.. 포인터 이쪽은 어렵더라고요. 이론은 왜 이렇게 외울게 많은지. 다들 힘냅시다~

DOM (Document Object Model)

JavaScript DOM (문서 객체 모델)은 웹 문서를 위한 프로그래밍 인터페이스입니다. 이는 HTML 또는 XML 문서의 구조를 트리 모델로 나타내며 각 노드가 문서의 일부를 나타냅니다. JavaScript를 사용하여이 트리를 조작하여 웹 페이지의 내용, 구조 및 스타일을 동적으로 변경할 수 있습니다.

다음은 JavaScript DOM을 사용하여 수행 할 수 있는 일반적인 작업입니다.

요소 액세스: getElementById, getElementsByClassName, getElementsByTagName과 같은 메서드를 사용하여 문서의 HTML 요소에 액세스 할 수 있습니다. 또는 querySelector 및 querySelectorAll과 같은 더 최신의 메서드를 사용할 수도 있습니다.
요소 조작: HTML 요소의 내용, 속성 또는 스타일을 수정할 수 있습니다. 예를 들어 textContent 속성을 사용하여 텍스트 내용을 변경하거나 style 속성을 사용하여 CSS를 수정할 수 있습니다.
요소 추가 및 제거: createElement 및 appendChild와 같은 메서드를 사용하여 새 HTML 요소를 동적으로 생성하고 문서에 추가할 수 있습니다. 마찬가지로 removeChild와 같은 메서드를 사용하여 요소를 제거 할 수도 있습니다.
이벤트 처리: HTML 요소에 이벤트 핸들러를 추가하여 클릭, 키 누름, 마우스 이동 등의 사용자 작업에 응답할 수 있습니다.
DOM 탐색: parentNode, childNodes, firstChild, lastChild, nextSibling 및 previousSibling와 같은 속성을 사용하여 DOM 트리 내에서 요소 사이를 이동할 수 있습니다.

DOM과 Java Script

DOM 소개 - Web API | MDN

이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한

developer.mozilla.org

DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 JavaScript 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 document object model의 한 부분이다. 때문에, 이러한 요소들을 DOM과 JavaScript와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.

초창기에는 JavaScript와 DOM 가 밀접하게 연결되어 있었지만, 나중에는 각각 분리되어 발전해왔다. 페이지 콘텐츠(the page content)는 DOM에 저장되고 JavaScript를 통해 접근하거나 조작할 수 있다. 이것을 방정식으로 표현하면 아래와 같다:

API (web or XML page) = DOM + JS (scripting language)

DOM 은 프로그래밍 언어와 독립적으로 디자인되었다. 때문에 문서의 구조적인 표현은 단일 API 를 통해 이용가능하다. 이 문서에서는 JavaScript를 주로 사용하였지만, DOM의 구현은 어떠한 언어에서도 가능하다.

1. getElementById

이 메서드는 문서 내에서 특정 ID를 가진 요소를 선택하는 데 사용됩니다. 선택된 요소는 해당 ID와 일치하는 첫 번째 요소입니다. 이 메서드는 문서 전체에서 검색을 수행하기 때문에 ID가 고유해야 합니다. 또한, 요소가 없을 경우에는 null을 반환합니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 스타일 정의 */
        #my-div{
            width:100px;
            height:100px;
            background-color: aqua;
        }
    </style>
    <script>
        function myFunc(){
            // JavaScript 함수: myFunc
            // 'my-div' ID를 가진 요소를 찾아서 해당 요소의 텍스트 내용을 변경합니다.
            var myDiv=document.getElementById("my-div")
            myDiv.innerText='hello';
        }
    </script>
</head>
<body>
    <!-- HTML 요소: div -->
    <div id="my-div">

    </div>
    <!-- HTML 요소: button -->
    <button onclick="myFunc()">클릭</button>
</body>
</html>

See the Pen Untitled by 이현석 (@loxshqac-the-styleful) on CodePen.

이 코드는 myFunc 함수를 정의하여 'my-div' ID를 가진 <div> 요소를 찾고, 해당 요소의 텍스트 내용을 'hello'로 변경합니다. 이를 위해 버튼을 클릭하면 myFunc 함수가 실행됩니다. 스타일 시트는 'my-div' ID를 가진 <div> 요소에 너비, 높이 및 배경색을 설정합니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 'my-div' ID를 가진 요소의 스타일 설정 */
        #my-div{
            width:100px;
            height:100px;
            background-color: red;
        }
    </style>
    <!-- JavaScript 코드 정의 -->
    <script>
        // 색상 목록 배열 정의
        var colorList=['red','green','blue'];
        // 배열 인덱스 변수 초기화
        var i=0;
        
        // JavaScript 함수: myFunc
        function myFunc(){
            // 인덱스 증가
            i++;
            // 인덱스가 배열 길이보다 크거나 같을 때, 다시 0으로 초기화
            if(i>=colorList.length){
                i=0;
            }
            // 'my-div' ID를 가진 요소 찾기
            var myDiv=document.getElementById("my-div");
            // 찾은 요소의 배경색 변경
            myDiv.style.backgroundColor=colorList[i];
        }
    </script>
</head>
<body>
    <!-- HTML 요소: div -->
    <div id="my-div">
        JavaScript
    </div>
    <!-- HTML 요소: button -->
    <button onclick="myFunc()">클릭</button>
</body>
</html>

See the Pen getElementById2 by 이현석 (@loxshqac-the-styleful) on CodePen.

이 코드는 버튼을 클릭할 때마다 'my-div' ID를 가진 <div> 요소의 배경색을 순환하며 변경하는 간단한 예제입니다. JavaScript에서는 색상 목록을 정의하고, 클릭할 때마다 배열 인덱스를 증가시켜 다음 색상으로 변경합니다. 만약 배열 끝에 도달하면 다시 첫 번째 색상으로 돌아갑니다.

2. querySelector

이 메서드는 CSS 선택자를 사용하여 문서 내에서 요소를 선택합니다. 선택된 요소는 해당 CSS 선택자에 일치하는 첫 번째 요소입니다. querySelector는 CSS 선택자와 유사한 구문을 사용하며, 일반적으로 클래스, ID 및 태그 이름을 기반으로 요소를 선택하는 데 사용됩니다. 선택자는 CSS에서 사용하는 것과 동일한 구문을 따르며, 클래스는 점(.)으로 시작하고, ID는 해시(#)로 시작합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 'my-div' ID를 가진 요소의 스타일 설정 */
        #my-div{
            width:100px;
            height:100px;
            background-color: aqua;
        }
    </style>
    <!-- JavaScript 코드 정의 -->
    <script>
        // 변수 초기화: 너비와 높이
        var width = 100;
        var height = 100;

        // JavaScript 함수: myFunc
        function myFunc(){
            // 너비와 높이 갱신
            width = width + 100;
            height = height + 100;
            // 'my-div' ID를 가진 요소 찾기
            var myDiv = document.querySelector("#my-div");
            // 찾은 요소의 너비와 높이 변경
            myDiv.style.width = width + 'px';
            myDiv.style.height = height + 'px';
        }
    </script>
</head>
<body>
    <!-- HTML 요소: button -->
    <button onclick="myFunc()">클릭</button>
    <!-- HTML 요소: div -->
    <div id="my-div">
    </div>
</body>
</html>

See the Pen querySelector by 이현석 (@loxshqac-the-styleful) on CodePen.

이 코드는 버튼을 클릭할 때마다 <div> 요소의 너비와 높이를 100px씩 증가시키는 예제입니다. JavaScript에서는 변수 width와 height를 초기화하고, 클릭 이벤트가 발생하면 이 변수들을 100씩 증가시킵니다. 그런 다음 querySelector를 사용하여 ID가 "my-div"인 요소를 찾고, 해당 요소의 너비와 높이를 변경하여 사각형 모양을 만듭니다.

3. querySelectorAll

이 메서드는 CSS 선택자를 사용하여 문서 내에서 여러 요소를 선택하는 데 사용됩니다. 선택된 요소는 해당 CSS 선택자에 일치하는 모든 요소이며, NodeList라는 유사한 배열 형태의 객체로 반환됩니다.

querySelectorAll은 querySelector와 비슷한 구문을 사용하며, CSS 선택자를 인자로 받아 해당 선택자에 일치하는 모든 요소를 반환합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 'my-div' ID를 가진 요소의 스타일 설정 */
        #my-div{
            width:200px;
            height:400px;
            background-color: aqua;
        }
        /* 'box' 클래스를 가진 요소의 스타일 설정 */
        .box{
            width:100px;
            height:100px;
            background-color: blueviolet;
            margin:10px;
        }
    </style>
    <!-- JavaScript 코드 정의 -->
    <script>
        // JavaScript 함수: myFunc
        function myFunc(){
            // 'my-div' ID를 가진 요소 아래의 모든 '.box' 클래스 요소를 선택
            var box = document.querySelectorAll("#my-div > .box");
            // 선택된 모든 요소에 대해 반복하여 작업 수행
            for(var i = 0; i < box.length; i++){
                // 선택된 각 요소의 내용을 변경하고 스타일을 수정
                // box[i].innerText = '변경됨' + (i + 1);
                box[i].innerHTML = '<b style="color:red">변경됨' + (i + 1) + '</b>'; // 내용 변경 및 스타일 지정
                box[i].style.backgroundColor = "blue"; // 배경색 변경
            }
        }
    </script>
</head>
<body>
    <!-- HTML 요소: button -->
    <button onclick="myFunc()">클릭</button>
    <!-- HTML 요소: div -->
    <div id="my-div">
        <!-- 'box' 클래스를 가진 세 개의 div 요소 -->
        <div class="box">박스1</div>
        <div class="box">박스2</div>
        <div class="box">박스3</div>
    </div>
</body>
</html>

See the Pen querySelectorAll by 이현석 (@loxshqac-the-styleful) on CodePen.

이 코드는 "클릭" 버튼을 클릭하면 JavaScript 함수 myFunc가 실행되며, querySelectorAll을 사용하여 ID가 "my-div"인 요소의 하위 요소 중 클래스가 "box"인 모든 요소를 선택합니다. 그런 다음 선택된 각 요소에 대해 반복문을 사용하여 내용을 변경하고 스타일을 수정합니다.

선택된 각 요소의 내용은 '<b style="color:red">변경됨' + (i + 1) + '</b>'으로 변경됩니다. 즉, "변경됨 1", "변경됨 2", "변경됨 3"으로 표시됩니다. 또한, 각 요소의 배경색도 "blue"로 변경됩니다.

주의: 이 코드에서는 innerText 대신 innerHTML을 사용하여 내용을 변경했습니다. 이는 <b> 태그를 삽입하기 위함입니다. 이것은 해당 텍스트를 굵게 표시하기 위함입니다.

4. getElementsByClassName

이 메서드는 클래스 이름을 사용하여 문서 내에서 요소를 선택하는 데 사용됩니다. 선택된 요소는 해당 클래스 이름을 가진 모든 요소이며, HTMLCollection 형태로 반환됩니다.

getElementsByClassName은 해당 클래스 이름을 가진 모든 요소를 선택합니다. 그러나 반환되는 값은 HTMLCollection으로, 이는 실제 배열이 아니라 유사 배열 객체입니다. 따라서 배열 메서드를 직접 사용할 수 없으며, 반복문을 사용하여 각 요소에 접근해야 합니다.

getElementsByClassName은 모든 자식 요소에서 클래스 이름을 검색하므로, 클래스 이름이 중첩되지 않은 한 요소에 대한 참조를 반환합니다. 만약 중첩된 요소 중에서 클래스 이름이 일치하는 요소를 찾으려면 querySelector를 사용하는 것이 좋습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 'my-div' ID를 가진 요소의 스타일 설정 */
        #my-div{
            width:200px;
            height:400px;
            background-color: aqua;
        }
        /* 'box' 클래스를 가진 요소의 스타일 설정 */
        .box{
            width:100px;
            height:100px;
            background-color: blueviolet;
            margin:10px;
        }
    </style>
    <!-- JavaScript 코드 정의 -->
    <script>
        // JavaScript 함수: myFunc
        function myFunc(){
            // 클래스 이름이 "box"인 모든 요소를 가져옵니다.
            var box = document.getElementsByClassName("box");
            // 가져온 요소들에 대해 반복하여 작업을 수행합니다.
            for(var i = 0; i < box.length; i++){
                // 각 요소의 내용을 변경하고 스타일을 수정합니다.
                // box[i].innerText = '변경됨' + (i + 1);
                box[i].innerHTML = '<b style="color:red">변경됨' + (i + 1) + '</b>'; // 내용 변경 및 스타일 지정
                box[i].style.backgroundColor = "blue"; // 배경색 변경
            }
        }
    </script>
</head>
<body>
    <!-- HTML 요소: button -->
    <button onclick="myFunc()">클릭</button>
    <!-- HTML 요소: div -->
    <div id="my-div">
        <!-- 클래스 이름이 "box"인 세 개의 div 요소 -->
        <div class="box">박스1</div>
        <div class="box">박스2</div>
        <div class="box">박스3</div>
    </div>
</body>
</html>

See the Pen getElementsByClassName by 이현석 (@loxshqac-the-styleful) on CodePen.

이 코드는 "클릭" 버튼을 클릭하면 JavaScript 함수 myFunc가 실행됩니다. 이 함수는 getElementsByClassName을 사용하여 클래스 이름이 "box"인 모든 요소를 가져와서 내용을 변경하고 스타일을 수정합니다.

글을 마치며

DOM이란 무엇인지? 또 요소에 엑세스 하는 기본적인 메서드들을 알아봤습니다. 이보다 더 많은 메서드들이 있지만 해당 내용은 다른 게시글에서 다룰 거 같습니다. 이번 예시들은 Onclick을 이용한 것들이 대부분이었는데요, 다음에는 직접 Input을 받거나 checkBox, slect 등을 이용해서 dom을 이용하는 방법을 작성해 보도록 하겠습니다. 감사합니다.

저작자표시 비영리 변경금지

'Java Script' 카테고리의 다른 글

[Java Script] DOM / audio객체, 동적 생성 및 제거 (0)	2024.04.24
[Java Script] DOM / setAttribute, getAttribute (0)	2024.04.01
[Java Script] DOM / Input Control (0)	2024.04.01
[Java Script] JSON, API (0)	2024.03.25
[Java Script] 내장 객체(Array, Number, String, Date...) , Moment.js, 사용자 정의 객체 (0)	2024.03.22

현재글[Java Script] DOM / 기본 메서드

개발자가 되고싶습니다.

Controller, JAVA Script, java, javascript, JQuery, node.js, springboot게시판, Servlet, mysql, springboot,

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

많고 많은 코딩블로그중 하나