getElementById, querySelector, $ jQuery

 

 

언젠가 멘붕에 빠진날 document.getElementById 블라블라 이런 코드를 봤다. 

도대체 이건 또 무슨 코드인가 싶었지만 당장 해결해야 했던 부분이 아니였기에 지나쳤다. 

 

강의를 듣는데 이 코드가 나와서 반가웟다 ㅋㅋㅋ

 

개념에 대해 정리해 보자.

 

 

가려운데 콕 집어서 긁을수 있게 해주는 친구들

getElementById, querySelector, $

 

 

 

 

document.getElementById( )

<h1 id = "hello" style = "color:blue;">안녕하세요</h1>

위와 같은 코드가 잇다고 하자. 

 

근데 나는 "안녕하세요" 를 "안녕"으로 바꾸고 싶다. 

그럴땐 저 길고 솰라솰라 하는것처럼 보이는 것을 쓰면 된다. 

document.getElementById('hello').innerHTML = '안녕';

이렇게.

 

이게 무슨말인지 풀어보자면,

document = html문서

. = ~의

getElementById('hello') =  id값이 괄호 안에 있는거 말이야!!!

.innerHTML = 그 안에 html 그걸말이야 

 

이런 말이다. ㅋㅋㅋ

innerHTML 말고도 여러가지가 있는데,

 

HTML DOM 은 JavaScript 로 HTML 요소의 스타일(style)등 html의 모든것을 변경할 수 있게 해줍니다.

(HTML DOM 에 대해서는 나중에 따로 다룰 예정)

 

        document.getElementById('hello').style.fontSize = '16px';    

        document.getElementById('ho').src = 'image.jpg';    

        document.getElementById('hi').style.color = 'green';

 

 

 

근데 Id만 가능할까??  class명으로는 안될까???

가능하다. 

근데 생김새가 좀 다르다. 

 

 

document.getElementsByClassName( )[0]

특성이 있다. 뒤에 index를 넣어줘야만 한다. 

 

ClassName 은 Id와는 다르다. 

유일한 이름을 가지는  Id 에 반해서,

1. ClassName은 같은 성질끼리 같은 이름을 쓰기도 한다. 중복되도 상관없기 때문이다.

2. getElementsByClassName 은 class 속성을 가진 모든 요소를 찾아 배열로 반환한다.

 

그래서 ClassName이 동일한 이름으로 쓰인 몇번째를 말하는 것인지 적어줘야 한다. 

그렇게 해서 사용해 주면 내가 원하는 것을 콕 찝어줄수 있다는것!!

 

 

 

document.querySelector(  )

document.getElementById(  ), document.getElementsByClassName( )[ ] 처럼

내가 원하는 것을 콕 집어줄수 있는 애다.

근데 다른점은 id와  ClassName 구분이 이렇게 길게 늘어지게 있는게 아니라 CSS 문법을 따른다. 

 

예를들어   Id 명으로 콕 집어줄꺼면

document.querySelector('#hello').innerHTML = '바보';

 

예를들어   class 명으로 콕 집어줄꺼면

document.querySelector('.hello').innerHTML = '바보';

 

예를들어   태그 명으로 콕 집어줄꺼면

document.querySelector('hello').innerHTML = '바보';

 

 

그러나 이 방법은 맨 위에 하나만 찾는 속성을 보인다.

 

그럼 내가 원하는게 class명이 중복되고, 맨 위에것이 아니라면 document.querySelector( )를 이용할 수 없는걸까?

아니다. 

 

 

 

document.querySelectorAll(  )[ ]

이렇게 하면 해당되는 모든것을 가져올 수 있다. 대신 뒤에 index가 붙는다. 

 

 

 

 

근데 너~~~무 긴거같지 않은감???

그래서 간략하게 $ 하나로 퉁치기로 했다. 

바로 jQuery

 

 

 

$

 $ 이거 하나가 document.querySelector 혹은 document.querySelectorAll 의 역할을 한다. 

 

 document.querySelector('.hello').innerHTML = '바보'; 

이 내용을 간단하게 아래처럼 표현할 수 있다.

 $('.hello').html('바보1');

 

 

 $ 이렇게나 편한 jQuery를 이용하려면 뒤에 구성원에 대해 좀 간단하게 나마 살펴보면 좋을 것 같다. 

다음 글에서 🧚