[TIL] 엘리스 SW 엔지니어 트랙 2기 day 09

✏️ Today I Learned (2022.04.14)

---

📖 온라인 강의

• DOM과 이벤트

---

📝 DOM과 이벤트

• DOM : 문서 객체 모델 -> 객체 지향 모델로써 구조화된 문서를 표현하는 형식
• DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일,내용 등을 변경할 수 있도록 한다.
• Core DOM(모든 문서), HTML DOM(HTML 문서), XML DOM(문서)
• Document 객체 : 웹 페이지를 의미함, 웹페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 함
• document.getElementById() : 해당 아이디의 요소를 선택
• document.getElementsByClassName() : 해당 클래스에 속한 요소를 모두 선택
• document.getElementsByName() : 해당 name 속성 값을 가지는 요소를 모두 선택
• document.querySelectorAll() : 해당 name 속성값을 가지는 요소를 모두 선택
• document.querySelector() : 해당 선택자로 선택되는 요소를 1개 선택
• document.createElement() : 지정된 HTML 요소를 생성
• document.write() : HTML 출력 스트림을 통해 텍스트 출력
• 요소.onclick = function(){ } : 마우스 클릭 이벤트와 연결될 이벤트 핸들러
• document.getElementsByTafName("li") : HTML <li> 요소를 선택 -> <li>가 여러 개여서 Elements임
• document.getElementsByClassName("odd") : 클래스가 odd인 모든 요소를 선택
• document.getElementsByName("first") : name속성 값이 "first"인 모든 요소를 선택
• var selectedItem = document.getElementById("even");
  selectedItem.style.color = "red" : 선택된 요소의 텍스트 색상을 변경
  selectedItem.innerHTML = "요소의 내용을 바꿉니다";
• 노드 : HTML DOM에서 정보를 저장하는 계층적 단위
• 노드 트리 : 노드들의 집합으로 노드 간의 관계를 나타 낸다.(계층적 관계)
• 자바스크립트에서 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.
• 문서 노드, 요소 노드, 주석 노드, 속성 노드, 텍스트 노드
• document.childNodes[0].nodeName; // HTML 문서의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택
• document.getElementById("heading"). firstChild.nodeValue; //아이디가"heading"인 요소의 첫 번째 자식 노드의 노드 값을 선택
• document.getElementById("heading").firstChild.nodeType; //아이디가"heading"인 요소의 첫 번째 자식 노드의 타입을 선택
• 이벤트 : 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생, 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.
• //마우스 클릭이벤트 예시
  <p onclick="changeText(this)">여길클릭하세요!</p>
  <script>
  functionchangeText(element) { element.innerHTML="내용이바뀌었습니다!";
  }
  </script>
• //이 함수는 HTML 문서가 로드될 때 실행됨.
  window.onload=function(){
  //아이디가"text"인 요소를 선택함.
  vartext=document.getElementById("text");
  text.innerHTML="HTML문서가로드되었습니다.";
  }

---

💡느낀 점

점점 어려워진다.. 오늘도 혁신적인 변화를 이루었다~~