JS Library/React
[React] 리액트 DOM 문서 가져오기 / 객체 생성 및 속성 지정 + 연습문제
- -
728x90
반응형
DOM (Document Object Model)
=> 웹 브라우저가 HTML을 인식하는 방식 (넓은 의미)
=> document 객체와 관련된 객체의 집합 (좁은 의미)
=> HTML의 Tag를 자바스크립트에서 이용할 수 있도록 객체로 만든 것
=> Element Node 와 Text Node (Text Content) 로 나뉜다.
1) 문서 객체 가져오기
- document. ~
ex) document.head, document.body, document.title
※ document. 다음으로 나올 단어에서 title, head, body 등 대표적인 것 이외의 것들은 사용불가할 수 있다.
=> querySelecor 혹은 querySelectorAll 을 사용함.
- javascript 로 HTML 내용 작성
ex) document.body.innerHTML += h1('1번째 script 태그');
<script>
const h1 = (text) => `<h1>${text}</h1>`;
document.body.innerHTML += h1('1번째 script 태그');
</script>
- 웹 브라우저가 문서 객체를 모두 읽고 난 후 동작한다. => 그러므로 HTML 코드 밑에 javascript 코드를 쓰는게 바람직함
2) 문서 객체 생성
① document.createElement => 태그를 생성
② document.body.appendChild => 태그 내용을 생성
③ document.body.innerHTML
=> 태그와 태그 내용 둘 다 생성 가능. 하지만 생성하려는 태그 혹은 내용 밖의 태그가 있어야 사용 가능
3) 문서 객체 속성 지정
<script>
const obj = document.createElement('h1')
obj.textContent = 'Header'
document.body.appendChild(obj);
obj.style.color = 'red'; // style.color
obj.style.backgroundColor = '#d9d9d9'; // style.backgroundColor
obj.setAttribute('id', 'title'); // setAttribute
</script>4) 문서 객체 제거
① 문서객체.remove()
② 부모객체.removeChild(자식객체)
③ 문서객체.parentNode.removeChild(문서객체)
[DOM 연습문제 1] 제목을 클릭하면 클릭 횟수 증가 후 출력하기
<body>
<h1>제목</h1>
<h3>클릭 횟수 :<span></span></h3>
</body>
<script>
/* 마우스 드래그 방지 이벤트*/
document.body.onselectstart = () => false;
let count = 0;
let h1 = document.querySelector('h1')
let span = document.querySelector('span')
h1.addEventListener('click', () => {
count++;
span.innerHTML = `${count}`;
});
</script>
728x90
반응형
'JS Library > React' 카테고리의 다른 글
| [React] 리액트 실습 : QRcode 로 로또 용지 촬영 시 1등 번호로 수정해서 요청 (0) | 2023.11.15 |
|---|---|
| [React] 리액트 검색용 해시태그 입력을 위한 사용자 편의 기능 추가하기 (0) | 2023.11.15 |
| [React] 리액트 Cookie 쿠키 / LocalStorage 로컬스토리지 / SessionStorage 세션스토리지 (0) | 2023.11.13 |
| [React] 리액트 Event 이벤트 종류 (2) | 2023.11.13 |
| [React] 리액트 inch => cm 로 변환하는 기능 (0) | 2023.11.13 |
Contents
소중한 공감 감사합니다🤗