[JavaScript] HTML 속성

비표준인 HTML 속성도 다룰 수 있는 메소드

 

1. 속성에 접근하기 : element.getAttribute('속성')

 

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

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

---

2. 속성 추가하기 : element.setAttribute('속성', '값')

 

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

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

---

3. 속성 제거하기 : element.removeAttribute('속성')

 

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

// elem.removeAttribute('속성'): 속성 제거하기
tomorrow.removeAttribute('href'); 
tomorrow.removeAttribute('class');

---

각각의 속성은 요소 노드의 프로퍼티가 되므로 이런식으로 접근 할 수 있음.

그러나 비표준 속성(예 : ul 태그 안에 있는 하이퍼 링크)에는 접근 불가능하며 undefined 출력

 

// 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);