본문 바로가기
FrontEnd

5/16 - DOM 요소 접근, JQuery

by Jiwon_Loopy 2025. 5. 17.
반응형

목차

DOM 요소 접근

  • 기본형
    • documnet.getElementById(”id명”)
    • document.getElementsByclassName(”class명”)
    • document.getElementsByTagName(”태그명”)
    • TagName과 class는 여러 개를 가져올 수 있으므로, Element뒤에 s를 붙여야 한다.
  • 하나만 가저오는 메서드
    • document.querySelector(선택자)
  • 모든 요소를 가져오는 메서드
    • document.querySelectorAll(선택자)
  • 웹 요소의 내용에 접근하기
    • 요소.innerText
      • 하나만 가져옴
    • 요소.innerHtml
    • 요소.textContent
      • 다 가져옴
    • text 관련은 내용 바꿀 때
    • html 관련은 html태그가 포함된 내용을 바꿀 때
  • 이벤트
    • preventDefault()
      • 이벤트를 취소할 수 있는 경우 취소
      • 아무 일도 일어나지 않음
    네이버
    document.querySelector('#naver').onclick = function(event){
        alert('네이버')
        // 기본이벤트 중지
        event.preventDefault();
    }
    • stopPropagation()
      • 전파 제거
    네이버
    이벤트
        document.querySelector('#sp').onclick=function(a){
        alert('이벤트s') // 덮어씌워짐
        // 이벤트 전파 제거
        a.stopPropagation();
    }
  • this 예약어
<input type = "button" value="버튼1">
<input type = "button" value="버튼2">
<input type = "button" value="버튼3">

<script>
    let buttons = document.querySelectorAll("input[type='button']")
    buttons.forEach((e, i) => { e.onclick = function(e){
        console.log(this.value)}
    })
</script>

DOM에서 노드 추가, 삭제

  • 내용이 있는 텍스트 노드 추가
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.onload = function() {
        // li 객체 생성
        let newItem = document.createElement("li")
        // li 객체 안에 들어갈 텍스트 노드 생성
        let textNode = document.createTextNode('TypeScript')
        // 텍스트 노드를 li에 붙이기
        newItem.appendChild(textNode)
        // li를 ul의 자식으로 붙이기
        document.querySelector("#itemList").appendChild(newItem)
    }
</script>
<body>
    <h1>Web Programming</h1>
    <ul id="itemList">
        <li>HTML</li>
        <li>CSS</li>
        <li>Java Script</li>
    </ul>
</body>
</html>

  • 속성값이 있는 요소 추가
let newImg = document.createElement('img')
newImg.src = "/img/miki.png"
document.body.appendChild(newImg)

  • 삭제하기
document.querySelector('h1').remove()

 

JQuery 시작

jQuery

  • 사용하고자 하는 곳의 head 태그 내에서 아래 코드 넣기
    • 인터넷이 연결되어야만 사용 가능
    • 사용법
      • 다운로드 서버 저장
      • CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

JQuery

  • 선택자
    • 기본 형
$("선택자")

ex) 

// 기존
document.getElementById("id")

// JQuery
$("#id")
  • 색깔을 빨간색으로 바꾸는 예제
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <h1>안녕하세요</h1>
    <script>
        $("h1").css('color','red');
    </script>
</body>
</html>

  • forEach 구문 JQuery로 활용해보기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <script>
        let arr = [1,2,3,4,5]
        $.each(arr, function(i, e){
            console.log(i,e);
        })
    </script>
</body>
</html>

 

 

 

 

  • 태그 찍어보기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <h1>안녕하세요1</h1>
    <h1>안녕하세요2</h1>
    <h1>안녕하세요3</h1>
    <h1>안녕하세요4</h1>
    <h1>안녕하세요5</h1>
    <script>
        $("h1").each((i,e) => {
            console.log(i, e)
            console.log(e.innerHTML)
        })
    </script>
