Romantic Developer : )

(Web JavaScript) 웹 자바스크립트 DOM (8) Element jQuery 본문

Romantic Developer/Web JavaScript

(Web JavaScript) 웹 자바스크립트 DOM (8) Element jQuery

Romantic_Developer 2018. 8. 6. 17:00

안녕하세요 영감을 주는 개발자 방민방민입니다.


오늘은 앞에서 배운 Element 에 대한 식별, 조회, 속성 API 를 jQuery 상에서는 어떻게 사용하는 지에 대하여 알아보고자 합니다.


지난 시간에 jQuery 의 기본 사용법에 대한 포스팅에서  jQuery 의 기본 문법 형식은 $('')라고 알려드렸습니다.

오늘은 그런 jQuery 에서 더 나아가 Element 에 대한 API 를 jQuery로 어떻게 사용하는지 알아보고자 합니다.


바로 시작하도록 하겠습니다.



1. attr 조회,변경,추가,제거


아래 코드는 a 태그에 대한 속성값을 jQuery를 활용하여 어떻게 조회, 변경, 추가, 제거 하는지에 대한 코드입니다.

<!DOCTYPE>
<html>
	<head>
		
	</head>
	<body>
		<script src = 'jquery.js'></script>
		<a href="aaa.com" id="target"></a>

		<script>
			var t = $('#target');//제이쿼리 객체 저장
			console.log(t.attr('href'));// 조회
			t.attr('href','bbb.com');//변경
			console.log(t.attr('href'));
			t.attr('title','Wow');//추가
			console.log(t.attr('title'));
			t.removeAttr('title');//제거
			console.log(t.attr('title'));
		</script>
	</body>

</html>

jQuery 에서는 attr() 을 통하여 조회, 변경, 추가, 제거 가 가능합니다. 정리하면 아래와 같습니다.


- jQuery객체.attr('attrName') : 조회

- jQuery객체.attr('attrName','value') : 변경

- jQuery객체.attr('attrName','value') : 추가 (존재하지 않는 경우)

- jQuery객체.removeAttr('attrName') : 제거


위의 함수를 통해 동작합니다.



2. prop 조회,변경,추가,제거


위의 jQuery 객체를 이용한 함수에서 attr 을 prop 로만 바꾸어 주면 같은 함수를 프로퍼티 방식으로 사용할 수 있습니다. 프로퍼티 방식을 사용하는지, 어트리뷰트 방식을 사용해 주는지에 따라 전혀 다른 값이 도출될 수 있으므로 반드시 목적에 맞는 제이쿼리 함수를 사용하여야 합니다.


(출처 : 생활코딩)

<html>

<a id="t1" href="./demo.html">opentutorials</a>
<input id="t2" type="checkbox" checked="checked" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
// 현재 문서의 URL이 아래와 같다고 했을 때
// http://localhost/jQuery_attribute_api/demo2.html
var t1 = $('#t1');
console.log(t1.attr('href')); // ./demo.html 
console.log(t1.prop('href')); // http://localhost/jQuery_attribute_api/demo.html 
 
var t2 = $('#t2');
console.log(t2.attr('checked')); // checked
console.log(t2.prop('checked')); // true
</script>


이 방식에서 attr 을 사용한 href 는 실제 코드 내에서 "" 내부에 적혀있는 ./demo.html 만을 출력합니다.

반면 prop 방식에서는 전체 링크를 리턴합니다.


또 체크박스 방식에서의 attr을 사용하면 그 checked 값을 checked 로 출력하지만, prop 방식에서는 true로 출력합니다.

그렇기 때문에 사용 목적에 따라 적절한 함수를 선택하여야 합니다.


앞서 DOM 방식에서는 이런 엘리먼트 조회등에 있어서 그 이름을 정확하게 하지 않으면 안됩니다. 즉 class 와 className 은 어트리뷰트 방식이냐, 프로퍼티 방식이냐에 따라 다른 값을 출력할 수 있습니다.

그렇기 때문에 주의가 필요합니다. 반면 jQuery 함수를 사용하게 되면 그러한 이름 오류를 자동으로 교정해주는 기능을 가지고 있습니다. jQuery가 js 를 활용한 코딩을 더욱이 편안하게 만드는 이유입니다.



3. 조회 범위 제한 


위의 jQuery 함수를 사용하여 객체를 조회할때에도, 앞서 DOM 방식에서 클레스, id 등을 활용하여 그 범위를 좁혔던 것처럼 조회 범위를 제한해 줄 수 있습니다. 아래의 코드를 확인해보겠습니다.

<!DOCTYPE>
<html>
	<head>
		
	</head>
	<body>
		<script src = 'jquery.js'></script>

		<ul>
			<li class="marked">html</li>
			<li>css</li>
			<li id="active">JavaScript
				<ul>
					<li>JavaScript Core</li>
					<li class="marked">DOM</li>
					<li class="marked">BOM</li>
				</ul>
			</li>
		</ul>

		<script>
			$( ".marked", "#active").css( "background-color", "red" );//jQuery 1번 코드
			
			//$("#active", ".marked").css("background-color", "red");//jQuery 2번 코드
			
			/*var e = document.getElementById('active');// DOM 코드
			var es = e.getElementsByClassName('marked');
			for(var i = 0; i<es.length; i++){
				es[i].style.background= 'red';
			}*/

		</script>
	</body>

</html>

이 경우 1번 코드 2번코드 DOM 코드가 모두 같은 결과를 출력합니다.

1번 코드의 경우 marked 라는 class 값을 가지는 엘리먼트 중에 active 라는 id의 하위 엘리먼트인 것을 선택합니다. 반대로 2번 코드의 경우 active 라는 id 의 하위 엘리먼트 중에 marked 라는 클레스 값을 가지는 엘리먼트를 선택합니다. 두 코드는 선수만 다를 뿐 그 결과는 완전하게 같습니다.


DOM 코드를 쓴 경우에는 위의 한줄짜리 jQuery 코드가 5줄로 길어집니다. 우리가 jQuery 를 사용하는 이유라고 할 수 있겠습니다:) 실행결과는 아래와같습니다.



제어하기를 선택한 코드의 프로퍼티가 추가되었음과 동시에, 해당 내용의 홈페이지 컨텐츠 또한 빨간색 배경색을 가지게 되었습니다.



4. 조회 범위 제한 find()


추가적으로 아래와 같이 find()코드를 사용하기도 합니다. 이는 위에서의 코드와 정확히 같은 동작을 합니다.

$( "#active").find('.marked').css( "background-color", "red" );

이러한 코드는 체이닝이 끊어지지 않도록 작업을 할 때 사용합니다. 그러나 find 로 코드가 길어지면 유지보수가 어려워 지는 단점이 있기 때문에 조심해야합니다.



오늘은 여기까지 jQuery 를 이용하여 Element 에 접근하는 방법에 대하여 알아보았습니다.


그러면 지금까지 영감을 주는 개발자 방민방민 이었습니다 :)





저작자표시

'Romantic Developer > Web JavaScript' 카테고리의 다른 글

(Web JavaScript) 웹 자바스크립트 DOM (9) Node API  (0) 2018.08.07
(Web JavaScript) 웹 자바스크립트 DOM (7) 조회 API  (0) 2018.08.05
(Web JavaScript) 웹 자바스크립트 DOM (6) 식별자 API  (0) 2018.08.04
(Web JavaScript) 웹 자바스크립트 DOM (5) jQuery객체  (0) 2018.08.03
(Web JavaScript) 웹 자바스크립트 DOM (4) HTML element  (0) 2018.08.02
'Romantic Developer/Web JavaScript' Related Articles more