[Javascript] attribute 추가, 수정, 조회, 삭제, 찾기, 목록 조회

 

Javascript attribute(속성) 다루기

• 추가 및 변경 (setAttribute() 또는 점 표기법 사용)
• 읽기 (getAttribute 또는 점 표기법 사용)
• 삭제 (removeAttribute)
• 찾기 (hasAttribute)
• 속성 목록 가져오기 (attributes)

 

1. 추가 및 변경 (setAttribute 또는 점 표기법 사용)

• setAttribute(name, value) : 속성을 추가하거나 기존 속성의 값을 변경합니다.
• 점 표기법 (element.attribute = value) : 동일한 속성을 추가하거나 변경합니다.

// HTML 예시
// <div id="example"></div>

// JavaScript
const element = document.getElementById('example');

// 방법 1: setAttribute 사용
element.setAttribute('class', 'active'); // class="active" 추가

// 방법 2: 점 표기법 사용
element.id = 'newId'; // id="newId" 로 변경
element.style.color = 'red'; // 인라인 스타일 추가

// 최종 HTML
// <div id="newId" class="active" style="color: red;"></div>

 

 

2. 읽기 (getAttribute 또는 점 표기법 사용)

• getAttribute(name) : 특정 속성의 값을 가져옵니다.
• 점 표기법 (element.attribute) : 동일하게 속성 값을 읽을 수 있습니다.

// HTML 예시
// <div id="example" class="box" data-info="test"></div>

// JavaScript
const element = document.getElementById('example');

// 방법 1: getAttribute 사용
const className = element.getAttribute('class'); // 'box' 반환
console.log(className);

// 방법 2: 점 표기법 사용
console.log(element.id); // 'example'
console.log(element.dataset.info); // 'test'

 

 

3. 삭제 (removeAttribute)

• removeAttribute(name) : 특정 속성을 삭제합니다.

// HTML 예시
// <div id="example" class="box"></div>

// JavaScript
const element = document.getElementById('example');
element.removeAttribute('class'); // class 속성 삭제

// 최종 HTML
// <div id="example"></div>

 

 

4. 찾기 (hasAttribute)

• hasAttribute(name) : 특정 속성이 존재하는지 확인합니다. (true / false 반환)

// HTML 예시
// <div id="example" class="box"></div>

// JavaScript
const element = document.getElementById('example');

console.log(element.hasAttribute('class')); // true
console.log(element.hasAttribute('style')); // false

 

 

5. 속성 목록 가져오기 (attributes)

• element.attributes : 요소의 모든 속성을 가져옵니다. 유사 배열 형태의 NamedNodeMap 객체로 반환됩니다.

// HTML 예시
// <div id="example" class="box" data-info="test"></div>

// JavaScript
const element = document.getElementById('example');
const attrs = element.attributes;

for (let attr of attrs) {
    console.log(attr.name + ' = ' + attr.value);
}
// 출력
// id = example
// class = box
// data-info = test