- 문서 객체의 스타일 조작
1) 개념
문서 객체의 style 속성을 사용하면 해당 문서 객체의 스타일을 변경할 수 있다.
굳이 자바스크립트에서 style 속성을 사용하여 스타일을 변경하는 이유는 무엇일까?
이는 사용자의 입력에 따라 동적으로 스타일을 조작하고 싶은 경우가 많기 때문이다.
2) 주의
1. style의 속성은 스타일 속성 이름을 그대로 입력하면 안된다. 그 이유는 자바스크립트는 -을 식별자에 사용할 수 없기 때문이다.
따라서 이를 위해 camelCase를 사용한다.
2. style의 속성들에 넣는 값은 스타일에서 입력하는 것과 같은 형식으로 입력해야 한다.
가령 자바스크립트에서는 너비의 단위를 지정하지 않지만, 스타일에서는 px과 같은 단위를 지정해야 하기 때문에 이를 추가해주어야 한다.
3) 예시
- 문서 객체의 제거
문서 객체를 제거할 때는 문서 객체가 가지는 removeChild(child) 메서드를 사용한다.
이름에서 유추 가능하듯, 부모 노드에서 자식 노드를 삭제하는 메서드이다.
하지만 일반적으로 부모가 누구인지 모르는 경우가 일반적이다.
이는 parentNode 속성을 사용하여 부모 노드로 접근한 후, removeChild() 메서드를 호출하여
부모 노드의 존재를 명시적으로 알지 못해도 자기 자신을 삭제할 수 있게 된다.
