[공통] 요소 선택

요소 선택

1. '요소 선택'이란 HTML 문서에 있는 태그(Tag)를 변수의 값으로 하는 것을 의미한다.

---

ID 속성으로 선택

• HTML 태그가 가지고 있는 'id' 속성 값을 기준으로 요소를 선택하는 것이다.
• window.document.getElementById(x) : 주어진 x 문자열의 값을 ID로 가지는 요소를 선택한다. 그러한 요소가 없다면(그런 ID를 가지는 태그가 없다면) undefined를 반환(Return)한다.

---

CSS 선택자로 선택

• 어떠한 부모가 가지고 있는 자식 혹은 자손을 CSS 문법의 선택자를 기준으로 선택하는 것이다.
• (어떠한 부모 요소인 변수).querySelector(x) : 선행하는 부모 요소의 자식 혹은 자손이고 CSS 선택자인 주어진 문자열 x를 만족하는 요소 한 개를 선택한다. 없으면 null.
• (어떠한 부모 요소인 변수).querySelectorALL(x) : 선행하는 부모 요소의 자식 혹은 자손이고 css 선택자인 주어진 문자열 x를 만족하는 요소 여러개를 선택한다. 없으면 길이가 0인 배열.

---

 

Form 태그 내부의 Input 태그 선택

• form 태그 내부에 존재하는 input 태그들은 name 속성 값으로 접근 할 수 있다.

<form id="someForm">
    <label>
       <input name="em" type="email">
    </label>
    <label>
       <input name="pswd" type="password">
    </label>
    <input name="lg" type="submit" value="로그인">
</form>

 

위 HTML 구조에서 form 태그 내부의 input 및 select 태그는 아래와 같이 변수로 선택할 수 있다.

const someForm = window.document.getElementById('someForm');
someForm.onsubmit = () => {
    alert('이메일 : ' + someForm['em'].value);
    alert('비밀번호 : ' + someForm['pswd'].value);
};

 

위 예와 같이 어떤 form 태그가 가지고 있는 input 및 select 태그는 이가 가진 name 속성값을 이용해 form 태그에 대한 변수에 대괄호를 이용하여 접근할 수 있다.