자바스크립트 (10) - HTML코드와 엘리먼트 자바스크립트 객체
자바스크립트가 정보를 html 에서 가져오는 방식은 document 객체와, element 를 가져오는 수많은 함수를 이용하는 것임.
<body>
<h1 id = " title " > grab me! </h1>
</body>
document.getElementById("title")
id의 인수는 string 형이여야 한다.
result
<h1 id = " title " > grab me! </h1>h1태그를 반환한다.
콘솔이 아닌 vs에서 해보자.
const title = document.getElementById("title")
console.dir(title) title을 객체명으로 h1태그에서 수많은 프로퍼티들을 가져 온다.
자바스크립트에서 html 정보들을 읽어올 수 있다.
outher html, text. localname, inner html,innertext, id, hidden 나중에 공부해야될 프로퍼티들 .
프로퍼티 중인 하나인 autofocus: false에대해 자세히 알아보자 h1태그에 auto focus 추가 <h1 autofocus id="title"> 해주면
js에서 가져온 autofocus 값이 true 가 돼 잇음. 자스에서 html 값 가져온거 다만 html 이 아닌 오브젝트로 보여주는 거.
<h1 autofocus class ="hello" id = " title " > grab me! </h1>classname 프로퍼티도 hello로 바뀜.
title.innerText = "got you!"
<h1 id = " title " > got you! </h1>단순 불러오기 뿐만 아니라 수정도 가능.
이게 가능한 이유는 id를 가져 왔고 getelementby id 로 document에서 id에 해당하는 엘리먼트를 가져옴.
const title = document.getElementById("title")
//h1태그 객체 title 객체명으로 들어감.
title.innerText = "got you!"
html자체로는 의미가 없고 자스에서 불러와서 상호작용할 수 있어야 함 .
document는 html 이랑 상호작용할 수 있게 해주고 getElementby id 라는 함수가 있음. id를 통해 엘리먼트를 찾아줌.
엘리먼트를 찾고나면 그 html에서 뭐든 바꿀 수 잇음.
모든게 이 개념에서 시작됨. 매우 중요.
1. html 객체 값들을 가져 올 수 있고, 2. 가져온 값들을 변경할 수 있다.