[jQuery] DOM 제어하기

[jQuery] DOM 제어하기

2022. 6. 10. 17:40ㆍJavaScript/jQuery

1. DOM

Document Object Model
text : 태그 사이의 문자열을 제어한다
html : 태그 내부의 html을 제어
val : 입력 도구들의 value 속상값을 제어한다
attr : 태그의 속성을 제어한다.

2. text

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function getA1(){
        const str = $("#a1").text();
        alert(str);
    }

    function getA2(){
        const str = $("#a2").text();
        alert(str);
    }

    function setA3(){
        $("#a3").text("문자열 설정");
    }

    function setHtml(){
        $("#a3").text("<a href='http://google.co.kr>google</a>")
    }
</script>
</head>
<body>
    <div id="a1">a1 문자열</div>
    <button onclick="getA1()">a1 문자열 가져오기</button>

    <div id="a2">
        <a href="http://www.google.co.kr">google</a>
    </div>
    <button onclick="getA2()">a2 문자열 가져오기</button>

    <div id="a3"></div>
    <button onclick="setA3()">a3 문자열 설정하기</button>
    <button onclick="setHtml()">a3 html 설정하기</button>

</body>
</html>

a1 문자열 가져오기 버튼 클릭시 알림에 a1 문자열 가져옴
a2 문자열 가져오기 버튼 클릭시 a 태그의 google 문자열만 가져옴
a3 문자열 설정하기 버튼 클릭시 a3 div태그에 문자열 설정이란 문자열 삽입
a3 html 설정하기 버튼 클릭시 a 태그 html 코드가 들어가지만 문자열 형태로 삽입됨

3. html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function getHtml(){
        const html = $("#a1").html();
        alert(html);
    }

    function setHtml(){
        $("#a1").html("<a href='http://www.apple.co.kr'>apple</a>");
    }
</script>
</head>
<body>
    <div id="a1">
        <a href="http://www.google.co.kr">google</a>
    </div>
    <button onclick="getHtml()">html 가져오기</button>
    <button onclick="setHtml()">html 설정하기</button>
</body>
</html>

html 가져오기 버튼 클릭시 a1 태그의 a태그의 html 코드를 가져옴

html 설정하기 버튼 클릭시 a1 태그의 a태그가 apple 주소로 설정된 a태그로 변경됨

4. var

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function getA1(){
        const str = $("#a1").val();
        alert(str);
    }
    function setA1(){
        $("#a1").val("1234");
    }
</script>
</head>
<body>
    <input type="text" id="a1">
    <br>
    <button onclick="getA1()">value값 가져오기</button>
    <button onclick="setA1()">value값 설정하기</button>
</body>
</html>

위 결과는 입력창에 문자열을 입력후 value값 가져오기 버튼을 클릭한 결과입니다.

위 결과는 value 값 설정하기 버튼을 클릭후 결과입니다.

5. attr

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function getAttr(){
        const src = $("#a1").attr("src");
        const width = $("#a1").attr("width");
        const height = $("#a1").attr("height");
        const id = $("#a1").attr("id");

        $("#result").html("src    : " + src + "<br>"
                        + "width  : " + width + "<br>"
                        + "height : " + height + "<br>"
                        + "id     : " + id + "<br>");
    }
    function setAttr(){
        $("#a1").attr("width", 242);
        $("#a1").attr("height", 242);
    }
</script>
</head>
<body>
    <img src="images/android.png" width="108px" height="127px" id="a1"/>
    <br>
    <div id="result"></div>
    <button onclick="getAttr()">속성 읽어오기</button>
    <button onclick="setAttr()">속성 설정하기</button>
</body>
</html>

위 결과는 속성 읽어오기 버튼을 클릭한 결과입니다.

위 결과는 속성 설정하기 버튼을 클릭하고 속성 읽어오기 버튼을 이어서 클릭한 결과입니다.

학습정리

text 함수를 사용하면 태그 내부의 문자열을 제어 할 수 있습니다.
html 함수를 사용하면 태그 내부의 html 코드를 제어할 수 있습니다.
val 함수를 사용하면 입력 도구들의 value 속성을 제어할 수 있습니다.
attr 함수를 사용하면 태그의 속성을 제어할 수 있습니다.

Reference

source code : https://github.com/yonghwankim-dev/jQuery_study/tree/main/DOM/src/main/webapp
윤재성의 처음 시작하는 jQuery Programming

'JavaScript > jQuery' 카테고리의 다른 글

[jQuery] CSS 제어 (0)	2022.06.13
[jQuery] DOM 추가 삭제 (0)	2022.06.10
[jQuery] jQuery 이벤트 함수 (0)	2022.06.10
[jQuery] Form 태그 선택자 (0)	2022.06.10
[jQuery] 상태 선택자 (0)	2022.06.09

김용환 블로그