review 3

getElementById 

• html문서에서 특정 Id값을 가진 요소를 찾는 js메소드 

getElementByClassName 

• getElementByClassName()은 웹 페이지에서 특정 클래스 이름을 가진 모든 요소를 반환하는 JavaScript 메소드

HTML은 웹 페이지의 구조와 콘텐츠를 정의하고, JavaScript는 웹 페이지의 동적인 동작을 추가하는 스크립트 언어. HTML과 JavaScript를 함께 사용하여 웹 페이지를 동적으로 제어할 수 있음

Js에서는 DOM을 통해 html을 제어함. Document Object Model는 HTML문서를 계층구조로 표현하며 각 요소는 js에서 객체로 표현됨

 

즉 JS html의 내용을 사용할 수 있는 것임 

 

document.querySelector() 

• CSS 선택자를 사용하여 HTML 문서에서 원하는 요소를 선택하기 쉽기 때문임
• CSS 선택자를 이용하면 JavaScript에서도 쉽게 HTML 요소를 선택할 수 있으며, 선택한 요소를 제어할 수 있음
• 단 하나의 element를(첫 번째꺼) return 해줌 

document.querySelectorAll()

• 모든 요소를 배열로 반환한다 

#3.3 Events 강좌 수강 중 이해가 잘 안되었던 부분 .

 

innerText() 메소드를 통해 새로운 값을 부여하였지만, 웹에서는 반영되지 않음.  body의 head부분에 적힌 “Grab me”는 그대로 였음. 

그 이유는 ? 

 

• innerText 속성은 HTML 요소의 텍스트 내용만을 가져오거나 설정할 수 있음.
• HTML 요소의 내부 구조에는 영향을 주지 않음. 
• innerText를 사용하여 HTML 요소의 내용을 바꾸면 해당 요소의 자식 요소나 HTML 태그는 변경되지 않음
• innerText를 사용하여 body 요소 내의 HTML 태그를 변경하거나 새로운 HTML 태그를 추가하는 것은 불가능
• HTML태그가 포함되지 않은 콘텐츠를 다룰 때 매우 유용함 

 

console.dir()

• 메소드는 객체의 속성(property) 및 메소드(method)를 나열하는 데 사용됨
• 메소드는 일반적으로 개발자 도구를 사용하여 디버깅할 때 사용됨