HAHYE_ARCHIVE
[새싹 프론트엔드] 자바스크립트 문서객체모델 - 1 본문
https://sustaining-firefly-af5.notion.site/5-20221214-a212deddbbda4c9e844a19f203bd6a97
5회차 - 20221214 스터디
문서객체모델
sustaining-firefly-af5.notion.site
이친구도 마찬가지로 노션에 정리해둔거 올립니다
캡쳐 등 이미지까지 깔끔하게 보고싶다면 올려둔 노션 참고해주세용!!
문서객체모델
DOMContentLoaded 이벤트
‼️ 이 친구는 오탈자를 입력해도 오류를 발생하지 않으니 사용시 주의~!
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//HTML 태그를 쉽게 만들 수 있는 콜백 함수를 선언
const h1 = (text) => `<h1>${text}</h1>`
</script>
<script>
//innerHTML : body태그가 생성되기 이전에 script태그로 body태그를 조작합니다
document.body.innerHTML += h1('1번째 script 태그')
// 앞에서 선언한 h1함수를 실행합니다
</script>
</head>
<body>
<script>
document.body.innerHTML += h1('2번째 script 태그')
</script>
<h1>1번째 h1 태그</h1>
<script>
document.body.innerHTML += h1('3번째 script 태그')
</script>
<h1>2번째 h2 태그</h1>
</body>
→ head에서 선언했던 친구는 화면에 출력되지 않음
왜? head 태그 내부에 script 태그를 배치하면 body 태그에 있는 문서객체(요소)에 접근할 수 없음!!!!
DOMContentLoaded ****이 이벤트 친구는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트임!!!
문서 객체 가져오기
document.body 문서의 body 요소를 읽어들일 수 있음 body 부분은 head, title 로 변경해서 읽을수있음
document.querySelector(선택자) 선택자 부분에는 CSS 선택자를 입력함
선택자에는 태그선택자, 아이디선택자, 클래스선택자, 속성선택자, 후손선택자 등이 있음
querySelector()메소드 요소 하나만 추출, querySelectorAll() 문서객체를 여러개 호출
<script>
document.addEventListener('DOMContentLoaded', () => {
//요소를 읽어들임
//h1 태그 이름으로 요소를 선택함
const header = document.querySelector('h1')
//텍스트와 스타일을 변경함
header.textContent = 'HEADERS'
header.style.color = 'white'
header.style.backgroundColor = 'black'
header.style.padding = '10px'
});
</script>
</head>
<body>
<h1></h1>
</body>
querySelector() 메소드를 사용해서 h1태그 추출하고 조작
<script>
document.addEventListener('DOMContentLoaded', () => {
//요소를 읽어들임
//태그 이름으로 요소를 선택함
const header = document.querySelectorAll('h1')
//텍스트와 스타일을 변경함
header.forEach((header) => {
header.textContent = 'HEADERS'
header.style.color = 'white'
header.style.backgroundColor = 'black'
header.style.padding = '10px'
})
});
</script>
</head>
<body>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
</body>
querySelectorAll() 메소드를 사용해서 h1태그 추출하고 조작
문서 객체 여러개를 배열로 읽어들이는 함수임. 따라서 내부의 요소에 접근하고 활용하려면 반복 을 돌려야함
일반적으로 forEach() 메소드를 사용해서 반복돌림
글자조작하기
문서객체.textContent : 입력한 문자열을 그대로 넣기
문서객체.innerHTML : 입력된 문자열을 HTML 형식으로 넣기
textContent 속성의 경우 : 글자가 그래도 들어감
innerHTML : <h1>~</h1> 요소로 변환해서 들어감
속성 조작하기
문서객체.setAttribute(속성이름,값) : 특성 속성에 값을 지정
문서객체.getAttribute(속성이름) : 특정 속성을 추출함
스타일 조작하기
자바스크립트에서는 기호를 식별자에 사용할수 없으므로, 두 단어 이상의 속성은 카멜케이스로 나타냄
background-color : backgroundColor
text-align : textAlign
font-size : fontSize
이런식으로도 스타일 조정 가능
<aside> 💡 h1.style[’bockground-color’]
</aside>
다음과 같은 3가지 방법으로 스타일 조정가능 일반적으로는 첫번째 많이씀!
h1.style.backgroundColor
h1.style['backgroundColor']
h1.style['background-color']
<script>
document.addEventListener('DOMContentLoaded', () => {
// body 태그 아래에 있는 div 태그를 선택함
const divs = document.querySelectorAll('body > div')
// div 갯수만큼 반복하여 출력
divs.forEach((div, index) => {
console.log(div, index)
// 인덱스는 0부터 24까지 반복
const val = index * 10
// 크기를 지정할 때는 반드시 단위를 함께 붙여줘야함
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><div></div><div></div><div></div><div></div><div></div>
</body>
문서 객체 생성하기
document.createElement(문서객체이름)
문서 객체에는 appendChild()메소드가 존재함 이를 활용하면 어떤 부모 객체 아래에 자식 객체를 추가할수있음
부모객체.appendChild(자식객체)
<script>
document.addEventListener('DOMContentLoaded', () => {
// 문서객체 생성하기
// h1 태그 생성하기
const header = document.createElement('h1')
// 생성한 태그 조작하기
header.textContent = '문서 객체 동적으로 생성하기'
header.setAttribute('data-custom', '사용자 정의 속성')
header.style.color = 'white'
header.style.backgroundColor = 'black'
// h1 태그를 body 태그 아래에 추가하기
document.body.appendChild(header)
})
</script>
문서객체 이동하기
appendChild() 메소드는 문서 객체를 이동할때도 사용가능!!
<script>
document.addEventListener('DOMContentLoaded', () => {
// 문서 객체 읽어들이고 생성하기
// id 속성이 first인 div를 선택합니다
const divA = document.querySelector('#first')
// id 속성이 second인 div를 선택합니다
const divB = document.querySelector('#second')
// h1태그 생성
const h1 = document.createElement('h1')
h1.textContent = '이동하는 h1 태그'
// 서로 번갈아가면서 실행하는 함수를 구현합니다
const toFirst = () => {
// h1을 divA에 추가
divA.appendChild(h1)
// 1초 뒤에 toSecond 함수를 실행
setTimeout(toSecond, 1000)
}
const toSecond = () => {
// h1을 divB에 추가
divB.appendChild(h1)
// 10초 뒤에 toFirst 함수를 실행
setTimeout(toFirst, 10000)
}
toFirst()
})
</script>
</head>
<body>
<div id="first">
<h1>첫 번째 div 태그 내부</h1>
</div>
<hr>
<div id="second">
<h1>두번째 div 태그 내부</h1>
</div>
</body>
문서객체 제거하기
removeChild() 이용해서 제거
appendChild()메소드 등으로 부모 객체와 이미 연결이 완료된 문서 객체의 경우 parentNode 속성으로 부모객체에 접근할 수 있으므로, 밑의 형태의 코드를 사용함
<aside> 💡 문서객체.parentNode.removeChile(문서객체)
</aside>
밑줄부분으로 부모객체를 선택할 수 있음!!
이벤트 설정하기
<aside> 💡 document.addEventListener(’DOMContentLoaded’.() ⇒ { })
</aside>
document라는 문서 객체의 DOMContentLoaded 이벤트가 발생했을 때 매개변수로 지정한 콜백함수를 실행하라는 의미의 문장임!!
이벤트가 발생할때 실행할 함수는 addEventListener()
<aside> 💡 문서객체.addEventListener(이벤트이름, 콜백함수)
</aside>
콜백함수 부분은 이벤트리스너 또는 이벤트핸들러라고 부름
<script>
document.addEventListener('DOMContentLoaded', () => {
let counter = 0
const h1 = document.querySelector('h1')
// h1태그에 이벤트가 발생할 때 실행할 함수
h1.addEventListener('click', (event) => {
counter++
h1.textContent = `클릭 횟수 : ${counter}`
});
})
</script>
<style>
/* 클릭을 여러번 했을 때, 글자가 선택되는 것을 막기 위한 스타일 */
h1 {
user-select: none;
}
</style>
</head>
<body>
<h1>클릭 횟수 : 0</h1>
</body>
css를 사용함 : user-select 속성을 none으로 지정하면 해당 태그를 마우스로 드래그할수 없음!!
이벤트를 제거할때는 removeEventListener() 메소드 사용함
<aside> 💡 문서객체.removeEventListener(이벤트이름, 이벤트리스너)
</aside>
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 8주차 블로그 포스팅
'새싹' 카테고리의 다른 글
| [새싹 프론트엔드] 프로젝트 준비를 위한 준비 - 1 (0) | 2022.12.25 |
|---|---|
| [새싹 프론트엔드] React Hooks 복습 (0) | 2022.12.20 |
| [새싹 프론트엔드] 자바스크립트 객체 정리 (0) | 2022.12.15 |
| [새싹 프론트엔드] 노션정리^^ (0) | 2022.11.28 |
| [새싹 프론트엔드] 자바스크립트 복습 (1) | 2022.11.21 |
