[JavaScript] 자바스크립트 데이터 입출력 / 요소(Elements)에 접근하기

 

< 자바스크립트 데이터 입출력 관련 객체들 >

 

window	document
자바스크립트 내장객체	웹문서(HTML)마다 하나씩 만들어지는 객체
브라우저 창이 하나 열릴 때마다 하나씩 만들어지는 객체	HTML문서에 대한 정보들을 가지고 있음
브라우저 창 안에 존재하는 모든 요소들의 최상위 객체
모든 곳에 적용되기 때문에 생략 가능

 

 

 

< 기본 출력 구문 >

 

1) window.alert('알림창에 출력할 문구');

 

2) window.console.log('콘솔창에 출력할 문구');

 

3) document.write('화면에 출력할 문구 ');

- document가 기존에 가지고 있던 HTML 문서에 덮어쓰기 하는 개념

- 화면에 출력할 문자열에 HTML 태그 요소가 있을 경우 내용을 덮어쓰면서 동적으로 요소를 생성해 넣을 수 있음

 

4) 선택한 요소.innerHTML/innerText = '해당 요소에 출력할 문구';

- innerHTML/innerText 속성에 접근하여 어떤 요소의 값(Content)를 가지고 오거나 변경함

- [ 가지고 올 때 ] 변수 = 선택한 요소.innerHTML/innerText;

- [ 변경하고자 할 때 ]  선택한 요소.innerHTML/innerText = '변경할 값';

 

 

 

< 기본 입력 구문 > - 변수에 대입 가능

 

1) 변수 = window.confirm('질문내용');

- '질문 내용'과 '확인/취소'버튼이 존재하는 알림창 발생

- 확인 버튼 클릭 시 true값, 취소 버튼 클릭 시 false를 반환

 

2) 변수 = window.prompt('질문내용');

- '질문 내용'과 입력할 수 있는 '텍스트 상자', '확인/취소'버튼이 보여지는 알림창 발생

- 확인 버튼 클릭 시 텍스트 상자에 입력되어 있는 값이 반환, 취소 버튼 클릭 시 null 값을 반환

 

3) 변수 = 선택한요소.속성(id, className, innerText, innerHTML, ...);

 

4) 변수 = 선택한 input요소.value;

 

 

 

< HTML 요소에 접근하기 > - 해당 객체요소 가져오기

 

- document : 현재 문서의 정보를 가지고 있음.

- 접근 : document가 가진 요소의 정보를 여러가지 방법으로 가져옴 ==> '요소객체'

- 선택된 요소의 속성들에 접근해서 값을 가져오거나 변경 가능 : 선택된요소객체.접근하고자하는속성명

 

1) 아이디로 접근하기

document.getElementById('접근할 요소의 아이디 속성값'); : 요소객체

 

2) 태그명으로 가져오기

document.getElementsByTagName('접근하고자 하는 태그명'); : 배열

- 고유한 값이 아니기 때문에 여러개의 요소가 존재할 수 있음

- 선택된 여러개의 요소객체들이 배열에 담겨 반환

 

3) name 속성값으로 접근하기

document.getElementsByName('접근하고자 하는 name 속성값'); : 배열

- 선택된 여러개의 요소객체들이 배열에 담겨 반환

 

4) 클래스명으로 접근하기

document.getElementsByClassName('접근하고자 하는 class 속성값'); : 배열

- 선택된 여러개의 요소객체들이 배열에 담겨 반환