web developer

[jquery] DOM(문서 객체 모델) / jquery 문법 / 선택자 본문

JavaScript

[jquery] DOM(문서 객체 모델) / jquery 문법 / 선택자

trueman 2021. 12. 13. 23:21
728x90
728x90

DOM (문서 객체 모델)

문서 객체 모델(DOM, Document Object Model)이란 HTML 문서 객체 구조를 말합니다. HTML 문서의 기본 객체 구조는 최상위 객체인 <html>이 있고 하위 객체로 <head>, <body>가 있습니다.
이때 문서 객체 모델에서는 모든 태그를 객체라고 부르며 , 태그에는 기능과 속성이 포함되어 있습니다. 예를들어 <img>태그는 이미지를 출력하는 기능이 있고 src, alt, width, height와 같은 속성을 포함하고 있습니다.

jquery 문법

(1) $(document).ready()

<script> 
      $(document).ready(function(){ 
            // 실행할 기능을 정의해주세요.
      }); 
</script>

$(document).ready()는 문서가 준비되면 매개변수로 넣은 콜백 함수를 실행하라는 의미입니다.

* jquery 이벤트 메서드 중 하나입니다. 

(2) $(function()

<script> 
      $(function(){ 
            // 실행할 기능을 정의해주세요.
      }); 
</script>

jQuery 의 간단한 형태는 위와 같습니다.


출처 : https://ratseno.tistory.com/68

(3) window.onload

<script>
	window.onload = function(){
            // 실행할 기능을 정의해주세요.
	};
</script>

고전 이벤트 모델은 한 번에 하나의 이벤트만 연결할 수 있습니다. 반면에 jQuery의 이벤트 메서드는 표준 이벤트 모델이나 인터넷 익스플로러 이벤트 모델과 마찬가지로 이벤트로 여러개의 함수를 연결할 수 있습니다.

 

<script>
	var a = document.getElementById( 'hi' ).innerHTML = "hello";
</script>
<span id = "hi">hi</span>

위와 같이 사용을 하면, 원칙상으로 자바스크립트의 document.getElementById( 'hi' ); 가 html 내부 id가 hi이란 태그가 생성되기도 전에 실행됨으로 문제가 일어납니다.

 

<span id = "hi">hi</span>
<script>
	var a = document.getElementById( 'hi' ).innerHTML = "hello";
</script>

그래서 자바스크립트 문서를 뒤로 옮겨야만 합니다.

하지만 자바스크립트가 아래쪽에 놓여 있고 길게 늘어지게 된다면 가독성이 떨어져 보기에도 안 좋아집니다.

이러한 불편을 해결하기 위해서 자바스크립트가 문서가 준비된 상황 이후에 발동하도록만 한다면, 문서 앞에 선언해도 상관없게 되는데 이것이 바로 window.onload입니다.

 

<script>
    window.onload = function(){
       var a = document.getElementById( 'hi' ).innerHTML = "hello";
    }
</script>
<span id = "hi">hi</span>

 window.onload라는 함수를 오버라이딩(재정의) 해주면 되는데 해당 함수 내의 코드 스크립트는 웹브라우저 내의 모든 요소가 준비가 되어야 실행이 되도록 할 수 있습니다.
(웹브라우저 자체를 담당하는 window라는 객체가, 웹 문서를 불러올 때, 문서가 사용되는 시점에 실행되는 onload라는 함수를 내가 다시 재정의 한다는 개념이다.)

 

출처 : https://itworldyo.tistory.com/101

jquery / 선택자(selector)

선택자는 HTML 요소를 선택하여 가져옵니다. 제이쿼리 선택자는 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있습니다. 이때 HTML에 작성한 스타일은 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 CSS는 '정적이다'라고 표현합니다. 하지만, 제이쿼리를 통해 선택자를 사용하면 '동적'으로 스타일을 적용할 수 있습니다. 

 

<body> 영역에 있는 문서 객체를 선택할 수 있는 선택자를 말합니다.

기본 선택자
전체 선택자 $("*")  # 모든 요소를 선택
요소(태그) 선택자 $("elementName") # 지정한 요소명과 일치하는 요소들만 선택
id 선택자 $("#idName") # id 속성에 지정한 값을 가진 요소를 선택
class 선택자 $(".className") # class 속성에 지정한 값을 가진 요소를 선택
속성 선택자 ${"element[속성]"} # 요소 중 속성이 포함된 요소만 선택
그룹 선택자
그룹 선택자 $("elementName,
.className,
#idName")		 # 지정된 요소들을 한 번에 선택
결합자
자식 선택자 ${div span} # <div> 요소 안에 위치하는 모든 <span> 요소를 선택
자손 선택자 ${ul > li}
 # <ul> 요소 바래 아래에 위치하는 모든 <li>요소를 선택

 

사용자 정의 선택자(selector)

사용자 정의 선택자도 있는데 선택자 뒤에 콜론(':')을 붙여 사용합니다. 

 

선택의 정제와 필터링

때때로 선택은 우리가 찾는것보다 더 많을 것을 포함합니다. jQuery는 선택을 정제하고 필터하는데 필요한 여러 메소드를 제공합니다.

$( "div.foo" ).has( "p" ); // <p> 태그를 포함하는 "div.foo" 엘리먼트 
$( "h1" ).not( ".bar" ); // 클래스 bar 를 가지지 않는 <h1> 엘리먼트 
$( "ul li" ).filter( ".current" ); // current 클래스를 가지는 ul li 아이템 
$( "ul li" ).first(); // ul 리스트의 첫번재 아이템 
$( "ul li" ).eq( 5 ); // 여섯번째 아이템

출처: https://offbyone.tistory.com/44 

출처: https://zangzangs.tistory.com/12 

출처 : https://araikuma.tistory.com/607?category=820803 

728x90
728x90

'JavaScript' 카테고리의 다른 글

[javaScript] When to Use Arrays. When to use Objects.  (0) 2022.01.06
[ajax] ajax 정의, $.ajax() 메소드, 데이터 형식  (0) 2021.12.24
[jquery] CSS 선택자를 이용하여 HTML 요소 선택하는 방법 4가지  (0) 2021.10.24
[ajax] 오류 : Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.  (0) 2021.10.21
[ajax] success 작동하지 않는 이유  (0) 2021.10.21
'JavaScript' Related Articles more