[브라우저와 자바스크립트] 14. HTML 속성 다루기

브라우저가 콘텐츠를 화면에 보여주기 위해서 HTML 문서를 해석할 때 DOM 객체가 만들어지는데

이 때 HTML 태그들이 가지고 있는 각각의 속성들은 요소 노드의 프로퍼티가 됩니다.

대부분의 HTML 속성들은 이름 그대로 요소 노드의 프로퍼티로 생성이 되는데요.

한 가지 주의해야 될 점은 모든 HTML 속성이 요소 노드의 프로퍼티로 생성되지는 않는다는 겁니다.

<ol id='tomorrow' href='https://www.codeit.kr'></ol>

tomorrow라는 id를 가진 ol 태그에 href 소성을 넣어뒀는데 사실 이 ol 태그에 href 속성을 추가하는 건 HTML 표준이 아닙니다. 그래서 tomorrow의 href 속성에 접근해보면  undefined가 출력되는 것을 확인할 수 있습니다.

// HTML 속성(HTML attribute)
const tomorrow =  document.querySelector('#tomorrow');
const item = tomorrow.firstElementChild;
const link = item.firstElementChild;

// id 속성
console.log(tomorrow);
console.log(tomorrow.id);

// class 속성
console.log(item);
console.log(item.className);

// href 속성
console.log(link);
console.log(link.href);
console.log(tomorrow.href);

그리고 한 가지 더 주의할 점은 HTML 태그의 클래스 속성은 className이라는 이름으로 프로퍼티가 생성된다는 건데요.

class 속성 이름이 조금 바뀝니다.

 

ol 태그 안의 href 속성처럼 이렇게 모든 HTML 태그의 속성들이 다 요소 노드의 프로퍼티가 되진 않습니다.

요소 노드의 메소드를 활용해서 HTML 태그가 가지고 있는 속성들을 다루는 방법에 대해 살펴보겠습니다. 

가장 먼저 살펴볼 것은 메소드를 통해서 속성에 접근하는 방법입니다.

 

지금 이렇게 프로퍼티에 직접 접근하는 방식으로는 비표준 속성에는 접근할 수 없지만 getAttribute 메소드를 활용하면 표준과 비표준 관계없이 HTML 문서에서 해당 태그에 추가된 모든 속성들에 접근할 수가 있습니다.

// elem.getAttribute('속성'); 속성에 접근하기
console.log(tomorrow.getAttribute('href'));
console.log(item.getAttribute('class'));

저장하고 실행해보면 getAttribute 메소드를 활용해서 해당하는 속성에 접근한 모습을 확인할 수 있습니다.

참고로 클래스 속성은 이렇게 프로퍼티 이름으로 접근할 때는 className이지만 getAttribute를 활용할 때는 class라는 문자열을 그대로 전달해 줘야 된다는 부분도 함께 기억해두시면 좋을 것 같습니다.

 

다음은 속성을 추가하는 방법인데요. 

// elem.setAttribute('속성', '값'): 속성 추가(수정)하기
tomorrow.setAttribute('class','list'); // 추가
link.setAttrbute('href','https://www.codete.kr'); // 수정

첫 번째 파라미터의 추가할 속성 이름을 작성하고 두 번째 파라미터에 값을 전달해 주면 됩니다.

그래서 만약 기존에 없었던 속성인 경우에는 추가가 되지만 이미 존재하는 속성인 경우에는 수정되는 형태로 동작합니다.

그래서 저장하고 실행했을 때 개발자 도구의 Elements 탭을 클릭해보면 이렇게 tomorrow에는 list라는 클래스 속성이 추가된 걸 확인할 수 있고 링크의 경우에는 href 주소가 코드잇 주소로 수정된 것도 확인할 수가 있습니다.

 

마지막은 삭제하는 방법입니다. 삭제하는 방법은 removeAttribute라는 메소드를 활용하는 겁니다.

파라미터에 문자열로 속성 이름을 전달하면 해당 속성을 제거할 수 있습니다.

코드를 실행해서 Elements 탭을 확인해보면 이렇게 tomorrow의 href 속성과 클래스 속성이 모두 사라진 걸 볼 수 있습니다. 

 

참고로 세 가지 메소드 모두 속성 이름들은 대소문자를 구분하지 않습니다.

HTML 표준 속성은 모두 소문자이기 때문에 만약 속성 이름에 대문자를 섞어 사용하더라도 소문자로 변환돼서 동작하기 때문에 저장하고 실행해도 똑같이 잘 동작하는 모습을 확인할 수가 있습니다.