본문 바로가기
웹언어/jQuery

[jQuery강좌] 7강 문서객체 HTML요소관련 메서드 - text(), html(), attr(), prop()메서드

OSSAM 2022. 8. 8. 17:39
728x90
반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. 문서객체 - 텍스트관련메서드

- 이번에는 문서객체 중 글자를 컨트롤하는 메서드들을 보도록 하겠습니다. 

 

 

 

1) text()와 html() 메서드 비교

- text메서드와 html메서드는 문서객체의 텍스트컨텐츠를 컨트롤하는 메서드입니다.

- 둘다 게터와 세터를 갖고 있어, 글자를 얻어올 수도 있고, 변경할 수도 있습니다.

- 두 메서드의 큰 차이는 태그문자를 태그로 인식하는지, 아니면 문자로 인식하는지입니다.

- 자바스크립트의 innerHTML속성과 innerText속성을 메서드화 시켰다고 생각하면 편합니다. 

 

## 코드 보기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - HTML요소관련 메서드</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                $('.text01').text('<a href="#">링크태그</a>');
                $('.text02').html('<a href="#">링크태그</a>');
            });
        </script>
    </head>
    <body>
        <h1 class="text01"></h1>
        <h1 class="text02"></h1>
    </body>
</html>

 

 

## 결과보기

-  text() 메서드는 매개변수의 문자열을 그냥 문자로 받아들여 그대로 출력해줍니다.

-  html() 메서드는 매개변수의 문자열 중 태그가 있다면 태그를 인식하여 태그로 출력해줍니다.

 

 

 

 

 

 

 

 

 

2) text()와 html() 게터

- 태그 인식을 제외하면 나머지 사용법도 같고, 결과도 같습니다.

- 게터(getOO)는 메서드가 값을 얻어오는 것을 게터라고 합니다.

- 그러니까 이번엔 문서객체의 텍스트컨텐츠를 얻어오는 것이겠죠?

 

## 문법

$('문서객체선택').text();

$('문서객체선택').html();

- 매개변수 없이 쓰면 게터로 처리가 되는 메서드입니다.

 

 

 

## 코드 보기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - HTML요소관련 메서드</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                var text01 = $('.text01').text();
                var text02 = $('.text02').html();

                alert(text01);
                alert(text02);
            });
        </script>
    </head>
    <body>
        <h1 class="text01">텍스트01</h1>
        <h1 class="text02">텍스트02</h1>
    </body>
</html>

- text01이라는 변수를 선언해서 [ .text01 ]이 갖고 있는 텍스트컨텐츠 값을 담아줍니다. 

- text02이라는 변수를 선언해서 [ .text02 ]이 갖고 있는 텍스트컨텐츠 값을 담아줍니다. 

- 그리고 그 2개의 값을 경고창에 띄우는 코드를 작성했습니다.

 

 

 

## 결과보기

- 각각 [ 텍스트01 ]과 [ 텍스트02 ]가 경고창에 잘 뜨는 것이 확인됩니다.

 

 

 

 

 

 

 

 

 

 

 

3) text()와 html() 세터1

- 세터(setOO)는 문서객체의 값을 변경하는 메서드입니다. 

- 그러니까 이번 메서드는 텍스트컨텐츠를 변경하는 거죠.

 

## 문법

$('문서객체선택').text('바꿀 문자열');

$('문서객체선택').html('바꿀 문자열');

 

 

## 코드보기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - HTML요소관련 메서드</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                //3초뒤에 영문으로 변경
                setTimeout(function(){
                    $('.text01').text('Title Tag');
                    $('.text02').text('Title Tag');
                },3000);
            });
        </script>
    </head>
    <body>
        <h1 class="text01">제목태그</h1>
        <h1 class="text02">제목태그</h1>
    </body>
</html>

- 기본적으로 태그 내부에 [ 제목태그 ]라고 텍스트컨텐츠를 작성했습니다.

