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 |
