티스토리 뷰

Frontend/jQuery

[생활코딩][웹브라우저JS]- 제어 대상을 찾기(feat. DOM, jQuery)

blueprint-12 2022. 1. 28. 18:34

 

제어 대상을 찾기(feat. DOM)

문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일입니다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다. 

 

*TIP - Elements 와 Element 를 잘 구분해서 봐야합니다. 복수단위(모든 요소), 단일단위(한가지만) 라고 생각하면 편합니다. 

  • document.getElementsByTagName : 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다.
    • NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다.
  • document.getElementsByClassName : class 속성의 값을 기준으로 객체를 조회
  • document.getElementById : id 값을 기준으로 객체를 조회한다. *성능면에서 가장 우수 ✔
    • id는 문서 내에 유일한 값을 뜻하기도 하며 Elements 가 아닌 Element 즉, 요소 하나만을 리턴하기 때문에 성능면에서 뛰어날 것으로 예상된다. 이 메소드는 사용할 수 있으면 사용하는 것이 좋다. 
  • document.querySelector  : css선택자의 문법을 이용해서 객체를 조회한다. -> 가장 맨처음에 있는 요소 하나만 리턴
  •  document.querySelectorAll : querySelector 과 기본적인 동작방법은 같지만 모든 객체를 조회한다는 점에서 다르다.

라이브러리

: 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어 //DOM BOM JSCore 를 기반으로 만들어져있음

jQuery 

: DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구.  -> DOM을 직접사용하면 10줄이 되는 코드를 jQuery를 사용하면 한 줄로 줄일 수 있다. 

제이쿼리 적용하는 법은 크게 두 가지로 CDN을 사용하거나 직접 다운 받아서 사용하는 방법이 있습니다. 

 

▶google CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  • CDN을 사용하면 직접 파일을 다운받지 않고도 한줄짜리 코드를 복사하여 사용할 파일에 갖다 붙이기만 하면 되기때문에 간편하다는 장점이 있습니다.

▶제이쿼리 파일 직접 다운로드 후 적용하기

압축버전과 아닌 버전&amp;amp;nbsp;

  • 제이쿼리 공홈에서 다운로드를 누르면 이런 링크가 보일 것이다. compressed 는 압축버전 파일로 보통 다운받아 사용할 때는 이것을 사용한다. 하지만 시각적으로 구분이 안되기 때문에 좀 더 깔끔하게 코드를 보고 싶다면 uncompressed 를 눌러서 보면 된다. 

->링크를 누른 뒤, ctrl + s(저장하기) -> 적당한 디렉토리에 저장하면 됩니다.-> script 태그의 src에 jquery파일의 경로를 적어주시면 됩니다. e.g.) <script src="../파일이있는곳/제이쿼리파일명.js"></script>

 

