[JavaScript] Document/Element 주요 메소드

📌 Document

• HTML 문서를 표현하는 객체
• 웹브라우저 내장객체인 document는 HTML 문서를 표현하는 Document 객체가 저장되어 있다.

✔️ 주요 메소드

1. Element getElementById(아이디)

• Document 객체에서 지정된 아이디를 가진 엘리먼트 객체를 찾아서 반환한다.
• 일치하는 엘리먼트가 없으면 null이 반환된다.

2. Element querySelector(선택자)

• Document 객체에서 지정된 선택자로 찾아지는 첫번째 엘리먼트 객체를 반환한다.
• 일치하는 엘리먼트가 없으면 null이 반환된다.

3. NodeList querySelectorAll(선택자)

• Doucument 객체에서 지정된 선택자로 찾아지는 모든 엘리먼트 객체를 NodeList객체에 담아서 반환한다.
• 일치하는 엘리먼트가 없으면 빈 NodeList객체가 반환된다.

---

📌 Element

• HTML 태그를 표현하는 객체
• HTML을 조작한다는 것은 결국 Element 객체를 조작하는 것이다.

✔️ 주요 프로퍼티

1. textContent

• 태그의 텍스트 컨텐츠를 표현한다.

<p i="x">안녕</p>

// 텍스트 조회
	let text = document.getElementById("x").textContent;
// 텍스트 변경
	document.getElementById("x").textContent = "잘가";

2. innerHTML

• 태그의 내부 HTML 컨텐츠를 표현한다.

✔️ (폼 입력필드 전용) 주요 프로퍼티

3. value

• 입력필드(input, select, textarea)의 값을 표현한다.

4. name

• 입력필드(form, input, select, textarea)의 이름을 표현한다.

5. checked

• 입력필드(체크박스, 라디오버튼)의 체크여부를 표현한다.
  true/false 중 하나의 값이다.

6. disabled

• 폼 입력요소(input, select, textarea, button 등)의 비활성여부를 표현한다.
  true/false 중 하나의 값이다.

7. readOnly

• 입력필드(input, textarea 등)의 읽기전용 여부를 표현한다.
  true/false 중 하나의 값이다.

✔️ 주요 메소드

1. Element querySelector(선택자)

• 이 엘리먼트 객체의 자손 중에서 지정된 선택자로 찾아지는 첫번째 엘리먼트 객체를 반환한다.
• 일치하는 엘리먼트가 없으면 null이 반환된다.

2. NodeList querySelectorAll(선택자)

• 이 엘리먼트 객체의 자손 중에서 지정된 선택자로 찾아지는 모든 엘리먼트 객체를 NodeList객체에 담아서 반환한다.
• 일치하는 엘리먼트가 없으면 빈 NodeList객체가 반환된다.

 

---

< 해당 글은 velog에서 이전하며 옮겨온 글로, 가독성이 좋지 않을 수 있는 점 양해 부탁드립니다. >

🔗 velog 버전 보기 : https://velog.io/@ryuneng2/JavaScript-Document-Element