- 3초뒤에 영문으로 변경해보려고 합니다. 그래서  setTimeout() 함수를 작성했습니다. 

-  setTimeout(콜백함수, 시간) 함수는 자바스크립트 함수로 시간 뒤 콜백함수 내부 명령을 한번 실행하는 함수입니다.

 

 

## 결과 보기

- 처음에는 [ 제목태그 ]로 적혀 있다가, 추후에 [ Title Tag ]로 변경되는 것이 확인될 겁니다. 

 

 

 

 

 

 

 

 

4) text()와 html() 세터2

- 이번 세터는 값을 변경할 건데, 나열된 객체의 인덱스번호(0부터 1씩 증가하는 숫자)를 사용해서 응용해보겠습니다.

 

## 문법

$('문서객체선택').text(function(index){

});

$('문서객체선택').html(function(index){

});

- 이때 콜백함수 내부에 적은 매개변수인 [ index ]는 단어가 달라도 상관없습니다. 첫번째 쓰는 매개변수는 aaa든 bbb든 무조건 문서객체의 배열번호를 뜻합니다.

 

 

## 코드 보기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - HTML요소관련 메서드</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                //3초뒤에 .box01내부의 h1태그 텍스트를 영문+숫자로 변경
                setTimeout(function(){
                    $('.box01 h1').text(function(index){
                        return 'Title Tag' + (index + 1);
                    });
                },3000);

                //6초뒤에 .box02내부의 p태그 텍스트를 영문+숫자로 변경
                setTimeout(function(){
                    $('.box02 p').text(function(index){
                        return 'Paragraph Tag' + (index + 1);
                    });
                },6000);
            });
        </script>
    </head>
    <body>
        <div class="box01">
            <h1>제목태그</h1>
            <h1>제목태그</h1>
            <h1>제목태그</h1>
        </div>
        <hr>
        <div class="box02">
            <p>문단태그</p>
            <p>문단태그</p>
            <p>문단태그</p>
        </div>
    </body>
</html>

- [ .box01 ] 내부의  <h1> 태그의 글자를 3초 후에 영문 + 숫자가 나열되게 처리했습니다.

- [ .box02 ] 내부의  <p> 태그의 글자를 6초 후에 영문 + 숫자가 나열되게 처리했습니다.

- 콜백함수의 매개변수인 index는 0번부터 시작되므로 (index + 1)을 해줘야 1부터 시작됩니다.

 

 

## 결과 보기

- 그럼 글자가 순서대로 바뀌는 것이 잘 확인 됩니다.

 

 

 

 

 

 

 

4) text()와 html() 세터3

- 이번 세터는 값을 변경할 때, 기존 텍스트를 활용하는 것을 보도록 하겠습니다.

- 위에서 처럼 [영문 + 숫자]가 아닌 기존 [국문 + 숫자]로 변경해볼게요.

 

 

## 문법

$('문서객체선택').text(function(index, text){

});

$('문서객체선택').html(function(index, text){

});

- 이번에는 콜백함수 매개변수가 2개입니다.

- 첫번째 작성한 것은 위에서 봤듯이 문서객체가 나열되었을 때 생기는 인덱스번호(배열번호)입니다.

- 두번째 작성한 것은 기존 텍스트를 의미하는 매개변수입니다.

- 둘다 영문(index, text)은 제가 임의적으로 작성한 것이고, 어떤 영문을 써도 상관은 없습니다.

- 무조건 첫번째 쓴 매개변수는 배열번호, 두번째 쓴 매개변수는 기존텍스트라고 생각하면 됩니다.

 

 

