6. DOM

DOM

🔶 렌더링
◻ Parsing

HTML과 CSS파일을 파싱하여 각각 DOM Tree를 만드는 작업
◻ Style
두 Tree를 결합하여 Rendering Tree를 만드는 작업
◻ Layout
Rendering Tree 에서 각 노드의 이치와 크기를 계산하는 작업
◻ Paint
Layout에서 계산된 정보를 바탕으로 각 노드를 픽셀로 그리는 작업
◻ Composite
그려진 여러 레이어를 합쳐 최종 화면을 구성하는 작업

🔶 DOM (Document Object Model)
◻ 개념

객체 형태로 쪼개는것
웹페이지의 콘텐츠 구조 스타일 요소를 구조화 하여 요소애 접근및 조작을 할수있도록 제공하는 Web API

◻ 구조
![[Screenshot_380.png]]

🔶 요소 접근 방법
◻ Document
◽개념 : 웹페이지 자체를 가리키는 객체로 HTML요소에 접근하려면 반드시 접근 해야 하는 요소
◽특징 : DOM실행시 첫번째 로 접근해야한다.
◽자주사용하는 요소 접근 종류
![[Screenshot_381.png]]

예시1
◻id속성 텍스트 출력하기
html

 
<body>
<h1 id="h1Tag">DOM 사용하기</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Java</li>
<li>Python</li>
<li>Ruby</li>
<li>Kotlin</li>
<li>C#</li>
<li>C++</li>
</ul>
</body>

 
let h1Element = document.getElementById('h1Tag')
console.log(h1Element.textContent)

console(browser)
![[Screenshot_384.png]]

예시2
◻ 배열데이터 한번에 출력하기( querySelectAll() )

html

 
<body>
<h1 id="h1Tag">DOM 사용하기</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Java</li>
<li>Python</li>
<li>Ruby</li>
<li>Kotlin</li>
<li>C#</li>
<li>C++</li>
</ul>
</body>

 
let liElements = document.querySelectorAll('li')
console.log(liElements)
for(let i=0;i<liElements.length;i++){
console.log(liElements[i].textContent)
}

console(browser)
![[Screenshot_383.png]]

예시3
◻input에 Name 속성으로 텍스트 출력하기

html

 
<body>
<input type="text" name="prac" value="확인1">
<input type="text" name="prac" value="확인2">
</body>

 
// input에 name을 통해서 요소에 접근
let input_name = document.getElementsByName('prac')
// // 실습 반복문으로 input 내의 값들을 추출하기
for(let i=0;i<input_name.length;i++){
console.log("res"+i+" : "+input_name[i].value)
}

console(browser)
![[Screenshot_389.png]]

예시4
◻ CSS선택자를 통해 텍스트 출력하기 ( querySelector() )
html

 
<body>
<span id="span_id">본문내용확인</span>
</body>

 
// 해당된 선택자 요소 1개를 반환
let span_id = document.querySelector("#span_id")
console.log(span_id.innerText)

console(browser)
![[Screenshot_390.png]]

◻ 요소 텍스트 출력 함수 차이
◽ innerText

요소내의 텍스트만 추출
◽ innerHTML
요소 전체를 출력(태그 + 문자)

html

 
<h1 id="tit">
<span>오늘 <strong>날씨가 덥다</strong> </span>
</h1>

 
console.log(tit.innerText);
console.log(tit.innerHTML);

console
![[Screenshot_392.png]]

🔶 요소 변경 방법
![[Screenshot_391.png]]

◻ 1. 요소접근


let tit = document.getElementById('tit');

◻ 2-1. 요소접근후 변경

 
// 2-1 텍스트추출
tit.innerText = '<a href="#">DOM 배우는 중</a>';
// 2-2 html 추출
tit.innerHTML = '<a href="https://www.naver.com">DOM 배우는 중</a>';

◻ 3-1 결과
![[Screenshot_393.png]]

◻ 2-2. 요소접근후 변경

 
// 2-2 html 추출
tit.innerHTML = '<a href="https://www.naver.com">DOM 배우는 중</a>';

◻ 3-2 결과
![[Screenshot_394.png]]

---> innerText로 변경시 텍스트 자체로 변경되어 태그이용 x
---> innerHTML로 변경시 태그포함 전체 html변경 가능

◻ 실습1
버튼을 클릭시, 숫자를 증감시키는 프로그램 구현

