1. E.dataset
이 속성은 요소의 각 'data-' 속성 값을 얻거나 저장한다.
2. E.tagName
이 속성은 요소의 태그 이름을 반환한다.
이 속성은 대문자로 태그 이름을 반환함
3. E.id
이 속성은 요소의 'id' 속성 값을 얻거나 지정한다.
child 클래스를 가진 첫 번째 요소에는 id 값을 지정하지 않았다. 그렇기에 첫 번째 콘솔에는 빈 문자가 출력된다. id 값을 'child1'으로 지정 후, 속성을 사용하면 잘 출력됨.
4. E.className
이 속성은 요소의 'class' 속성 값을 얻거나 지정한다.
이 속성은 일반적인 경우에는 값을 얻어서 간단하게 확인하는 용도로 사용함. 클래스를 제어하는 속성은 'classList'.
5. E.classList
이 속성은 요소의 'class' 속성 값을 제어한다.
- add() : 새로운 값을 추가
- remove() : 기존 값을 제거
- toggle() : 값을 토글
- contains() : 값을 확인
child 클래스를 가진 첫 번째 요소를 클릭할 때마다 'active' 클래스의 추가, 제거가 반복됨에 따라 콘솔에 다른 결과가 출력되고 있음.
6. E.style
이 속성은 요소의 'style' 속성(인라인 스타일)의 CSS 속성 값을 얻거나 지정한다.
첫 번째 콘솔을 제외한 나머지 콘솔은 비워져 있음. 내가 지정한 속성이 없기 때문.
style 속성에서 알 수 있는 점 : 해당 요소의 인라인 방식으로 작성한 CSS의 내용만 적용된다는 것.
스타일을 개별로 지정할 수 있다. 근데, 점표기법으로 쓸 수 있는 것은 style 부분이 객체라는 것임. 그래서 객체 메소드를 활용하여 스타일 속성을 한 번에 지정할 수 있다.
결과 동일.
7. window.getComputedStyle()
이 메소드는 요소에 적용된 스타일 객체를 반환한다.
8. E.getAttribute() / E.setAttribute()
이 메소드는 요소에서 특정 속성 값을 얻거나 지정한다.
element 창에도 title 속성이 추가되었다.
9. E.hasAttribute() / E.removeAttribute()
이 메소드는 특정 속성을 확인하거나 제거한다.
class 속성을 확인하고, 제거한 뒤 출력하기.
