document.body -> <body>객체에 대한 dom Object
➰ DOM 객체 API 함수
-
innerHTML 속성(Property) -> HTML 코드로써 적용하겟다
DOM객체.innerHTML: 여는태그, 닫는 태그 사이의 모든 태그 텍스트를 반환DOM객체.innerHTML = "HTML문장": HTML태그가 반영되어 자식으로 적용됨 👉🏻 기존의 태그 내용물은 전부 삭제되고 치환됨
✔ 추가하고 싶다면+=연산자를 사용
-
innerText 속성(Property) -> 단순 텍스트로 적용하겠다
DOM객체.innerText: 여는태그, 닫는 태그 사이의 모든 텍스트를 반환
👉🏻 HTML 태그는 모두 무시하고 텍스트 노드들만 추출DOM객체.innerText = "단순 텍스트": HTML태그를 무시하고 단순 텍스트로 적용
➡<h1>제목</h1>을 작성하면 태그도 텍스트로 인식
-
요소 객체 얻기
document.getElementById("id"): id 속성값을 가지는 요소 객체 반환 👉🏻 DOM 객체 1개를 반환document.getElementsByName("name"): name속성값을 이용하여 요소 객체 반환 👉🏻 DOM 객체 배열로 반환document.getElementsByName("tagName"): 태그이름(종류)을 이용하여 요소객체 반환 👉🏻 DOM 객체 배열로 반환document.getElementsByName("className"): class속성값을 이용하여 요소객체 반환 👉🏻 DOM 객체 배열로 반환document.querySelector("CSS Selector"): CSS 선택자 문법을 이용하여 요소 객체 반환 👉🏻 같은 이름 중 제일 첫번째꺼 DOM 객체 1개를 반환document.querySelectorAll("Css Selector"): CSS 선택자 문법을 이용하여 요소 객체 반환 👉🏻 DOM 객체 배열로 반환
-
요소 제거하기
DOM객체.remove(): 해당 객체가 DOM트리에서 제거됨 👉🏻 화면에서 없어짐DOM객체.removeChild(대상객체): DOM객체에서 자식 중 대상 객체를 찾아 DOM 트리에서 제거
➰ DOM API함수사용을 줄일 수 잇는 특수 규칙
- 축약코드
- 모든 태그들의 id값은 window객체의 property로 등록됨
<form>태그의 자식요소들의 name값은 해당<form>객체의 property로 등록됨<form>태그의 name값은 document객체의 property로 등록됨- 모든 태그들의 표준속성들은 해당 객체의 property로 등록됨
🔍 JS 이벤트, Event
사용자의 입력행위, 프로그램의 상태변화 등을 이벤트(상황)오 정의하고 미리 객체로 만들어 둔 시스템을 뜻함
- 컴퓨터에 발생한 사건(인터럽트)을 운영체제가 받아들임 👉🏻 키보드나 마우스같은 입력장치의 신호
➡ 운영체제는 이벤트를 객체로 변환
➡ 이벤트객체를 이벤트가 발생한 운영프로그램에게 전달
➡ 이벤트 객체를 전달받은 응용 프로그램은 이벤트에 알맞은 코드를 실행함 👉🏻 이벤트 처리, 핸들링, Handling
✔ 이벤트 기반 프로그래밍, Event Driven
IT꿈나무 댓츠미