JS | 클래스 선택자 querySelector

요약

document.querySelector 를 통해 클래스 값을 불러오기 할 수 있습니다

사용법

<div class="phone">hello</div>

위의 코드를 생성합니다.

let divPhone = document.querySelector('.phone');

document.querySelector('.phone').innerHTML = '클래스 선택자';

.phone 클래스를 divPhone 값에 저장합니다.

ID 선택자

<div id="phone">hello</div>

document.getElementById('phone').innerHTML = "ID 선택자";

워드프레스 적용

<input type="text" name="meta[rdg_name]" id="subtitle_head" class="regular-text"
value="<?= esc_attr(get_post_meta(get_the_ID(), 'rdg_name', true)) ?>">

document.querySelector('[name="meta[rdg_name]"').innerHTML = "이름";

name을 선택자로 사용할 수 있습니다. 결국 input 도 배열값이기 때문에 가능합니다.

if 문 적용

if (document.querySelector('[name="meta[rdg_name]"').value) {
    console.log('잘됨');
} else if {
    console.log('잘 안됨');
}

value 값을 분기점으로 다른 출력을 만들 수도 있습니다.