[JavaScript] 글자·스타일·속성 조작하기, 문서 객체 생성·이동·제거하기

리버 River 2024. 4. 2. 20:28

2024. 4. 2. 20:28

1. 글자 조작하기

속성 이름	설명
문서 객체.textContent	입력된 문자열을 그대로 넣음
문서 객체.innerHTML	인력된 문자열을 HTML 형식으로 넣음

<head>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const a = document.getElementById('a');
            const b = document.querySelector('#b'); // 아이디 선택자 사용.

            a.textContent = '<h1>textContent 속성</h1>';
            b.innerHTML = '<h1>innerHTML 속성</h1>';
        })
    </script>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
</body>

2. 스타일 조작하기

👩🏻‍💻 자바스크립트의 style 속성들의 이름이 CSS에서 사용할 때와 차이가 없음
👩🏻‍💻 자바스크립트에서는 -가 연산자이고, 식별자에 사용할 수 없어서 두 단어의 조합은 캐멀 케이스로 표현

CSS 속성 이름	자바스크립트 style 속성 이름
background-color	backgroundColor
text-align	textAlign
font-size	fontSize

💡 스타일을 조정하는 방법
h1.style.backgroundColor ▶️ 이 형태를 가장 많이 사용
h1.style['backgroundColor']
h1.style['background-color'

<head>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const divs = document.querySelectorAll('body > div');

            divs.forEach((div, index) => { // div 개수 만큼 반복 출력.
                console.log(div, index);
                const val = index * 10; // index는 0부터 24까지 반복.
                div.style.height = `10px`; // 크기를 지정할 때는 반드시 단위를 붙여줘야 함.
                div.style.backgroundColor = `rgba(${val}, ${val}, ${val})`;
            })
        });
    </script>
</head>
<body>
    <!-- div 태그 25개 -->
    <div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div>
</body>

3. 속성 조작하기

👩🏻‍💻 문서 객체의 속성을 조작할 때는 다음과 같은 메소드를 사용

메소드 이름	설명
문서 객체.setAttribute(속성 이름, 값)	특정 속성에 값을 지정
문서 객체.getAttribute(속성 이름)	특정 속성을 추출

<head>    
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const rects = document.querySelectorAll('.rect'); // 클래스 선택자 이용.

           // for (let i = 0; i < rects.length; i++) {
           //     const width = (i + 1) * 100; // 100, 200, 300, 400의 너비를 가짐.
           //     const src = `http://placebear.com/${width}/250`;
           //     rects[i].setAttribute('src', src); // src 속성에 값을 지정.
           // }

           // foreach() 메서드로 동일한 작업
           rects.forEach((item, index) => {
               const width = (index + 1) * 100;
               const src = `http://placebear.com/${width}/250`;
               item.setAttribute('src', src); // src 속성에 값을 지정.
           })

        })
    </script>
</head>
<body>
    <img class="rect" alt="" src="">
    <img class="rect" alt="" src="">
    <img class="rect" alt="" src="">
    <img class="rect" alt="" src="">
</body>

예제

<head>
    <script>
        /*
        버튼을 클릭하면 버튼에 있는 색상으로 과일 목록이 글자색이 변하도록
         */
        document.addEventListener('DOMContentLoaded', () => {
            const btns = document.querySelectorAll('div button');
            const fruits = document.querySelectorAll('ul li');
            const colors = ['red', 'orange', 'yellow'];

            btns.forEach((item, index) => {
                item.addEventListener('click', () => {
                    fruits.forEach((item) => {
                        item.style.color = colors[index];
                    })
                })
            })

        })
    </script>
</head>
<body>
    <ul>
        <li id="apple">Apple</li>
        <li id="banana">Banana</li>
        <li id="orange">Orange</li>
    </ul>
    <div>
        <button>red</button>
        <button>orange</button>
        <button>yellow</button>
    </div>
</body>

4. 문서 객체 생성하기

document.createElement(문서 객체 이름)
부모 객체.appendChild(자식 객체)

📌 createElement()

- body 태그 내부에 있는 특정 문서 객체를 읽어들이고 조작하는 것도 가능하나 문서 객체를 생성하는 것도 가능
- 문서 객체를 생성하고 싶을 때는 document.createElement() 메소드를 사용

📌 appendChild()

- 문서 객체를 만든 후에는 '문서 객체를 추가'해야 함
- appendChild() 메소드를 활용하면 부모 객체 아래에 자식 객체를 추가할 수 있음