jQuery를 사용하기 위해서는 제이쿼리를 HTML에 로드해야 합니다. 위의 코드(CDN)를 복사하여 body태그의 끝쪽에 넣어줍니다. // 헤드 태그에 넣어도되지만 body태그의 끝쪽에 넣는 것이 선호됩니다. 참고로 기존 script태그보다 위에 위치해야합니다. 

 

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    //jQuery(document).ready(function ($) {  //제이쿼리 코드  }); 
    //이 부분은 코드의 양을 줄여야할 때는지워도 된다.
      jQuery(document).ready(function ($) {
        $("body").prepend("<h1>Hello world</h1>");
      });
    </script>
  </body>
  • 이 코드의 결과는 Body 태그 아래에 <h1>Hello world</h1> 코드가 만들어진다.
  • jQuery(document).ready(function ($) {  //제이쿼리 코드  }); 로 감싸는 것이 이상적인 방법이며 이 코드가 없어도 정상작동한다. -> 이 부분은 Window.onload = function(){ //자바스크립트 코드}; 랑 같은 논리로 접근하면 될 거 같다. 문서가 모두 로드된 뒤에 코드가 실행되도록 설정하는 것이다. 
    $(document).ready(function() {
   // jQuery 코드
});

//위와 같은 결과를 보장하는 더욱 짧은 문법
$(function() {
   // jQuery 코드
});​
     
  • 위 아래 코드는 같은 기능을 하기 때문에 더 짧은 아래 코드를 쓰는 것이 좋다.
$(function () {
        $("body").prepend("<h1>Hello world</h1>");
      });

 

제이쿼리 기본문법

$("li").css("color", "blue");
  • $()는 jQuery의 함수이다. 이 함수의 인자로 CSS 선택자(li)를 전달하면 jQuery 객체라는 것을 리턴한다. 이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다. 위의 그림에서 css는 선택자에 해당하는 객체들의 style에 color: blue;로 변경한다. 
  • 제이쿼리 함수가 리턴한 객체의 css메소드를 이용해서 간편하게 css작업을 할 수 있다는 것이다.

jQuery 사용 예제

<body>
    <ul id="demo">
      <li class="active">HTML</li>
      <li id="active">CSS</li>
      <li class="active">JavaScript</li>
    </ul>
    <ul id="execute">
      <li>
        <pre>
var lis = document.getElementsByTagName('li');
for(var i=0; i&lt;lis.length; i++){
    lis[i].style.color='red';   
</pre
        >
        <pre>$('li').css('color', 'red')     </pre>
        <input
          type="button"
          value="execute"
          onclick="$('li').css('color', 'red')"
        />
      </li>
      <li>
        <pre>
var lis = document.getElementsByClassName('active');
for(var i=0; i &lt; lis.length; i++){
    lis[i].style.color='red';   
}</pre
        >
        <pre>$('.active').css('color', 'red')</pre>
        <input
          type="button"
          value="execute"
          onclick="$('.active').css('color', 'red')"
        />
      </li>
      <li>
        = document.ge
        <pre>
var li tElementById('active');
li.style.color='red';
li.style.textDecoration='underline';</pre
        >
        <pre>
$('$active').css('color', 'red').css('textDecoration', 'underline');
        </pre>
        <input
          type="button"
          value="execute"
          onclick="$('#active').css('color', 'red').css('textDecoration', 'underline')" //Chaining
        />
      </li>
    </ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </body>
  • <pre></pre> 프리 태그- html 안에서 enter를 치거나 스페이스를 하여 공백을 표시해도 브라우저에서는 나타나지 않습니다. 그래서 줄바꿈은<br>태그를 이용하고 공백은 &nbsp라는 문구를 삽입하여 공백을 표현합니다. 여러 태그를 활용하여 개행이나 공백을 넣지 않아도 되는 방법이 있는데 바로 pre 태그입니다. pre태그 내에서는 Enter, Tab , Space를 다 활용할 수 있습니다. 
  • $('#active').css('color', 'red').css('textDecoration', 'underline') //이 코드에서 .css()가 두 번 실행되고 있는데 처음 css메소드가 실행되고 그 반환값으로 객체를 리턴하기 때문에 다시 반환된 객체에 css()메소드를 사용할 수 있게되는 것입니다. 연속적으로 메소드를 호출하여 객체를 꾸밀 수 있게 되는데 이것을 Method Chaining(메소드 체이닝) 이라고 부릅니다.

 

 

 

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

[생활코딩][웹브라우저JS] - jQuery 이벤트 관련 API  (0) 2022.02.16
[생활코딩][웹브라우저JS]- jQuery의 node 제어 API  (0) 2022.02.08
[생활코딩][웹브라우저JS]- jQuery 속성(attr) 제어 API, jQuery 조회 범위 제한  (0) 2022.02.05
[생활코딩][웹브라우저JS]- jQuery 객체, jQuery API  (0) 2022.02.01
[생활코딩] 라이브러리와 프레임워크 (jQuery)  (0) 2021.12.26
댓글