Romantic Developer : )
(Web JavaScript) 웹 자바스크립트 DOM (8) 속성 API 본문
(Web JavaScript) 웹 자바스크립트 DOM (8) 속성 API
Romantic_Developer 2018. 7. 22. 15:40안녕하세요 영감을 주는 개발자 방민방민입니다.
오늘은 웹 자바스크립트의 DOM 중에 속성에 대하여 알아보는 API 에 대하여 알아보도록 하겠습니다.
속성은 HTML 코드에서 태그만으로 표현할 수 없는 정보를 가르킵니다.
그러면 attribute 에 대한 포스팅을 바로 시작하도록 하겠습니다.
1. Attribute
아래의 코드를 먼저 살펴 보도록 하겠습니다.
<!DOCTYPE>
<html>
<head>
</head>
<body>
<a href="http://aaa.com" id="target">aaa.com</a>
<script>
var t = document.getElementById('target');
console.log(t.getAttribute('href')); //aaa.com
t.setAttribute('href','http://bbb.com');//bbb.com 으로 변경
console.log(t.getAttribute('href'));
t.setAttribute('title','coding');//title 값을 추가
console.log(t.hasAttribute('title'));//있는지 확인
t.removeAttribute('title');//title을 제거
console.log(t.hasAttribute('title'));//있는지 확인
</script>
</body>
</html>
여기서 a tag 는 href 라는 attribute 로 'http://aaa.com 을 가지고 있습니다.
그리고 이러한 어트리뷰트는 다양한 명령어로 추가, 제거, 변경 이 가능합니다.
- getAttribute('AttributeName') : 어트리뷰트 값을 받아옴
- setAttribute('AttributeName','Value') : 어트리뷰트 값을 Value로 설정함
- removeAttribute('AttributeName'): 어트리뷰트를 제거함
- hasAttribute('AttrubuteName'): 해당 어트리뷰터가 있는지 확인함
위의 예제에서는 주석에서 설명하는 내용에 따라 어트리뷰트의 값을 변경하고, 추가하고 제거하고 확인하는 작업을 수행하였습니다. 그에 대한 출력은 아래와 같습니다.
2. Attribute vs Property
아래의 코드를 먼저 살펴 보도록 하겠습니다.
속성으로도, 프로퍼티 값으로도 해당 태그가 가지는 속성/혹은 프로퍼티의 값을 변경할 수 있습니다.
<!DOCTYPE>
<html>
<head>
</head>
<body>
<p id="target">
Hello world
</p>
<script>
var target = document.getElementById('target');
// attribute 방식
target.setAttribute('class', 'important');
// property 방식
target.className = 'important';
</script>
</body>
</html>
위의 코드에서 setAttribute 을 통해 class 값을 변경하는 것은 attribute 방식이고,
target.className ='' 을 통해 class 값을 변경시키는 것은 같은 결과를 만들어 내지만, 그 방식이 다르다고 말할 수 있겠습니다. 이는 좀더 편한 방식을 사용 하면 되지만, 속성이름과 프로퍼티 이름이 다른 경우가 있기 때문에 조심해야합니다.
(출처 : 생활코딩)
(좌 속성방식, 우 프로퍼티 방식 )
| class | className |
| readonly | readOnly |
| rowspan | rowSpan |
| colspan | colSpan |
| usemap | userMap |
| frameborder | frameBorder |
| for | htmlFor |
| maxlength | maxLength |
이렇게 몇몇 속성이름과 프로퍼티의 이름은 다른 값을 가지기도 하기 때문에, 그 사용에 있어서 매우 조심해야합니다.
오늘은 여기까지 자바스크립트에서의 속성 API 에 대하여 알아보았습니다.
그러면 지금까지 영감을 주는 개발자 방민방민 이었습니다. 감사합니다 :)
'Romantic Developer > JavaScript' 카테고리의 다른 글
| (Javascript) 자바스크립트 심화 (10) 데이터 타입과 참조 (0) | 2018.07.23 |
|---|---|
| (Javascript) 자바스크립트 심화 (9) 표준내장객체 (0) | 2018.07.22 |
| (Javascript) 자바스크립트 심화 (8) 상속 (0) | 2018.07.21 |
| (Javascript) 자바스크립트 심화 (7) this ! (0) | 2018.07.20 |
| (Javascript) 자바스크립트 심화 (6) 객체의 생성자 (0) | 2018.07.19 |
