DOM을 사용해 html 수정하는방법

 

버튼의 배경색을 이런식으로 바꾸는 방법도 있지만,

 

 

자바스크립트를 사용해서 변경이 가능하다.

background-color 같은 구문은 backgroundColor로 표현한다. 

즉, - 로 연결해야 하는 부분을 카멜표기법을 사용해서 C를 대문자로 쓴다.

 

 

자바스크립트를 사용해서 button태그에 class를 추가할 수도 있다.

 

 

반대로 remove를 사용하면 제거도 가능하다.

 

 

그리고 toggle을 사용하면, 

class가 이미 생성된 경우에는 제거를

class가 없는 경우에는 생성을 한다.

 

 

textContent와 innerHTML의 차이는 

textContent는 h1의 텍스트만 딱 고려하는 것이고.

innerHTML을 사용하면 태그또한 추가로 넣을 수 있다.

 

속성 attribute는 html에서

 

 

보라색 글자가 attribute 이다.

 

 

getAttribute를 사용하면 속성을 잡을 수 있다.

 

 

나는 Second의 속성을 잡고싶어서 querySelectorAll("a")[1]을 지정했다.

 

 

그리고 setAtrribute는 ("지정속성", "변경값") 두가지 파라미터가 필요한데,

이를 통해 href의 내부를 변경이 가능하다.