[DOM - 3] 단일 Element 선택

DOM API를 활용해 문서에서 엘리먼트를 선택하는 방법 (구식)

1. document.getElementBy~ : 단일 엘리먼트를 선택하는 메소드

getElementById

지정된 id 속성 값과 일치하는 단일 요소를 반환합니다. id 속성은 문서 내에서 고유해야 합니다.

getElementsByClassName

지정된 클래스 이름과 일치하는 모든 요소를 선택하고 HTMLCollection(요소의 컬렉션)을 반환합니다.

getElementsByTagName

지정된 HTML 태그 이름과 일치하는 모든 요소를 선택하고 HTMLCollection을 반환합니다.

getElementsByName

지정된 name 속성 값과 일치하는 모든 요소를 선택하고 NodeList(요소의 목록)을 반환합니다.

이는 주로 폼 요소와 관련이 있습니다.

getElementsByTagNa­meNS

네임스페이스 URI와 지정된 로컬 이름과 일치하는 모든 요소를 선택하고 NodeList을 반환합니다

XML 문서에서 주로 사용됩니다.

2. document.getElementsBy~ : 다중 엘리먼트를 선택하는 메소드

getElementsByClassName

지정된 클래스 이름과 일치하는 모든 요소를 선택하고 HTMLCollection(요소의 컬렉션)을 반환합니다.

getElementsByTagName

지정된 HTML 태그 이름과 일치하는 모든 요소를 선택하고 HTMLCollection을 반환합니다.

getElementsByName

지정된 name 속성 값과 일치하는 모든 요소를 선택하고 NodeList(요소의 목록)을 반환합니다.

이 주로 폼 요소와 관련이 있습니다.

getElementsByTagNa­meNS

네임스페이스 URI와 지정된 로컬 이름과 일치하는 모든 요소를 선택하고 NodeList을 반환합니다.

XML 문서에서 주로 사용됩니다.

---

Element API

.innerHTML

엘리먼트 안의 HTML코드를 변경

 

.innerText 속성

엘리먼트 안의 HTML코드를 변경

 

.style 속성

엘리먼트 안의 HTML코드를 변경

 

.value 속성

input element에 입력된 값은 .value를 통해 얻어올 수 있음

 

.getAttribute 

element의 속성의 값을 얻어옴.

인자는 attribute 이름을 받음.
직접 객체에 동기화되지 않는 속성에 대해서도 접근이 가능.

 

예를 들어, 아래는 id가 "myImage"인 이미지 요소의 "src" 속성 값을 가져오는 예제입니다. ✔️

var imageElement = document.getElementById("myImage"); // 이미지 요소를 선택합니다.
var srcValue = imageElement.getAttribute("src"); // "src" 속성의 값을 가져옵니다.

console.log(srcValue); // "src" 속성의 값이 출력됩니다.

 

.setAttribute 

element의 속성의 값을 설정함.
두개의 인자 : attribute 이름, 설정할 속성의 값을 받음
직접 객체에 동기화되지 않는 속성에 대해서도 값 설정이 가능

 

예를 들어, id가 "myImage"인 이미지 요소의 "src" 속성 값을 변경하려면 다음과 같이 사용할 수 있습니다. ✔️

var imageElement = document.getElementById("myImage"); // 이미지 요소를 선택합니다.
imageElement.setAttribute("src", "new-image.jpg"); // "src" 속성의 값을 변경합니다.