DOM
속성 조작

비고

속성 가져 오기

일부 속성은 요소의 속성 (예 : alt , href , id , title 및 value )으로 직접 액세스 할 수 있습니다.

var a = document.querySelector("a"),
   url = a.href;

데이터 속성을 포함한 다른 속성은 다음과 같이 액세스 할 수 있습니다.

var a = document.querySelector("a"),
   tooltip = a.getAttribute("aria-label");

데이터 속성은 dataset (최신 브라우저)를 사용하여 액세스 할 수도 있습니다.

// <a href="#" data-tracking-number="ABC-123">Widget</a>
var a = document.querySelector("a"),
  tracker = a.dataset.trackingNumber;

속성 설정하기

일부 속성은 요소의 속성 (예 : alt, href, id, title 및 value)으로 직접 액세스 할 수 있습니다.

document.querySelector("a").href = "#top";

데이터 속성을 포함한 다른 속성은 다음과 같이 설정할 수 있습니다.

document.querySelector("a").setAttribute("aria-label", "I like turtles");

데이터 속성은 데이터 세트 (최신 브라우저)를 사용하여 설정할 수도 있습니다.

var a = document.querySelector("a");
a.dataset.test = "123";
a.dataset['test-2'] = "456";

~에 결과

<a href="#" data-test="123" data-test-2="456">Widget</a>

속성 제거하기

직접 액세스 할 수있는 속성을 비롯하여 속성을 제거하려면

document.querySelector("a").removeAttribute("title");

데이터 속성은 다음과 같이 제거 할 수도 있습니다 (최신 브라우저).

// remove "data-foo" attribute
delete document.querySelector("a").dataset.foo;