다시 시작한 공부 📖
자바스크립트를 공부해보자!
오늘의 강의 ☝🏻
querySelector - 맨 처음 하나만 가져온다.
querySelectorAll - 모두 다 가져온다.
- id가 여러개 있는 코드는 잘못한 코딩이다.
- a 태그 안에있는 href 링크를 가져오고 싶다면
const link = document.querySelector('.ilbuni a');
console.log(link.getAttribute('href'));link에서 가져온 객체(a)가 가진 메소드이니까 getAttribute 하고 ( ) 안에 문자열로 값을 가져오길 원하는 속성(href)을 쓰면 된다.
- 가져오는 거 말고 셋팅하고 싶다면 예를들어서 자바스크립트를 동적으로 링크를 셋팅하고 싶다면 그러면 get이 아니라 set으로 바꾸면 됩니다.
const link = document.querySelector('.ilbuni a');
console.log(link.getAttribute('href'));
link.setAttribute('href', 'https://naver.com')
console.log(link.getAttribute('href'));여기서는 매개변수가 2개입니다. 첫번째 매개변수 자리에는 인자로 내가 바꾸고 싶은 속성이름을 쓰면 됩니다. 쉼표(,)를 하고 두번째 매개변수 자리에는 내가 바꾸고 싶은 주소를 적으면 됩니다.
그럼 이렇게 됩니다.
- return값은 도대체 왜 필요한건지, 있는 함수는 뭐고 없는 함수는 뭔지 이거를 헷깔려하는 분들이 많습니다. 그럼 여기서 문제 getAttribute는 return값이 있는 함수일까요 없는 함수일까요?
정답은 있습니다. 있으니까 위에 사진처럼 출력이 된 것입니다.
return값이 없으면 안찍힙니다. undefined가 출력이 될 것입니다.
그런데 문자열이 찍혔다는 거 자체가 return값이 문자열이라는 겁니다.
get이라는 의미 자체가 얻어온다는 의미입니다. 얻어온다는 건 우리가 얻을 것이 있어야한다는 겁니다. 우리가 얻은 건 문자열이죠. 그러므로
getAttribute는 return값이 있는 함수 입니다.
반면에 setAttrubute는 return값이 있을 필요가 있을까요? 없습니다. 그냥 원래 값을 바꾸는 용도로만 쓰일뿐입니다. 그러므로 setAttribute는 return값이 없는 함수입니다.
만약에 콘솔창에다가 setAttribute를 실행을 한다음에 그것을 출력을 해보면 undefined 가 나옵니다.
- class를 넣고 빼고 하는 것을 알아봅시다.
.special{
background: pink;
}
const link =document.querySelector('.ilbuni a');
link.className='special';라고하면 Google이라는 글자뒤에 pink색 바탕이 생긴 것을 확인 할 수 있습니다. 하지만
<style>
.link-google {
color: red;
}
.special {
background: pink;
}
</style>
</head>
<body>
<a class="link-google" href="https://google.com">Google</a>
<script>
const link =document.querySelector('.ilbuni a');
// link.className='special';맨 아래 link.className='special' 를 주석처리를 하고 실행해보면 Google이라는 글자가 빨간색으로 보입니다. 그러면 여기서 다시 link.className='special'를 실행해보면?
백그라운드 핑크는 잘 들어갔는데 글자는 파란색으로 보입니다.
검사에서 확인해보면 special은 잘 들어갔는데 link-google은 없어진걸로 보입니다.
className 이라는 속성에 'spacial'이라는 값을 넣어준겁니다. 그러니까
const link =document.querySelector('.ilbuni a');
link.className='special link-google';로 수정을 해줘야지 바탕도 핑크가 되고 글자도 빨간색으로 바뀝니다.
그런데 이렇게 계속 추가를 하면 너무 불편하겠죠. 코딩을 할 때 내가 넣고싶은 것만 추가를 하거나 내가 빼고 싶은 것만 삭제를 하는 동작이 많습니다.
link-google이 있던 말던 special 클래스를 그냥 추가를 하고 싶은건데 말이죠.
이럴때 classList 라는 객체를 씁니다. css의 클래스의 관련된 기능들을 가지고 있는 객체입니다. 이 객체가 가진 .add 라는 메소드를 쓰게되면 ( ) 로 호출을 해야하는 것이고, 안에 인자로 내가 추가하고 싶은 클래스를 넣어주면 됩니다.
const link =document.querySelector('.ilbuni a');
// link.className='special link-google';
link.classList.add('special')
link-google이 살아있고 거기에 special가 add만 된 상태.
이게 훨씬 편합니다.
그렇다면 없애는건 뭘까요? remove입니다.
const link =document.querySelector('.ilbuni a');
// link.className='special link-google';
link.classList.add('special')
setTimeout(function (){
link.classList.remove('link-google');
},2000);코드해석: add로 special이 들어가고 2초후에 link-google이 없어진다는 것. 2초후에 글씨가 빨간색인게 없어지면서 파란색으로 바뀐다.
그렇다면 클래스를 여러개 넣고싶고 여러개 삭제하고 싶을 때는?
link.classList.add('special','foo');이런식으로 추가해주면 됩니다. remove도 마찬가지입니다. 매개변수 자리에 들어갈 인자를 늘려주면됩니다. 우리가 원하는 클래스만큼.
여기서
console.log(link.classList.contains('special'));를 하면 뭐가 찍히냐면 true 가 찍힙니다. contains라는 메소드 자체가 boolean 값인 true 또는 false를 return한다는 것을 알 수 있습니다. 이 것은 뭐냐면 special이라는 클래스를 link가 가지고 있으면 true 아니면 false 입니다. 어떤 조건을 판별할 때 많이 사용합니다. classList객체가 가지고 있는 contains라는 메소드 입니다.
몰랐던 사실 배우고 갑니다 : ) 화이팅!🙇🏻♀️👍🏻