DOM(Document Object Model) 구조란?
문서 객체 모델로, 웹브라우저가 HTML페이지를 인식하는 방식이다.
DOM은 웹 페이지(HTML이나 XML)의 콘텐츠 및 구조, 스타일 요소를 구조화 시켜 표현해 JavaScript 언어가 쉽게 웹페이지에 접근해 읽고 조작할 수 있도록 연결시켜주는 역할을 한다.
document -> 문서
. -> 접근
get -> 가지고오다
Element ->요소
ByID -> 아이디로
<DOM의 tree 형식의 자료구조>
<script>
let h1Element = document.getElementById('h1Tag');
console.log(h1Element);
</script>
<body>
<ul>
<li>김밥</li>
<li>라면</li>
<li>떡볶이</li>
</ul>
<script>
NodeList는 웹 페이지의 HTML 문서 내에서 선택한 요소 뿐만 아니라, 텍스트, 주석, 속성 등의
모든 노드를 문서 내 정렬된 순서대로 모아둔 집합
document.queryselectorAll() -> NodeList 객체를 반환
const liElements = document.queryselectorAll('li');
console.log(liElements);
for문 적용
for(let i=0; i<liElements.length; i++){
console.log(liElements[i].textContent);
}
</script>
BOM(Browser Object Model)
웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단
BOM을 사용하는 이유
1. alert
2. confirm
3. beforeunload
4. location
5. history
6. prompt
<script>
window: 브라우저 객체 최상위
console.log(screen);
console.log(navigator);
</script>
<body>
<input type="text" id="inputTag">
<button onclick="getInput()">클릭</button>
<script>
이벤트핸들러 (함수) !! .value
const getInput = () =>{
let inputVal = document.getElementById('inputTag').value;
alert(inputVal);
}
</script>
<body>
<h1>클릭 한번 해볼까요?</h1>
<button onclick="mkH1()">h1태그 생성</button>
<button onclick="mkA()">a태그 생성</button>
<button onclick="mkUl()">ul태그 생성</button>
div는 생성한 태그를 누적할 공간
<div id="divTag"></div>
<script>
글자를 누적해줄 공간인 div 가져오기
let divVal = document.getElementById('divTag');
함수 별로 가지고 온 div태그 안에 태그 생성하기!
function mkH1(){
divVal.innerHTML += '<h1>DOM 활용하기</h1>'
}
function mkA(){
}
function mkUl(){
divVal.innerHTML += '<ul><li>HTML</li><li>CSS</li><li>JAVASCRIPT</li></ul>'
}
</script>
<h1 id="tit">오늘<span><strong>날씨</strong></span>가 춥습니다.</h1>
<script>
HTML요소객체 접근
const tit = document.getElementById('tit')
console.log('h1요소객체 접근: '+tit);
console.log(tit.innerText);
console.log(tit.innerHTML);
innerText속성 - 요소의 컨텐츠를 접근/변경 변경할 때 태그와 문자열 -> 문자열로 반영
tit.innerHTML = '<a href="#">DOM 공부하는 중</a>';
</script>
<span id="spanTag">아래 버튼을 클릭하면 이 텍스트의 색깔과 크기가 변해요</span>
<br>
<button onclick="clickFunc()">이 버튼 클릭!</button>
<script>
let spanTag = document.getElementById('spanTag');
console.log('get', spanTag);
DOM 스타일 제어
요소.style.속성 = 값
queryselector : CSS 선택자로 요소 검색
queryselectorAll : CSS 선택자로 모든 요소 검색
spanTag = document.querySelector('span');
console.log('query', spanTag);
const clickFunc = () =>{
spanTag.style.color = 'tomato';
spanTag.style.fontSize = '25px';
spanTag.style.fontWeight = '900';
}
</script>
'Study > JavaScript' 카테고리의 다른 글
| [JavaScript] 객체 (1) | 2024.01.26 |
|---|---|
| [JavaScript] 함수, 계산기 만들기 (0) | 2024.01.25 |
| [JavaScript] 배열 (0) | 2024.01.23 |
| [JavaScript] 반복문 (for문) (1) | 2024.01.22 |
| [JavaScript] 반복문 (While문) (0) | 2024.01.19 |