<script>
    // createElement() 메소드로 h1 태그를 생성하고, appendChild()를 사용하여 객체를 추가.
    document.addEventListener('DOMContentLoaded', () => {
        // 문서 객체 생성하기
        const header = document.createElement('h1');

        // 생성한 태그 조작하기
        header.textContent = '문서 객체 동적으로 생성하기';
        header.setAttribute('data-custom', '사용자 정의 속성');
        header.style.color = 'white';
        header.style.backgroundColor = 'black';
        console.log(header);

        // h1 태그를 body 태그 아래에 추가하기
        document.body.appendChild(header);
    })
</script>

5. 문서 객체 이동하기

👩🏻‍💻 appendChild() 메소드를 사용하면 문서 객체를 이동할 수도 있음
▶️ 문서 객체를 다른 문서 객체에 추가하면 문서 객체가 이동

<head>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 문서 객체 읽어들이고 생성하기
            const divA = document.querySelector('#first'); // id 속성이 first인 태그를 반환
            const divB = document.getElementById('second'); // id 속성이 second인 태그를 반환

            const h1 = document.createElement('h1'); // h1 태그를 생성
            h1.textContent = '이동하는 h1 태그';

            // 서로 번갈아가면서 실행하는 함수를 구현
            const toFirst = () => {
                divA.appendChild(h1); // h1을 divA에 추가
                setTimeout(toSecond, 1000); // 1초 후에 toSecond() 함수를 실행
            }
            const toSecond = () => {
                divB.appendChild(h1); // h1을 divB에 추가
                setTimeout(toFirst, 1000);
            }
            toFirst();
        });
    </script>
</head>
<body>
    <div id="first">
        <h1>첫 번째 div 태그 내부</h1>
    </div>
    <hr>
    <div id="second">
        <h1>두 번째 div 태그 내부</h1>
    </div>

</body>

6. 문서 객체 제거하기

👩🏻‍💻 문서 객체를 제거할 때는 removeChild() 메소드를 사용

부모 객체.removeChild(자식 객체);

👩🏻‍💻 appendChild() 메소드 등으로 부모 객체와 이미 연결이 완료된 문서 객체의 경우 parentNode 속성으로
부모 객체에 접근할 수 있으므로, 일반적으로 어떤 문서 객체를 제거할 때는 다음과 같은 형태의 코드 사용

문서 객체.parentNode.removeChild(문서 객체);

<head>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(() => {
                const h1 = document.querySelector('h1');
                h1.parentNode.removeChild(h1);
            }, 3000);
        })
    </script>
</head>
<body>
   <hr>
   <h1>제거 대상 문서 객체</h1>
   <hr>
</body>

예제

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
    <script>
        /*
        1. 버튼을 클릭하면 무지개색 li가 추가
        2. 같은 색깔의 li는 2개가 될 수 없음
         */
        document.addEventListener('DOMContentLoaded', () => {
            const btn = document.querySelector('button');
            const ulTag = document.querySelector('ul');
            const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

            let cnt = 0;
            btn.addEventListener('click', function () {
                const liTag = document.createElement('li');

                liTag.textContent = colors[cnt % colors.length];
                liTag.style.backgroundColor = colors[cnt++ % colors.length];
                liTag.style.color = 'white';

                if (cnt > colors.length) {
                    const firstLi = document.querySelector('ul li:nth-child(1)');
                    firstLi.parentNode.removeChild(firstLi);
                }
                ulTag.appendChild(liTag);
            });
        });
    </script>
</head>
<body>
    <button>무지개색 추가</button>
    <ul>

    </ul>
</body>

[ 내용참고 : IT 학원 강의 및 책 '혼자 공부하는 자바스크립트' ]

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

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] 키보드 이벤트 및 관련 속성, 이벤트 발생 객체 - 리스너를 외부로 빼낸 경우 와 글자입력 양식 이벤트 (0)	2024.04.03
[JavaScript] 이벤트 핸들러 등록과 제거 (0)	2024.04.02
[JavaScript] 문서객체모델 - DOMContentLoaded, 문서 객체 가져오기 (0)	2024.04.02
[JavaScript] 타이머 함수, 기본 매개변수, 즉시 호출 함수, 엄격모드 (0)	2024.03.31
[JavaScript] 재귀 함수, 콜백 함수, 화살표 함수 (0)	2024.03.30

ID_ allriver