</body>
</html>

 

 

  • 문서 조작
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .redText {
            color : red;
        }
    </style>
</head>
<body>
    <h1>안녕하세요1</h1>
    <h1>안녕하세요2</h1>
    <h1>안녕하세요3</h1>
    <h1>안녕하세요4</h1>
    <h1>안녕하세요5</h1>
    <script>
        // 문서 DOM 조작
        // 클래스 추가
        $("h1").addClass("redText")
    </script>
</body>
</html>

  • 클래스 다루기
    • JQuery에서 배열 요소 가져오기
      • eq(인덱스)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .redText {
            color : red;
        }

        .blueText{
            color : blue;
        }
    </style>
</head>
<body>
    <h1>안녕하세요1</h1>
    <h1>안녕하세요2</h1>
    <h1>안녕하세요3</h1>
    <h1>안녕하세요4</h1>
    <h1>안녕하세요5</h1>
    <script>
        // 문서 DOM 조작
        // 클래스 추가
        $("h1").addClass("redText")

        $("h1").eq(1).addClass("blueText")
    </script>
</body>
</html>

  • JQuery에서 메서드 이름은 동일한데 매개변수 개수가 다른 경우
    • .메서드(매개변수1)
      • 가지고 오는 (get)
    • .메서드(매개변수1, 매개변수2)
      • 저장 (set)
  • get
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .redText {
            color: red;
        }

        .blueText {
            color: blue;
        }
    </style>
</head>

<body>
    <img id="img" src="/img/miki.png">

    <script>
        // 속성
        console.log($("#img").attr("src"))

        $("img").attr("src","/images/tree-1-thumb.jpg")
    </script>
</body>

</html>

  • set
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .redText {
            color: red;
        }

        .blueText {
            color: blue;
        }
    </style>
</head>

<body>
    <img id="img" src="/img/miki.png">

    <script>
        // 속성
        console.log($("#img").attr("src"))

        $("img").attr("src","/images/tree-1-thumb.jpg")
    </script>
</body>

</html>

  • attr
    • attr(’속성명’) - get
    • attr(’속성명’, ’속성값’) - se
    • attr(’속성명’, ’콜백’) - 기능 실행
    • arrt(’객체’) - 여러 개
  • 객체 형식으로 한 번에 지정도 가능
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .redText {
            color: red;
        }

        .blueText {
            color: blue;
        }
    </style>
</head>

<body>
    <img id="img" src="/img/miki.png">

    <script>
        $("#img").attr({
            src :"/images/tree-1-thumb.jpg",
            alt : "나무이미지"
        })

    </script>
</body>

</html>
  • removeAttr
    • 클래스 속성 자체 삭제
     // alt 속성 삭제
$("#img").removeAttr('alt')
  • 더 많은 메소드를 알기 위해 JQuery사이트에서 속성을 검색하여 확인할 수 있음

 

css 삭제

// 스타일 제거
$("h2").css('color','')

 

 

객체

  • 객체 내부
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>
    <div id="target">
        <b>홍길동</b>
    </div>
    
    <script>
        // 객체 내부
        console.log($("#target").text())
        console.log($("#target").html())
        $("#target").html("<h1>김길동<h1>")s
        $("#target").text("<h1>김길동<h1>")
    </script>
</body>

</html>
  • 객체 제거
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>
    <div id="target">
        <b>홍길동</b>
    </div>
    
    <script>
        // 객체 삭제
        $("#target").remove() // 해당 선택자의 객체자가 제거
        $("#target").empty() // 객체 비우기
    </script>
</body>

</html>

 

 

