<javascript> 객체요소의 우선순위 설정

객체요소의 우선순위 설정을 위해선 보통 아래와 같이 활용하게 된다.

1. 객체요소의 우선순위 설정

• 부모객체>자식객체
• 부모객체 자손객체(기호>대신 띄어쓰기로 구분)
• 선택객체선택객체의선택자
• ex) 
•         #box div{

              /* 아이디명=box 의 자손 태그=div 선택*/
          #box .click div{
              /*아이디명=box이면서 클래스명=click인 부모객체의 자손 태그=div 선택
                = 동일한 객체의 우선순위를 높여서 선택 시 사용
                = 동일한 객체의 선택자를 공백없이 붙여 모두 작성*/
          }
          # box  div.act{
              /* 아이디명=box의 자손 태그=div이면서 클래스명=act인 자손 요소 선택*/
          }

2. 자바스크립트에서의 클래스 추가&제거
일반적으로 선택자.style.속성값=요소(선택자.style.backgroundColor='red') 와 같이 css스타일을 직접 변경하기도 하지만 클래스 추가를 통한 속성값 변경도 가능하다.

• 클래스 추가 : 선택자.classList.add('클래스명')
• 클래스 제거 : 선택자.classList.remove('클래스명')
• 클래스 유무 확인 : 선택자.classList.contains('확인할클래스명') ▶ true, false값으로 확인
  ✅ 클래스 관련 명령에서 클래스명에 .을 작성하지 않도록 주의!

   <script>

        const box=document.querySelector('#box');

        const div=document.querySelector('div')

//1. 클래스 추가

    //선택자.classList.add('클래스명');

    box.addEventListener('click',()=>{

    div.classList.add('act') //box클릭시 div에 .act class명 추가

//2. 클래스 제거 명령

    div.classList.remove('color_click') //box클릭시 div에 .color_click class명 제거

// 3. 클래스 삽입 유무 확인

    // 선택자.classList.contains('확인클래스명')

    // 특정 클래스가 있으면 true, 없으면 false로 반환

    let clickColor=box.classList.contains('color') //box에 color이란 class명 있는지 확인

    alert(clickColor);

})