## 코드 보기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - HTML요소관련 메서드</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                //3초뒤에 .box01내부의 h1태그 텍스트를 기존텍스트+숫자로 변경
                setTimeout(function(){
                    $('.box01 h1').text(function(index, text){
                        return text + (index + 1);
                    });
                },3000);

                //6초뒤에 .box02내부의 p태그 텍스트를 기존텍스트+숫자로 변경
                setTimeout(function(){
                    $('.box02 p').text(function(index, text){
                        return text + (index + 1);
                    });
                },6000);
            });
        </script>
    </head>
    <body>
        <div class="box01">
            <h1>제목태그</h1>
            <h1>제목태그</h1>
            <h1>제목태그</h1>
        </div>
        <hr>
        <div class="box02">
            <p>문단태그</p>
            <p>문단태그</p>
            <p>문단태그</p>
        </div>
    </body>
</html>

- [ .box01 ] 내부의  <h1> 태그의 글자를 3초 후에 기존텍스트 + 숫자가 나열되게 처리했습니다.

- [ .box02 ] 내부의  <p> 태그의 글자를 6초 후에 기존텍스트  + 숫자가 나열되게 처리했습니다.

- 기존 텍스트를 뜻하는 매개변수는 text로 처리했습니다. 개발자 중엔 html로 사용하는 사람도 많이 있습니다. 

- 콜백함수의 매개변수인 index는 0번부터 시작되므로 (index + 1)을 해줘야 1부터 시작됩니다.

 

 

## 결과보기

- 기존 텍스트 뒤에 숫자가 붙는 것이 잘 확인됩니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 문서객체 - 속성관련메서드

- 이번에는 문서객체 중 태그의 속성을 컨트롤하는 메서드들을 보도록 하겠습니다. 

 

 

 

 

1) attr()메서드와 prop()메서드 비교

- attr메서드와 prop메서드는 문서객체의 태그 속성을 컨트롤하는 메서드입니다.

- 둘다 게터와 세터를 갖고 있어, 태그 속성값을 얻어올 수도 있고, 변경할 수도 있습니다. 

- 두 메서드의 큰 차이는 속성명과 속성값이 같은 경우 한번만 적을 때 값을 갖고 오는 차이점입니다.

- 예를 들어  <img width="300"></a> 를 작성하면 width속성에는 값을 꼭 써야 합니다. 이 경우가 속성명과 속성값이 다른 경우입니다. 

- 또 다른 예시로  <input type="checkbox" checked> 의 경우는 check속성의 값이 같아서 보통 한번만 씁니다. 이런 경우에 attr메서드와 prop메서드가 다르게 적용됩니다. 

 

 

** 사용이미지

- 출처 :  https://pixabay.com/ko/

test.jpg
0.38MB

 

 

 

 

 

## img태그 width속성 코드 보기 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - HTML요소관련 메서드</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                //img태그 width속성값 얻어오기
                var width01 = $('img').attr('width');
                var width02 = $('img').prop('width');

                //img태그 width 결과 출력
                $('.img01').html(width01);
                $('.img02').html(width02);
            });
        </script>
    </head>
    <body>
        <img src="test.jpg" width="300" alt="">
        <hr>
        <h3>src값 확인</h3>
        <p>attr()메서드 : <span class="img01"></span></p>
        <p>prop()메서드 : <span class="img02"></span></p>
    </body>
</html>

- 변수 width01에 img태그의 width속성값을 attr메서드를 사용해서 담았습니다.

- 변수 width02에 img태그의 width속성값을 prop메서드를 사용해서 담았습니다.

- 그리고 그값을 클래스가 [img01]인 곳과 [img02]인 곳에 각각 출력해보도록 하겠습니다.

 

 

## img태그 width속성 결과보기

- 둘 다 같은 값으로 300의 결과를 출력하는 것을 볼 수 있습니다. 

 

 

 

 

 

## input태그 checked속성 코드 보기 1

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - HTML요소관련 메서드</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                //input태그 checked속성값 얻어오기
                var chk01 = $('input').attr('checked');
                var chk02 = $('input').prop('checked');

                //input태그 checked 결과 출력
                alert(chk01);
                alert(chk02);
            });
        </script>
    </head>
    <body>
        <input type="checkbox" checked>
    </body>