html

 
<body>
<div class="w-80 border">
<h1 id="num">0</h1>
<button class="btn btn-success" onclick="increase()">증가</button>
<button class="btn btn-danger"  onclick="decrease()">감소</button>
</div>
</body>

 
// 버튼을 클릭시, 숫자를 증감시키는 프로그램 구현
const increase = () => {
console.log("increase func run")
let num = document.getElementById("num")
num.innerHTML = parseInt(num.innerHTML) +1
}
const decrease = () => {
console.log("decrease func run")
let num = document.getElementById("num")
num.innerHTML = parseInt(num.innerHTML) -1
}

view
![[Screenshot_397.png]]

◻ 실습2
버튼을 클릭시, 숫자를 증감시키는 프로그램 구현

html

 
<body>
<div class="container">
<div class="form-group">
<input type="text" id="inputTag" class="form-control" placeholder="입력 필드 1">
<button class="btn btn-black mt-2" onclick="showAlert()">클릭</button>
</div>
<div class="form-group">
<input type="text" id="inputTag2"  class="form-control" placeholder="입력 필드 2">
<button class="btn btn-orange mt-2" onclick="showInputText()" >클릭</button>
</div>
</div>
</body>

 
let showAlert = () =>{
let inputTag = document.getElementById("inputTag")
alert(inputTag.value)
}
let showInputText = () =>{
let inputTag2 = document.getElementById("inputTag2")
document.write(`<h1> ${inputTag2.value}</h1>`)
}

view
![[Screenshot_402.png]]

![[Screenshot_403.png]]

![[Screenshot_404.png]]

'➕ Language > ▹ Java Script' 카테고리의 다른 글

7. 이벤트 (0)	2025.05.29
5. 객체 (2)	2025.05.22
4. 함수 (0)	2025.05.22
3. 반복문 (1)	2025.05.21
2. 조건문 (1)	2025.05.21

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

et memoria

6. DOM

DOM

'➕ Language > ▹ Java Script' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<body>
	<h1 id="h1Tag">DOM 사용하기</h1>
	<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JS</li>
	<li>Java</li>
	<li>Python</li>
	<li>Ruby</li>
	<li>Kotlin</li>
	<li>C#</li>
	<li>C++</li>
	</ul>
	</body>

	let h1Element = document.getElementById('h1Tag')
	console.log(h1Element.textContent)

	let liElements = document.querySelectorAll('li')
	console.log(liElements)

	for(let i=0;i<liElements.length;i++){
	console.log(liElements[i].textContent)
	}

	<body>
	<input type="text" name="prac" value="확인1">
	<input type="text" name="prac" value="확인2">
	</body>

	// input에 name을 통해서 요소에 접근
	let input_name = document.getElementsByName('prac')

	// // 실습 반복문으로 input 내의 값들을 추출하기
	for(let i=0;i<input_name.length;i++){
	console.log("res"+i+" : "+input_name[i].value)
	}

	// 해당된 선택자 요소 1개를 반환
	let span_id = document.querySelector("#span_id")
	console.log(span_id.innerText)

	<h1 id="tit">
	<span>오늘 <strong>날씨가 덥다</strong> </span>
	</h1>

	// 2-1 텍스트추출
	tit.innerText = '<a href="#">DOM 배우는 중</a>';

	// 2-2 html 추출
	tit.innerHTML = '<a href="https://www.naver.com">DOM 배우는 중</a>';

	<body>
	<div class="w-80 border">
	<h1 id="num">0</h1>
	<button class="btn btn-success" onclick="increase()">증가</button>
	<button class="btn btn-danger" onclick="decrease()">감소</button>
	</div>
	</body>

	// 버튼을 클릭시, 숫자를 증감시키는 프로그램 구현
	const increase = () => {
	console.log("increase func run")
	let num = document.getElementById("num")
	num.innerHTML = parseInt(num.innerHTML) +1
	}
	const decrease = () => {
	console.log("decrease func run")
	let num = document.getElementById("num")
	num.innerHTML = parseInt(num.innerHTML) -1
	}

	<body>
	<div class="container">
	<div class="form-group">
	<input type="text" id="inputTag" class="form-control" placeholder="입력 필드 1">
	<button class="btn btn-black mt-2" onclick="showAlert()">클릭</button>
	</div>
	<div class="form-group">
	<input type="text" id="inputTag2" class="form-control" placeholder="입력 필드 2">
	<button class="btn btn-orange mt-2" onclick="showInputText()" >클릭</button>
	</div>
	</div>
	</body>

	let showAlert = () =>{
	let inputTag = document.getElementById("inputTag")
	alert(inputTag.value)
	}

	let showInputText = () =>{
	let inputTag2 = document.getElementById("inputTag2")
	document.write(`<h1> ${inputTag2.value}</h1>`)
	}

6. DOM

DOM

'➕ Language > ▹ Java Script' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역