20.1. 프로그램언어 자바스크립트(JavaScript)에서의 요소 선택

프로그램언어 자바스크립트의 getElementById 함수 동작 원리

getElementById 함수는 자바스크립트에서 가장 많이 사용되는 메서드 중 하나로, HTML 문서 내에서 특정 id 속성을 가진 요소를 찾아 반환하는 역할을 합니다.

이 함수의 동작 원리는 매우 간단합니다. 먼저, 함수를 호출할 때 인자로 찾고자 하는 요소의 id 값을 전달합니다. 그럼 함수는 전체 HTML 문서를 탐색하여 해당 id를 가진 요소를 찾아서 반환합니다.

아래는 getElementById 함수의 예제 코드입니다.





    getElementById Example


    Hello, World!

프로그램언어 자바스크립트의 querySelector 함수는 HTML 문서 내에서 특정 요소를 선택하는 데 사용됩니다. 이 함수를 사용하면 CSS 선택자를 활용하여 원하는 요소를 선택할 수 있습니다.

아래는 querySelector 함수의 기본적인 사용법입니다.


// HTML 요소 중 id가 "myElement"인 요소를 선택
const element = document.querySelector('#myElement');

위 예제에서는 id가 “myElement”인 요소를 선택하고 변수 element에 할당하였습니다. querySelector 함수는 CSS 선택자를 활용하기 때문에 id 선택자인 “#”을 사용하여 해당 요소를 선택했습니다.

또 다른 예제를 살펴보겠습니다.


// HTML 요소 중 class가 "btn"인 첫 번째 버튼 요소를 선택
const button = document.querySelector('.btn');

위 예제에서는 class가 “btn”인 요소 중 첫 번째 요소를 선택하고 변수 button에 할당하였습니다. 클래스 선택자인 “.”을 사용하여 해당 요소를 선택했습니다.

querySelector 함수를 사용하면 원하는 요소를 선택하여 JavaScript 코드에서 조작할 수 있습니다. 이를 통해 동적인 웹 페이지를 구현하는 데 유용하게 활용할 수 있습니다.

HTML에서 class와 id 선택자는 자바스크립트에서 요소를 선택하고 조작하는 데 사용됩니다. class는 여러 요소에 동시에 적용할 수 있고, id는 고유한 식별자로 한 요소에만 적용할 수 있습니다.

예를 들어, 다음은 HTML 코드에서 class와 id를 사용한 예제입니다.


  <div class="container">
    <p id="paragraph1" class="text">첫 번째 문단</p>
    <p class="text">두 번째 문단</p>
  </div>

위의 코드에서 “container”라는 class는 여러 요소에 적용될 수 있고, “paragraph1″이라는 id는 고유한 식별자로 한 요소에만 적용됩니다.

자바스크립트에서 class 선택자를 사용하여 요소를 선택하려면 다음과 같이 작성합니다.


  const textElements = document.querySelectorAll('.text');
  textElements.forEach(element => {
    console.log(element.textContent);
  });

위의 코드는 class가 “text”인 모든 요소를 선택하고, 각 요소의 텍스트 내용을 콘솔에 출력합니다.

마찬가지로 id 선택자를 사용하여 요소를 선택하려면 다음과 같이 작성할 수 있습니다.


  const paragraph = document.getElementById('paragraph1');
  console.log(paragraph.textContent);

위의 코드는 id가 “paragraph1″인 요소를 선택하고, 해당 요소의 텍스트 내용을 콘솔에 출력합니다.

자바스크립트의 getElementsByClassName 함수는 HTML 문서 내에서 특정 클래스 이름을 가진 모든 요소를 선택하는 데 사용됩니다. 이 함수는 문서 객체 모델(DOM)을 통해 동작하며, 클래스 이름을 기반으로 요소를 찾아 반환합니다.

예를 들어, 아래와 같은 HTML 코드가 있다고 가정해봅시다.


<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

위 코드에서 클래스 이름이 “box”인 div 요소들이 있습니다. 이때, getElementsByClassName 함수를 사용하여 이들을 선택할 수 있습니다.


var boxes = document.getElementsByClassName('box');

위 코드는 “box” 클래스 이름을 가진 모든 요소를 boxes 변수에 저장합니다. 이후에 boxes 변수를 통해 해당 요소들을 조작하거나 스타일을 변경할 수 있습니다.

getElementsByClassName 함수는 클래스 이름을 가진 요소들을 배열 형태로 반환합니다. 따라서, 반환된 요소들은 배열처럼 인덱스를 통해 접근할 수 있습니다. 예를 들어, 첫 번째 요소에 접근하려면 다음과 같이 할 수 있습니다.


var firstBox = boxes[0];

이렇게 하면 boxes 배열의 첫 번째 요소에 접근할 수 있습니다. getElementsByClassName 함수는 해당 클래스 이름을 가진 모든 요소를 선택하므로, 반환된 배열의 길이는 선택된 요소의 개수와 동일합니다.

자바스크립트의 getElementsByName 함수는 HTML 문서 내에서 특정 이름(name)을 가진 요소들을 모두 선택하는데 사용됩니다. 이 함수는 문서 내에서 여러 요소를 선택할 때 유용하게 활용됩니다.

다음은 getElementsByName 함수의 사용법입니다.





    getElementsByName 예제

위 예제 코드에서는 name이 “username”인 input 요소들을 모두 선택하여 값을 출력하는 함수를 정의하였습니다. 버튼을 클릭하면 해당 함수가 실행되어 각 input 요소의 값을 콘솔에 출력합니다.