</html>

- 변수 chk01에 input태그의 checked속성값을 attr메서드를 사용해서 담았습니다.

- 변수 chk02에 input태그의 checked속성값을 prop메서드를 사용해서 담았습니다.

- 그리고 그값을 경고창에 출력해보겠습니다.

 

 

 

## input태그 checked속성 결과 보기1

- 현재 속성값을 적지 않았지만, attr메서드는 checkd가 들어가고, prop은 true값이 들어가는 것이 확인됩니다.

 

 

 

 

## input태그 checked속성 코드 보기 2

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - HTML요소관련 메서드</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                //input태그 checked속성값 얻어오기
                var chk01 = $('input').attr('checked');
                var chk02 = $('input').prop('checked');

                //input태그 checked 결과 출력
                alert(chk01);
                alert(chk02);
            });
        </script>
    </head>
    <body>
        <input type="checkbox">
    </body>
</html>

- 이번에는 태그 자체에 checked라는 속성을 적지 않았습니다.

 

 

 

## input태그 checked속성 결과 보기 2

- 결과를 보면 attr메서드는 [undefined]라고 해서 값이 없는 경우를 뜻합니다.

- prop메서드는 [false]로 체크되지 않았다는 값을 불표현식값으로 출력합니다. 

 

 

 

 

 

 

 

 

 

 

 

 

2) attr()메서드와 prop()메서드의 게터

- 게터(getOO)라는 것은 문서객체의 값을 얻어오는 것을 의미합니다.

- 여기서는 태그 속성값을 얻어오는 것이 게터입니다.

 

## 문법

$('문서객체선택').attr('속성명');

$('문서객체선택').prop('속성명');

- 이번 게터는 매개변수가 하나입니다. 태그의 속성 종류는 많기 때문에 그중에 필요한 것을 선택해야해서 그렇습니다.

 

 

## 코드 보기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - HTML요소관련 메서드</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                //img태그 src속성값 얻어오기
                var src01 = $('img').attr('src');
                var src02 = $('img').prop('src');

                //input태그 checked 결과 출력
                $('.img01').html(src01);
                $('.img02').html(src02);
            });
        </script>
    </head>
    <body>
        <img src="test.jpg" alt="이미지" width="300">
        <hr>
        <h3>attr메서드 : <span class="img01"></span></h3>
        <h3>prop메서드 : <span class="img02"></span></h3>
    </body>
</html>

- 변수 src01에 img태그의 src속성값을 attr메서드를 사용해서 담았습니다.

- 변수 src02에 img태그의 src속성값을 prop메서드를 사용해서 담았습니다.

- 그리고 그값을 클래스가 [img01]인 곳과 [img02]인 곳에 각각 출력해보도록 하겠습니다.

 

 

## 결과보기

- attr메서드는 우리가 작성한 결과값, 즉 상대경로로 표시해줍니다.

- prop메서드는 실제 인식하는 주소 url로 경로를 표시해줍니다. 

 

 

 

 

 

 

 

 

 

3) attr()메서드와 prop()메서드의 세터1

- 세터(setOO)는 문서객체의 값을 변경하는 메서드입니다.

- 그래서 지금 볼 것은 태그 속성값을 변경하는 겁니다.

- 체크되지 않은 체크박스를 체크해보도록 하겠습니다. 

 

 

## 문법

$('문서객체선택').attr('속성명', 값);

$('문서객체선택').prop('속성명', 값);

 

 

## 코드 보기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - HTML요소관련 메서드</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                //3초 뒤 체크
                setTimeout(function(){
                    $('#chk01').attr('checked','checked');
                    $('#chk02').prop('checked',true);
                },3000);
            });
        </script>
    </head>
    <body>
        <label for="chk01">attr메서드로 체크</label>
        <input type="checkbox" id="chk01">
        <hr>
        <label for="chk02">prop메서드로 체크</label>
        <input type="checkbox" id="chk02">
    </body>
