티스토리 뷰
아! 그리고… 족장님, 맞아요! 저희는 자매였습니다! ㅋㅋㅋㅋ
이름이랑 뒷번호 때문에 혹시 알아채실까 했는데… 결국 들통나버렸네요 🤣
제가 동생한테 같이 하자고 (거의 협박하듯이ㅎㅎ) 추천해서, 서로 체크해 주면서 열심히 공부했어요.
결론은 둘 다 100% 만족한 혼공단 시간이었습니다!
아무튼, 마지막 주차 공부 시작해보겠습니다! 🚀
CH 07 문서 객체 모델
7-1 문서 객체 조작하기
문서 객체(Document Object): 웹 페이지의 요소들을 의미하며, HTML의 각 요소를 객체 형태로 표현한 것
문서 객체 모델(DOM, Document Objects Model): 문서 객체를 조합해서 만든 전체적인 형태
- DOMContentLoaded 이벤트
HTML 문서의 요소(DOM)가 모두 로드된 후에 자바스크립트를 실행하기 위해서
HTML 코드를 자바스크립트로 조작하기
<script>
document.addEventListener('DOMContentLoaded',() => {
const h1=(text) => `<h1>${text}</h1>`
document.body.innerHTML+=h1('DOMContentLoaded 이벤트 발생')
})
</script>
</head>
<body>
</body>
-DOM이 완전히 로드된 후에만 실행되므로, HTML 요소가 없어서 생기는 오류를 방지할 수 있음
-동적으로 HTML을 추가할 때 유용하며, 특히 body 태그가 다 로드되기 전에 실행될 가능성이 있는 코드에서는 필수적!
- 문서 객체 가져오기
-document.body
코드 사용하면 문서의 요소를 읽어들일 수 있음
ex) document.head , document.body, document.title
-document.querySelector(선택자), document.querySelectorAll(선택자)
선택자 부분에는 CSS 선택자를 입력한다 .기본적인 선택자는 아래와 같다.
| 이름 | 선택자 형태 | 설명 |
| 태그 선택자 | 태그 | 특정 태그를 가진 요소를 추출함 |
| 아이디 선택자 | #아이디 | 특정 id속성을 가진 요소를 추출함 |
| 클래스 선택자 | .클래스 | 특정 class 속성을 가진 요소를 추출함 |
| 속성 선택자 | [속성=값] | 특정 속성 값을 갖고 있는 요소를 추출함 |
| 후손 선택자 | 선택자_A 선택자_B | 선택자_A 아래에 있는 선택자_B를 선택함 |
<script>
document.addEventListener('DOMContentLoaded',() => {
//요소를 읽어들인다.
const header=document.querySelector('h1')
//텍스트와 스타일을 변경함
header.textContent='HEADERS'
header.style.color='white'
header.style.backgroundColor='black'
header.style.padding='10px'
})
</script>
</script>
</head>
<body>
<h1></h1>
</body>-실제 h1태그에는 내용을 입력하지 않았지만, 자바스크립트에서 문서 객체를 조작했으므로 출력됨.
- 글자 조작하기
-문서객체.textContent : 입력된 문자열을 그대로 넣습니다.
-문서객체.innerHTML: 입력된 문자열을 HTML 형식으로 넣습니다.
<script>
document.addEventListener('DOMContentLoaded',() => {
const a=document.querySelector('#a') //특정 아이디로 요소를 선택함
const b=document.querySelector('#b')
a.textContent='<h1>textContent 속성</h1>'
b.innerHTML='<h1>innerHTML 속성</h1>'
})
</script>
</script>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>textContent 속성의 경우는 글자가 그대로 들어갔지만, innerHTML속성은 h1요소로 변환해서 들어간다.
- 속성 조작하기
-문서객체.setAttribute(속성이름, 값): 특정 속성에 값을 지정함
-문서객체.getAttribute(속성이름) : 특정 속성을 추출함
- 스타일 조작하기
문서 객체의 스타일을 조작할 때는 style 속성을 사용하며, 내부에는 CSS에서 지정할 수 있는 다양한 스타일 속성이 포함된다.
다만, 자바스크립트에서는 - 기호를 식별자에 사용할 수 없기 때문에 CSS 속성과 표기 방식이 약간 다르다. 두 단어 이상의 속성은 - 기호를 제거하고, 뒤따르는 알파벳을 대문자로 변환하는 캐멀 케이스(Camel Case) 방식으로 작성해야 한다.
Ex) h1.style.backgroundColor = "blue"; // CSS의 background-color → backgroundColor
<script>
document.addEventListener('DOMContentLoaded',() => {
const divs=document.querySelectorAll('body>div')
divs.forEach((div,index)=>{
console.log(div,index)
const val=index * 10
div.style.height=`10px`
div.style.backgroundColor=`rgba(${val},${val},${val})`
})
})
</script>
</script>
</head>
<body>
<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><결과>
- 문서 객체 생성하기
-document.createElement(문서 객체 이름)
위 메서드를 사용하면 새로운 문서 객체를 생성할 수 있다.
하지만 생성된 객체가 자동으로 문서에 추가되는 것은 아니다. 어디에 배치할지를 지정해야 한다.
-문서 구조와 트리(Tree) 개념
HTML 문서는 계층 구조를 가지며, 이를 트리(tree)라고 한다.
상위 요소를 부모(Parent), 하위 요소를 자식(Child)이라고 부른다.
-요소 추가하기
부모객체.appendChild(자식객체);
부모 요소의 하위에 새로운 자식 요소를 추가할 때 사용 /
<script>
document.addEventListener('DOMContentLoaded',() => {
//문서 객체 생성하기
const header=document.createElement('h1')
//생성된 태그 조작하기
header.textContent='문서 객체 동적으로 생성하기'
header.setAttribute('data-custom','사용자 정의 속성')
header.style.color='white'
header.style.background='black'
//h1 태그를 body 태그 아래에 추가하기
document.body.appendChild(header)
})
</script>
</script>
</head>
<body>
</body>코드를 실행하면 h1태그를 출력함.
- 문서 객체 이동하기
appendChild() 메소드는 문서 객체를 이동할 때도 사용할 수 있다. 문서 객체의 부모는 언제나 하나여야 한다. 따라서 문서 객체를 다른 문서 객체에 추가하면 문서 객체가 이동한다.
const parent1 = document.getElementById("parent1");
const parent2 = document.getElementById("parent2");
const child = document.getElementById("child");
// child를 parent2로 이동
parent2.appendChild(child);
- 문서 객체 제거하기
-부모 객체.removeChild(자식 객체)
-문서 객체.parentNode.removeChild(문서 객체)
- 이벤트 설정하기
- 문서 객체.addEventListener(이벤트 이름, 콜백 함수)
addEventListener() 메서드는 특정 이벤트가 발생했을 때 실행할 콜백 함수를 지정하는 방법이다.
이벤트 이름은 발생할 이벤트 종류(예: click, keydown, mouseover 등)이며, 콜백 함수는 이벤트 발생 시 실행될 함수이다
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
alert("버튼이 클릭되었습니다!");
});
위 예제에서 button 요소에 click 이벤트가 발생하면 알림창이 뜨게 된다.
7-2 이벤트 활용
- 키보드 이벤트
keydown : 키가 눌릴 때 실행됨, 키보드를 꾹 누르고 있을 떄도, 입력될 때도 실행됨
keypress: 키가 입력되었을 때 실행됨, 하지만 웹 브라우저에 따라서 아시아권의 문자를 제대로 처리하지 못하는 문제가 있음
keyup: 키보드에서 키가 떨어질 때 실행됨
- 이벤트 발생 객체
<script>
document.addEventListener('DOMContentLoaded',() => {
const textarea=document.querySelector('textarea')
const h1=document.querySelector('h1')
textarea.addEventListener('keyup',(event)=>{
const length=textarea.value.length
h1.textContent=`글자 수: ${length}`
})
})
</script>
</script>
</head>
<body>
<h1></h1>
<textarea></textarea>
</body>
- 글자 입력 양식 이벤트
code : 입력한 키
keyCode : 입력한 키를 나타내는 숫자
altKey: Alt 키를 눌렀는지
ctrlKey: Ctrl 키를 눌렀는지
shiftkey: Shift키를 눌렀는지
ex) 기본 select 태그
<script>
document.addEventListener('DOMContentLoaded',() => {
const select=document.querySelector('select')
const p=document.querySelector('p')
select.addEventListener('change',(event) => {
const options=event.currentTarget.options
const index=event.currentTarget.options.selectedIndex
p.textContent=`선택: ${options[index].textContent}`
})
})
</script>
</script>
</head>
<body>
<select>
<option>떡볶이</option>
<option>순대</option>
<option>오뎅</option>
<option>튀김</option>
</select>
<p> 선택: 떡볶이</p>
</body>
- 기본 이벤트 막기
기본 이벤트: 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것
* 인터넷에서 이미지 불펌방지 등을 구현할 때 사용하는 코드임
-event 객체의 preventDefault() 메소드 사용
<script>
document.addEventListener('DOMContentLoaded',() => {
let status=false
const checkbox=document.querySelector('input')
checkbox.addEventListener('change',(event)=>{
status=event.currentTarget.checked
})
const link=document.querySelector('a')
link.addEventListener('click',(event)=>{
if(!status){
event.preventDefault()
}
})
})
</script>
</head>
<body>
<input type="checkbox">
<span>링크 활성화</span>
<br>
<a href="=http://hanbit.co.kr">한빛미디어</a>
</body>
<기본숙제>
p.315의 <직접 해보는 손코딩>을 실행한 후 출력되는 고양이 이미지 캡쳐하기
<script>
document.addEventListener('DOMContentLoaded',()=>{
const rects=document.querySelectorAll('.rect')
rects.forEach((rect,index)=>{
const width=400
const src = `http://placekitten.com/${width}/250`;
rect.setAttribute('src',src)
})
})
</script>
</head>
<body>
<img class="rect">
<img class="rect">
<img class="rect">
<img class="rect">
</body>
<추가숙제>
p.352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡쳐하기
