07-1 문서객체 조작하기
- 문서객체란? html의 요소와 같은것
- 왜 자바스크립트를 통해 문서객체를 조작해야 하는가?
! 화면의 동적인 움직임을 만들기 위해 JS를 사용한다. 이때 DOM (Document Object Model)을 사용하는 것이다. 이것을 그동안 우리는 jquery library 를 이용해서 간편하게 해왔던 것이다.
- 제이쿼리와 같은 라이브러리와 리액트와 같은 프레임워크
►리액트는 라이브러리? 프레임워크?
- 둘다 다른 누군가가 써놓은 코드를 내가 편하게 코딩을 하기위해 가져다 쓰는 것이다.
- 가장 큰 차이점은 "누가 누구를 통제하는가?"
| 라이브러리 | 프레임워크 | |
| 특징 | '내'가 필요할때 가져다 쓴다 | "프레임 워크"가 당신을 부른다. "프레임 워크"의 규칙을 따라야한다. (어디에 뭘 어떤 코드를 써야하는지 등등) |
| 대표적인 예시 | jquery | django web framework |
- 결론적으로, 리액트는 UI를 구축할때 "내"가 리액트를 가져다가 쓴다는 면에서는 "라이브러리"이면서도,
- "리액트"에서 우리가 작성한 컴포넌트를 부른다는 면에서는 "프레임워크"라고 볼수 있다.
- 이것은 명확하게 구분지을수 없으며, 구분지을 필요도 없다.
- 그러나 개념적으로 라이브러리와 프레임워크의 차이점을 알고 있는 것은 도움이 된다.
DOMContentLoaded 이벤트
- HTML 페이지의 모든 문서 객체(요소)를 웹 브라우저가 읽어들였을 때 발생시키는 이벤트입니다.
문서객체 가져오기
- querySelector() : 요소를 하나만 추출
- querySelectorAll() : 문서객체를 여러개 추출
- forEach() : querySelectorAll() ㅔ소드를 사용할때 내부의 요소에 접근하고 활용하기 위해서 반복이 필요한데 이때 활용함
사용 예시
<script>
document.addEventListener('DOMContentLoaded', () => {
// 요소를 읽어들입니다.
const headers = document.querySelectorAll('h1')
// 텍스트와 스타일을 변경합니다.
headers.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>
글자 조작하기
- 문서객체.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>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
속성 조작하기
- 문서객체.setAttribute(속성이름, 값) : 특정 속성에 값을 지정합니다.
- 문서객체.getAttribute(속성이름) : 특정 속성을 추출합니다.
사용예시
<script>
document.addEventListener('DOMContentLoaded', () => {
const rects = document.querySelectorAll('.rect')
rects.forEach((rect, index) => {
const width = (index + 1) * 100
const src = `http://placekitten.com/${width}/250`
// 간단한 사용예: rect.src = src
rect.setAttribute('src', src)
})
})
</script>
</head>
<body>
<img class="rect">
<img class="rect">
<img class="rect">
<img class="rect">
</body>
스타일 조작하기
- 자바스크립트에서 스타일을 조작하는 방법
문서 객체 생성하기
- document.createElement(문서 객체 이름) : 문서객체를 생성할때 사용
- 부모객체.appendChild(자식객체) : 어떤 부모 객체 아래에 자식 객체를 추가할 때 사용.
문서 객체 이동하기
- 문서객체의 부모는 언제나 하나여야 하는데, 따라서 문서객체를 다른 문서 객체에 추가하면 문서객체가 이동한다.
사용 예시
<script>
document.addEventListener('DOMContentLoaded', () => {
// 문서 객체 읽어들이고 생성하기
// id 속성이 first인 div tag를 선택
const divA = document.querySelector('#first')
// id 속성이 second인 div tag를 선택
const divB = document.querySelector('#second')
// h1 tag를 생성
const h1 = document.createElement('h1')
h1.textContent = '이동하는 h1 태그'
// 서로 번갈아가면서 실행하는 함수를 구현합니다.
const toFirst = () => {
// h1을 divA에 추가
divA.appendChild(h1)
// 1초(1000밀리초) 뒤에 toSecond함수를 실행
setTimeout(toSecond, 1000)
}
const toSecond = () => {
// h1을 divB에 추가
divB.appendChild(h1)
// 10초(10000밀리초) 뒤에 toSecond함수를 실행
setTimeout(toFirst, 10000)
}
toFirst()
})
</script>
</head>
<body>
<div id="first">
<h1>첫 번째 div 태그 내부</h1>
</div>
<hr>
<div id="second">
<h1>두 번째 div 태그 내부</h1>
</div>
</body>
문서 객체 제거하기
- 부모객체.removeChild(자식객체)
- 부모객체에 이미 연결된 문서 객체의 경우: 문서 객체.parentNode.romoveChild(문서 객체)
이벤트 설정하기
- 문서객체.addEventListener(이벤트 이름, 콜백 함수)
- 이때 실행할 함수를 event listener 또는 event handler 라고 함.
총 정리
이 부분을 통해서 DOM 이라는 개념을 이해 할 수 있다.
DOM이란?
- HTML, XML 문서의 프로그래밍 interface
- 문서의 구조화된 표현(structured representation)을 제공
- 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
- DOM 은 nodes와 objects로 문서를 표현
◆ nodes란? 링크와 링크로 연결된 하나의 지점을 의미한다. 그것은 1대의 컴퓨터가 될수도 있고, 어떠한 추상적인 개념이 될 수도 있다.
'Hanghae99' 카테고리의 다른 글
| 221201 TIL Visual Studio Code에서 github 연결하기 (0) | 2022.12.02 |
|---|---|
| 221201 TIL 07 문서 객체 모델 (Document Object Model) 2 (0) | 2022.12.01 |
| 221130 TIL 팀별 과제 정리 (0) | 2022.12.01 |
| 221130 TIL React 입문주차 4 (0) | 2022.11.30 |
| 221128 TIL React 입문주차 3 (0) | 2022.11.29 |
