querySelector vs selectElementByClassName

js로 원하는 문자 바꿔보기

• document.getElementById().innerHTML : 문자를 변경할 수 있다.

input에 입력한 값을 가져오기

document.getElementById().value

---

querySelector vs selectElementByClassName

아래와 같은 코드가 있다고 가정해보자

 <button class="navbar-toggler" type="button">
      <span class="navbar-toggler-icon"></span>
 </button>

✏️ querySelector

• class는 . , id는 #

document.querySelector('.navbar-toggler')

• ✅ 출력값 : 원하는 button의 요소를 얻을 수 있다.

 <button class="navbar-toggler" type="button">
      <span class="navbar-toggler-icon"></span>
 </button>

---

✏️ getElementsByClassName

document.getElementsByClassName('navbar-toggler')

⛔️ 출력값 : 원하는 요소가 아닌 HTMLCollection이라는 배열을 반환한다.

> HTMLCollection [button.navbar-toggler]

✅ 출력값 : 인덱싱화 해주어야 출력이 가능하다.

document.getElementsByClassName('navbar-toggler')[0]

---

✏️ querySelector vs querySeletorAll

• querySeletor 는 같은 className을 가진 요소 중 제일 위에 있는 태그만 찾는다. 따라서 같은 이름의 클래스 요소가 여러 개를 가질 때 그 중 하나만 선택하고 싶다면 index로 찾아야한다.
• querySeletor 로 태그의 이름도 pick할 수 있다. (예를 들어 form 추출 가능)

아래 코드로 실험해보자

 <ul class="list-group" id="look">
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

• document.querySelector('.list-group-item') 입력 시 출력값은 제일 첫번째 li태그만 가져온다.
• 전체의 값을 가져오려면 querySeletorAll을 사용해줌과 동시에 NodeList 로 변환되기 때문에 인덱스를 이용해 원하는 태그의 값을 가져올 수 있다.

---

class 탈부착식 toggle

document.qeurySeletor('.list-group').classList.toggle('show')
document.querySelector("#test").classList.toggle("show"); //id Selector

---

정규식

.test 를 이용하면 boolean값을 도출할 수 있다.

/abc/.test('a') // false 'abc'가 'a'에 포함되어 있냐 
/[a-z]/.test('a') //true =>a~z까지 중에 a가 있냐
/\S/.test('zzz') // 아무문자 ***1개*** (특수기호 포함)
/^a/.test('abc/') // a로 시작하는 글자 
/(a|b)/.test('a') // a혹은 b가 있는지 

/\S@\S\.\S/.test('aaaa@bbb.com') //false
/\S+@\S+\.\S+/.test('aaa@bbb.com) //true

조건
1. from을 눌렀을 때 password의 input value 이 빈값이거나 대문자가 하나라도 있으면 전송이 되지 않는다.

document.querySelector('form').addEventListener('click', function(e){
    const value = /[A-Z]/
    const password = document.getElementById('password').value

   if(email === '' || /[A-Z]/.test(email)===false){
    e.preventDefault()
   }else{
    console.log('전송')
   }
})

✨ css

• visiblity : 눈에 보이는, 눈에 띄는
  display : 'none' 과 같은 역할을 하지만 깊히 본다면 visibility 는 잠깐 숨겨주는 역할을 한다.
• float : left