</html>

- 3초뒤 체크할 수 있도록  setTimeout() 함수를 작성했습니다. 

-  attr() 메서드를 썼다면 실제 값인 [ checked ]를 문자열로 입력해야 합니다.

-  prop() 메서드를 썼다면 불표현식인 [ true ]를 키워드로 입력해야 합니다.

 

 

## 결과보기

- 처음엔 체크안되어 있다가 추후에 체크되는 것이 잘 확인됩니다.

 

 

 

 

 

 

 

4) attr()메서드와 prop()메서드의 세터2

- 이번에는 attr메서드로만 하도록 하겠습니다.

- attr메서드는 태그 속성을 컨트롤 합니다. 하지만 컨트롤 하고 싶은 속성이 많은 수도 있겠죠?

- 그래서 여러 속성을 한번에 변경하는 것을 해보도록 하겠습니다.

 

## 문법

$('문서객체선택').attr({
	속성명: 값,
    속성명: 값
});

$('문서객체선택').prop({
	속성명: 값,
    속성명: 값
});

 

 

## 코드 보기

- 이번에는 이미지의 높이와 폭을 둘다 300px로 변경해보겠습니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - HTML요소관련 메서드</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                $('img').attr({
                    width: 300,
                    height: 300
                });
            });
        </script>
    </head>
    <body>
        <img src="test.jpg" alt="">
    </body>
</html>

- 이때 속성명을 따옴표 내부에 쓰지 않는다는 것을 기억해주세요.

 

 

## 결과보기

- 둘다 300px로 처리되서 정사각형으로 나오는 것이 보입니다.

- prop을 사용해도 되지만 보통 attr메서드를 더 많이 사용합니다. 

 

 

 

 

 

 

 

 

 

5) attr()메서드와 prop()메서드의 세터3

- 이번에도 attr메서드로만 하도록 하겠습니다.

- 태그 속성을 배열 순번대로 컨트롤 하는 것을 해보겠습니다.

 

## 문법

$('문서객체선택').attr('속성명',function(index){

});

$('문서객체선택').prop('속성명',function(index){

});

- 역시 여기서 콜백함수의 매개변수인 index는 문서객체의 배열번호를 의미합니다. 

- 0번부터 시작되는 것을 잘 기억해주세요.

 

 

## 코드 보기

- 이번에는 이미지를 3개 넣고, 폭을 각각 100px, 200px, 300px로 처리해볼게요.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리 - HTML요소관련 메서드</title>
        <script src="jquery-1.12.4.min.js"></script>
        <script>
            $(document).ready(function(){
                $('img').attr('width',function(index){
                    return (index + 1) * 100;
                });
            });
        </script>
    </head>
    <body>
        <img src="test.jpg" alt="">
        <img src="test.jpg" alt="">
        <img src="test.jpg" alt="">
    </body>
</html>

 

 

## 결과보기

- 왼쪽 이미지부터 100, 200, 300으로 커지는 것을 확인할 수 있습니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형
저작자표시 비영리 변경금지

'웹언어 > jQuery' 카테고리의 다른 글

[jQuery강좌] 9강 제이쿼리 CSS 조작 메서드 - 오쌤의 니가스터디  (0) 2022.08.10
[jQuery강좌] 8강 문서객체 추가/이동/복제/삭제 메서드 - 오쌤의 니가스터디  (0) 2022.08.09
[jQuery강좌] 6강 문서객체 DOM Tree 이동 메서드  (0) 2021.06.29
[jQuery강좌] 5강 문서객체 필터(filter) 메서드 - 오쌤의 니가스터디  (0) 2021.06.26
[jQuery강좌] 4강 문서객체 메서드 문법 - 오쌤의 니가스터디  (0) 2021.06.24

'웹언어/jQuery' Related Articles

티스토리툴바