-
day40 - JavaScript(DOM)KIC/JavaScript,CSS 2021. 8. 10. 18:44반응형
[DOM]
-> 문서 객체 모델
-> 넓은 의미로는 웹 브라우저가 HTML 페이지를 인식하는 방식이다.
-> 좁은 의미로는 document 객체와 관련된 객체 집합
-> 사용시 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다
-> 문서 객체 - 태그를 자바스크립트에서 이용할 수 있는 객체로 만드는 것을 뜻한다.
-> 태그를 html 페이지에 존재하는 html이나 body 태그를 뜻함
00 23 00 설명 듣기
[domEx1]
<!DOCTYPE html> <html> <head> <title>DOMContentLoaded</title> <script> //HTML 태그를 쉽게 만들 수 있는 콜백 함수를 선언하기 const h1 = (text) => `<h1>${text}</h1>` </script> <script> document.body.innerHTML += h1('1번째 script 태그') </script> </head> <body> <script> document.body.innerHTML += h1('2번째 script 태그') </script> <h1>1 번째 h1 태그</h1> <script> document.body.innerHTML += h1('3번째 script 태그') </script> <h2>2번째 h2 태그</h2> </body> </html>
[domEx2]
-> DOMContentLoaded는 페이지가 로딩될때 자동으로 지정해두었던 콜백함수를 호출한다.
<!DOCTYPE html> <html> <head> <title>DOMContentLoaded</title> <script> //DOMContentLoaded 이벤트를 연결 document.addEventListener('DOMContentLoaded', () => { const h1 = (text) => `<h1>${text}<h1>` // h1을 body에 넣겠다는 의미 document.body.innerHTML += h1('DOMContentLoaded 이벤트 발생') }) </script> </head> <body> </body> </html>
[domEx3]
<!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>DOMContentLoaded</title> <script> document.addEventListener('DOMContentLoaded', () => { //요소를 읽어들인다. 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> </html>
[domEx4]
<!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>DOMContentLoaded</title> <script> document.addEventListener('DOMContentLoaded', () => { //요소를 읽어들인다. const headers = document.querySelectorAll('h2') //forEach로 여러개를 받을 수 있다. 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> <!-- 이렇게 미리 지정해두었던 h2에서만 효과가 표현된다. --> <h2></h2> <h2></h2> </body> </html>
[domEx5]
-> #a 는 id .a 는 클래스를 뜻한다.
<!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>DOMContentLoaded</title> <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> </html>
[domEx6]
<!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>DOMContentLoaded</title> <script> document.addEventListener('DOMContentLoaded', () => { let counter = 0; const h1 = document.querySelector('h1') h1.addEventListener('click', (event) => { counter++ h1.textContent = `클릭 횟수: ${counter}` }) }) </script> <style> h1 { /* 클릭을 여러번 했을 때 글자가 선택되는 것을 막기 위한 스타일 설정 */ user-select: none; } </style> </head> <body> <h1>클릭 횟수: 0</h1> </body> </html>
[domEx7]
<!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>DOMContentLoaded</title> <script> document.addEventListener('DOMContentLoaded', () => { const h1 = document.querySelector('h1') const print = (event) => { let output = '' output += `alt: ${event.altKey}<br>` output += `ctrl: ${event.ctrlKey}<br>` output += `shift: ${event.shiftKey}<br>` output += `code: ${event.code !== 'undefined' ? event.code : event.keyCode}<br>` h1.innerHTML = output } document.addEventListener('keydown', print) document.addEventListener('keyup', print) }) </script> </head> <body> <h1></h1> </body> </html>
300x250'KIC > JavaScript,CSS' 카테고리의 다른 글
day41 - JavaScript(DOM 예제, 단위 변환, 이메일 형식, 오브젝트 배열, 클래스, 라이프사이클, 상속) (0) 2021.08.12 VScode - 급작스러운 JavaScrip 404 에러 (0) 2021.08.10 day39 - JavaScript(function, scope, 객체) (0) 2021.08.10 day38 - JavaScript(prompt, for문, while, 이중 for문, function, array, parameter, callback) (0) 2021.08.06 day37_2 - JavaScript(alert, let, prompt, 자료 형변환, if문) (0) 2021.08.05