속성과 프로퍼티
DOM 속성과 프로퍼티
HTML 속성은 항상 1대 1로 매칭되는 것은 아니지만 DOM 객체의 프로퍼티가 된다.
DOM 프로퍼티와 메서드는 자바스크립트 객체처럼 행동하기 때문에
1. 어떠한 값이든 가질 수 있다.
2. 대, 소문자를 가진다.
HTML 속성
HTML 속성은 항상 1대 1로 매칭되는 것은 아니지만 DOM 객체의 프로퍼티가 된다.
DOM 프로퍼티와 메서드는 자바스크립트 객체처럼 행동하기 때문에
1. 어떠한 값이든 가질 수 있다.
2. 대, 소문자를 가진다.
HTML의 표준 속성은 DOM 객체의 프로퍼티로 변환되지만, 비표준한 속성은 프로퍼티로 전환되지 않는다.
HTML의 비표준한 속성을 DOM 객체에서 접근하거나 수정하기 위해서는 어떻게 해야 할까?
접근 및 수정 방법
elem.hasAttribute(name) // 속성 존재 유무
elem.getAttribute(name) // 속성 값 가져오기
elem.removeAttribute(name, value) // 속성 값 설정
elem.attributes // 모든 속성값 읽어오기elem.attributes의 경우에 iterable한 array를 반환한다. for of 같은 기능을 사용할 수 있다.
프로퍼티 속성 동기화
속성이 변하면 대응하는 프로퍼티는 자동으로 갱신된다. 하지만 input.value 처럼 속성에서 프로퍼티 방향으로만 갱신이 이루어지는 프로퍼티도 있다.
- 속성을 변경시키면 프로퍼티도 변경된다.
- 프로퍼티를 변경시켜도 속성은 변경되지 않는다.
속성의 값을 사용해서 변경전의 원래 값으로 돌아가 사용하는 방식으로 활용할 수 있다.
DOM 프로퍼티 값의 타입
DOM 포로퍼티는 항상 문자열이 아니다. 객체 , boolen 등이 가능하고 , href 같은 경우는 돌아가는 환경에 따라 반환되는 값이 바뀐다.
- href 같은 겨우는 도메인 명이 붙은 string으로 반환된다.
비표준 속성, dataset
비표준 속성은 어떤것이든 되겠지만 나중에 표준이 되는 것을 방지하기 위해 data- 를 붙혀서 사용한다.
<body data-about="Elephants">
<script>
alert(document.body.dataset.about); // Elephants
</script>프로퍼티로 접근하기 위해서는 dtaset을 이용해서 접근하면 된다.
Author And Source
이 문제에 관하여(속성과 프로퍼티), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jayoonkoo/속성과-프로퍼티저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
