자바스크립트 조작 방법

 

자바스크립트는 HTML 조작을 위해 사용한다. 

html 조작과 변경을 담당한다. 

그래서 자바스크립트 코드를 잘 짜면 html을 원하는대로 조작이 가능하다.

 

 <h1 id="hello">안녕</h1>

 

   <script>

    document.getElementById("hello").innerHTML = "안녕하세요";

   </script>

 

자바스크립트는 영어 좀 알면 누구나 해석가능한 언어!  

document ---> 문서. 여기선 html 웹문서 

마침표 ---> ~의

getElementById("hello") ---> 아이디가 "hello"인 html요소(element)를 찾아줘

innerHTML ---> HTML 내부

= ---> 등호는 프로그래밍에서 오른쪽에 있는걸 왼쪽에 대입하라는 뜻이다.

 

해석하면, 웹문서의 id = "hello"인 것 찾아서 그거의 내부 HTML에 "안녕하세요" 집어 넣으라는 뜻이다.

 

정리하면,

 

  document.getElementById("aaa").bbb = "ccc";

 

aaa ---> 바꿀요소 id

bbb ---> 무엇을 

ccc ---> 어떻게 

"aaa의 bbb를 ccc(어떻게) 바꿔라"

 

 

이를 조작하는 방법은 수백가지가 있으니, 검색해서 쓰는 것이 좋은 방법이다.

 

(참고)

.getElementById()는 '셀렉터'라고 부른다. html 요소를 찾기위해 사용한다. 

.innerHTML / .style / .color 같이 점찍는데 괄호 없는건 메소드(또는 함수)라고 부른다.  

html 요소의 어떤 속성을 변경할지 결정하기 위해 사용한다. 

 

ⓒ coding apple님 강의