[JavaScript] 속성값 취득/설정하기

 

 

속성값 컨트롤하기

스크립트로 페이지를 조작하는 방법이다.

 

 

 요소 노드 속 같은 이름의 프로퍼티로 액세스 가능

대부분의 요소 노드에 액세스했다면 속성값에 액세스하는 것은 간단하다. 대부분의 속성은 요소 노드 속의 동일한 이름의 프로퍼티로 액세스가 가능하기 때문이다. 

var naver = document.getElementsByClassName('naver');
// 속성값 취득
console.log(naver[0].href);

// 속성값 변경
naver[0].href = "http://www.google.com";

 

하지만 그렇지 않은 경우도 있다. CSS 클래스를 나타내는 속성명은 'class' 이지만 DOM 프로퍼티는 'className'이다.

var naver = document.getElementsByClassName('naver');
// 속성값 취득
console.log(naver[0].className);

// 속성값 변경
naver[0].className = "banana";

 

 

 속성명과 프로퍼티의 차이를 고려하지 않고 속성값에 접근하기(getAttribute/setAttribute)

속성과 프로퍼티의 이름의 차이를 의식하지 않고 싶다면 getAttribute/setAttribute 메소드를 사용하면 된다.

var naver = document.getElementsByClassName('naver');

var target = naver[0].getAttribute('target');
console.log(target);   // _blank

naver[0].setAttribute('href', "http://www.naver.com");

 

 

 불특정 속성 취득하기

특정 요소 노드에 속하느 모든 속성을 취득하고 싶은 경우에는 attributes 프로퍼티를 사용한다. 꺼낸 속성의

var node = document.querySelector('[value="english"]');

var attrs = node.attributes;

// 모든 속성 검색
for(var i=0; i<attrs.length; i++) {
    var attr = attrs.item(i);
    console.log(`${attr.name} : ${attr.value}`);
}

 

 

 텍스트 취득 및 설정하기

요소 아래의 텍스트를 취득 및 설정하려면 innerHTML/textContent 속성을 이용한다. innerHTML 속성은 HTML로 텍스트를 삽입하고 textContent 는 모든 텍스트를 문자열로 인식하는 것이 차이점이다.

var node = document.querySelector('.button');
var node2 = document.querySelector('.button2');

node.textContent = "<i>버튼</i>";    // 문자열 그대로 반영
node2.innerHTML = "<i>버튼</i>";     // 이텔릭 체로 버튼 텍스트만 반영

 

문자열을 취득하는 과정에서도 innerHTML 프로퍼티는 대상 요소 아래를 HTML 문자열로 반환한다. 반면 textContent 속성은 자식 요소 각각에서 텍스트만 추출하여 연결한 것을 반환한다.