so woon!

[공통] 요소 선택 본문

Javascript/개념정리

[공통] 요소 선택

xowoony 2022. 9. 19. 13:30

학습일 : 2022. 09. 19
09. 20

요소 선택

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


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


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


3. Form 태그 내부의 Input태그 선택
form 태그 내부에 존재하는 input 및 select 태그들은 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태그에 대한 변수에 대괄호를 이용하여 접근할 수 있다.

 

요소선택 문제1

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>요소 선택</title>
    <script defer src="resources/scripts/common.js"></script>
</head>
<body>
    <form id="sumForm">
        <label>
            <input autofocus name="firstValue" placeholder="값 1" type="number">
        </label>
        <span>더하기</span>
        <label>
            <input name="secondValue" placeholder="값 2" type="number">
        </label>
        <input type="submit" value="계산하기">
    </form>
</body>
</html>

javascript

const sumForm = window.document.getElementById('sumForm');
sumForm.onsubmit = () => {
    if (sumForm['firstValue'].value === '') {
        alert('값 1을 입력해주세요.');
        return false;
    }
    if (sumForm['secondValue'].value === '') {
        alert('값 2을 입력해주세요.');
        return false;
    }
    let firstValue = parseInt(sumForm['firstValue'].value); // typeof(firstValue) -> 'number'
    let secondValue = parseInt(sumForm['secondValue'].value); // typeof(secondValue) -> 'number'
    alert( firstValue + secondValue );
    return false;
};


======실행결과=====

요소선택 문제 2


html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>요소 선택</title>
    <script defer src="resources/scripts/common.js"></script>
</head>
<body>
    <div id="first">첫번째 DIV</div>
    <div class="second">두번째 DIV</div>
    <div class="second">두번째 DIV</div>
</body>
</html>

 

javascript

let firstDiv = window.document.getElementById('first'); // null
firstDiv.innerText = '바뀐 내용';
firstDiv.addEventListener('click', function(){
    alert('일반 익명 함수');
});

let secondDiv = window.document.querySelector('.second');
secondDiv.innerText = '두번째 바뀐 내용';

=========실행결과=======

 

저작자표시 비영리 변경금지 (새창열림)

'Javascript > 개념정리' 카테고리의 다른 글

[공통] 사용자 함수  (1) 2022.09.19
[공통] 이벤트  (0) 2022.09.19
[공통] 멤버  (0) 2022.09.19
[공통] if 문법  (0) 2022.09.19
[공통] 함수  (0) 2022.09.19
'Javascript/개념정리' Related Articles more
Comments