DOM 에서 속성 제어 시 getAttribute, setAttribute, removeAttribute 등을 사용했지만,
jQuery 에서는 속성 제어 시 attr 이라는 메소드를 사용한다.
코드로 확인해본다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a id="sjh" href="localhost">sjh</a>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
var a = $('#sjh');
console.log(a.attr('href'));
a.attr('title', 'TEST');
console.log(a.attr('title'));
a.removeAttr('title');
console.log(a.attr('title'));
</script>
</body>
</html>id가 sjh인 jQuery 객체를 변수 a에 담은 후, attr 메소드를 사용한 것이다.
a.attr('href') 는 a 객체에 대해서 href 에 대한 내용을 의미하고,
a.attr('title') 은 a 객체에 대해서 title 에 대한 내용을 의미하며,
removeAttr 은 속성을 제거하는 것이다.
다음의 코드를 하나 더 보기 전에 알아두어야 할 것이 있다.
엘리먼트의 속성값에 접근할 때 attribute 와 property 두 가지 방식이 있다.
a.setAttribute('class', 'test') => atrribute 방식
a.className = 'test' => 프로퍼티 방식
get, set을 사용하면 Attribute 방식이고,
~.속성값을 사용하면 property 방식이다.
jQuery 에서는,
attr => attribute 방식
prop => property 방식이다.
property방식은 좀 더 간편하고 속도도 빠르지만 실제 HTML속성의 이름과 다른이름을 갖는 경우가 많아 조심해야 한다.
예를들면 HTML에서 class 속성에 접근할 땐 자바스크립트에서 className을 써야하고,
maxlength 속성에 접근할 땐 maxLength를 사용해야 하는 등 이름 규칙을 잘 확인해야 한다.
코드로 확인해본다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a id='test1' href="./test.js">test</a>
<input id='test2' type="checkbox" checked="checked" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var a = document.getElementById('test1');
console.log(a.getAttribute('href'));
console.log(a.href);
</script>
<script>
var b = $('#test1');
console.log(b.attr('href'));
console.log(b.prop('href'));
var c = $('#test2');
console.log(c.attr('checked'));
console.log(c.prop('checked'));
</script>
</body>
</html>test1 이라는 id를 가진 a태그를 만들었고, test2 라는 id를 가진 checkbox 타입의 input 태그를 만들었다.
먼저 DOM 방식의 getElementById로 test1 id의 엘리먼트를 변수 a에 담았고,
attribute 방식인 getAttribute로 href 속성에 접근한것과,
property 방식인 .href 로 속성에 접근했다.
그 다음 jQuery에서,
attribute 방식인 attr과 property 방식인 prop으로 href와 checked 속성에 접근한 것이다.
콘솔내용을 확인해보면,
attribute 방식은 href 속성안에 있는 내용 그대로를 출력하였고,
property 방식은 href 속성값에 대한 절대경로를 출력했다.
checked 속성에 접근한 결과값은 attr은 속성값의 내용 그대로,
prop은 bool 값을 리턴한다.
즉, attribute 방식은 내용 그대로를 출력하고 property 방식은 그대로가 아닌 속성값의 속내용(?)을 출력한다고 이해할 수 있을 것 같다.
'Javascript' 카테고리의 다른 글
| 15. Node 관계 API (0) | 2021.09.17 |
|---|---|
| 14. jQuery 조회 범위 제한 (0) | 2021.09.16 |
| 11. Element 객체 & 식별자 API (0) | 2021.09.13 |
| 10. jQuery 알아보기 (0) | 2021.09.11 |
| 9. HTML Element (0) | 2021.09.10 |