[JavaScript] HTML 요소 접근 / 값 가져오기

1. 정리

▶ script에서 html 요소에 접근 검색

document.getElementById('아이디명')

document.getElementsByTagName('태그명')

document.getElementsByClassName('클래스명')

>> class 나 name은 n개의 태그에 같은 이름을 부여 할 수 있지만, 

    id는 한 개만 존재하니까 s 가 안 붙는다.

 

▶ es6에 추가된 기능 --> document.getElement랑 같은 기능

document.querySelector('#id이름')

document.querySelector('.class이름')

document.querySelector('tag이름')

 

document.querySelectorAll('.class이름')

document.querySelectorAll('tag이름')

 

 

▶ 검색된 html 요소 출력

변수.innerHTML	출력문에 포함 된 html 기능O
변수. textContent	출력문에 포함 된 html 기능 X --> 문자처럼 출력
변수.value	사용자에게 텍스트 입력 or 선택 받을 때

** value  쓰는 예시

>> input type= text / password / textarea / radio / checkox / select-option

 

▶HTML태그보다 스크립트를 먼저 기술해도 나중에 실행되는 방법

window.onload = function( ) {  내용 }

>> 자바스크립트 코드는 위에서 아래로 실행

>> script가 HTML태그보다 먼저 실행되어도 변수 / 아이디 / 클래스가 뭔지 모르기 때문에 함수를 호출한다!

 

---

2. 예시

▶스크립트

>> 배열 출력 할 때는 인덱스 꼭 알려줄 것!

 

 

 

▶브라우저