6. HTML 요소 관련 메서드

메서드 종류	설명
text(), html()	문서객체 안의 내용을 가져오거나 추가할 때 사용하는 메서드
attr(), prop()	문서객체의 속성의 값을 가져오거나 속성을 추가하는 메서드
removeAttr()	문서객체 속성을 제거하는 메서드

 

 

텍스트 관련  text()와 html() 메서드 비교

• text메서드와 html메서드는 문서객체의 텍스트컨텐츠를 컨트롤하는 메서드입니다.
• 둘다 게터와 세터를 갖고 있어, 글자를 얻어올 수도 있고, 변경할 수도 있습니다.
• 두 메서드의 큰 차이는 태그문자를 태그로 인식하는지, 아니면 문자로 인식하는지입니다.
• 자바스크립트의 innerHTML속성과 innerText속성을 메서드화 시켰다고 생각하면 편합니다.

 

1. 매개변수가 없는 경우(게터)

<!-- HTML -->
<h1 class="text1">텍스트1</h1>
<h1 class="text2">텍스트2</h1>

//javascript
$(document).ready(function(){
    let text1 = $('.text1').text();
    let text2 = $('.text2').html();

    console.log(text1);
    console.log(text2);
});

 

 

2. 매개변수가 한개인 경우(세터)

<!-- HTML -->
<h1 class="text3"></h1>
<h1 class="text4"></h1>

//javascript
$(document).ready(function(){
	  $('.text3').text('<a href="#">링크태그</a>');
	  $('.text4').html('<a href="#">링크태그</a>');
});

 

 

3. 매개변수가 함수인 경우(세터)

<!-- HTML -->
<div class="box1">
    <h1>제목태그</h1>
    <h1>제목태그</h1>
    <h1>제목태그</h1>
</div>

<div class="box2">
    <p>문단태그</p>
    <p>문단태그</p>
    <p>문단태그</p>
</div>

//javascript
$(document).ready(function(){
    $('.box1 h1').text(function(index){
        return 'Title Tag' + (index + 1);
    });

		$('.box2 p').prop(function(index){
        return 'Paragraph Tag' + (index + 1);
    });
});

 

 

속성 관련 attr()과 prop() 메서드 비교

• attr메서드와 prop메서드는 문서객체의 태그 속성을 컨트롤하는 메서드입니다.
• 둘다 게터와 세터를 갖고 있어, 태그 속성값을 얻어올 수도 있고, 변경할 수도 있습니다.
• 두 메서드의 차이는 속성값을 가지고 올 때의 차이점입니다.
• attr()메서드는 html의 입장에서, prop()메서드는 javascript 입장에서 속성값을 가져옵니다.

 

1. 매개변수가 한개인 경우(게터)

<!-- HTML -->
<!-- 이미지 다운로드해서 넣기 -->
<img src="test.jpg" alt="이미지" width="300">

<h3>attr메서드 : <span class="img1"></span></h3>
<h3>prop메서드 : <span class="img2"></span></h3>

//javascript
$(document).ready(function(){
    //img태그 src속성값 얻어오기
    let src1 = $('img').attr('src');
    let src2 = $('img').prop('src');
    
    //input태그 checked 결과 출력
    $('.img1').html(src1);
    $('.img2').html(src2);
});

 

 

2. 매개변수가 두개인 경우(세터)

<!-- HTML -->
<hr>
<input type="checkbox" id="chk1">
<label for="chk1">attr메서드로 체크</label>
<br>
<input type="checkbox" id="chk2">
<label for="chk2">prop메서드로 체크</label>

//javascript
$(document).ready(function(){
    //반대는 undefined
    $('#chk1').attr('checked','checked');
    //반대는 false
    $('#chk2').prop('checked',true);
});

 

 

3. 매개변수가 객체인 경우(세터)

<!-- HTML -->
<img src="test.jpg" alt="이미지" class="img">

//javascript
$(document).ready(function(){
    //prop을 사용해도 되지만 보통 attr메서드를 더 많이 사용합니다.
    $('.img').attr({
        width: 800,
        height: 500
    });
});

 

 

4. 매개변수가 함수인 경우(세터)

<!-- HTML -->
<img src="test.jpg" alt="이미지" class="cat">
<img src="test.jpg" alt="이미지" class="cat">
<img src="test.jpg" alt="이미지" class="cat">

//javscript
$(document).ready(function(){
    //prop을 사용해도 되지만 보통 attr메서드를 더 많이 사용합니다.
    $('.cat').attr('width',function(index){
        return (index + 1) * 100;
    });
});

 

 

속성 삭제 메서드

//javscript
$('img').first().removeAttr('width');