메모

  • 이미지 클릭 시 확대, 다시 클릭 시 줄이기
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>라이트박스</title>
    <link rel="stylesheet" href="css/lightbox.css">
    <script>
      window.onload = function(a) {
        let pics = document.querySelectorAll('.pic')
        let lightbox = document.querySelector('#lightbox')
        let lightboxImage = document.querySelector("#lightboxImage")

        for(let i = 0; i<pics.length;i++){
          pics[i].addEventListener('click', showLightbox);
        }

        lightbox.onclick = function(){
          lightbox.style.display = 'none';
        }

        function showLightbox(){
          let bigLocation = this.getAttribute("data-src")
          lightboxImage.src = bigLocation;
          lightbox.style.display = 'block'
        }
      }
    </script>
  </head>
  <body>
    <div class="row">
      <ul>
        <li><img src="images/tree-1-thumb.jpg" data-src="images/tree-1.jpg" class="pic"></li>
        <li><img src="images/tree-2-thumb.jpg" data-src="images/tree-2.jpg" class="pic"></li>
        <li><img src="images/tree-3-thumb.jpg" data-src="images/tree-3.jpg" class="pic"></li> 
        <li><img src="images/tree-4-thumb.jpg" data-src="images/tree-4.jpg" class="pic"></li>
        <li><img src="images/tree-5-thumb.jpg" data-src="images/tree-5.jpg" class="pic"></li>
        <li><img src="images/tree-6-thumb.jpg" data-src="images/tree-6.jpg" class="pic"></li>          
      </ul>    
    </div>
    <div id="lightbox">
			<img src="images/tree-1.jpg" alt="" id="lightboxImage">			
    </div>
  </body>
</html>

 

  • 브라우저 렌더링 순서
    • 요소 → domCreatedLended → 이미지, 동영상 → 완성 (onLoad)
  • DOMContentLoded
    • 태그들이 랜더링이 되면 실행
  • window.onload
    • 시작하기 전에 선언
    • DOMContentLoded와 같이 있을 수 없음
  • 버튼의 기본 이벤트는 페이지 이동
    • 이동 시키지 않게 하기 위해 기본 이벤트 제거
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.onload = function () {
           const button = document.querySelector("button")
            button.addEventListener("click", function(event) {
                event.preventDefault();
                newRegister();
            })

        const itemList = document.querySelector("#itemList")
        itemList.addEventListener("click", (event) => {
            if (event.target.tagName == "LI") {
                if (confirm("삭제하시겠습니까?")) {
                    event.target.remove();
                }
            }
        })

        function newRegister() {
            let newItem = document.createElement("li")
            let subject = document.querySelector("#subject")
            let newText = document.createTextNode(subject.value)

            newItem.appendChild(newText)

            const itemList = document.querySelector("#itemList")
            itemList.appendChild(newItem)

            subject.value = "";
        }
    }
</script>

<body>
   <form action="">
        <label for="subject" class="hidden">주제</label>
        <input type="text" id="subject" autofocus>
        <button>추가</button>
   </form>
   <hr>
   <ul id="itemList"></ul>
</body>

</html>

 

  • 클래스 추가하기
    <style>
        .drawBorder {
            border:1px solid black;
        }
        .blueText {
            color : blue
        }
    </style>
    
newItem.classList.add('drawBorder')
newItem.classList.add('blueText')

 

  • Enter로 전송 클릭 효과 만들기
document.querySelector("#subject").addEventListener('keypress',function(e){
            // 키 코드 알아내는 함수
	console.log(e.keyCode)
	// Enter는 13
  if(e.keyCode == 13){
	  newRegister();
	  }
})

728x90
반응형

'FrontEnd' 카테고리의 다른 글

5/15 - JavaScript 문법  (1) 2025.05.17
5/14 - flex, 반응형 웹 속성, CSS 그리드 레이아웃, 자바 스크립트  (0) 2025.05.17
5/13 - CSS, BOX, 이미지와 그라데이션, 반응형 웹  (0) 2025.05.17
5/12 - CSS  (0) 2025.05.17
5/9 - HTML 태그, CSS 기본  (4) 2025.05.11

관련글

티스토리툴바