Javascript_01: 연결하기

Javascript_01: 연결하기

VS Code에서 script 를 입력하면 두 가지 항목이 뜬다

script / script src:

이 때 script src: 를 선택하면 자동으로

" " 내에 연결할 자바스크립트 파일명을 입력한다

JS

*index.html과 index.js가 연결되었다

id 태그 선택은 document.getElementById( );

*get Element: 요소를 가져온다 / By Id: 아이디를 통해

document.getElementById(' id 값 ' );

특정 id를 출력하는 구문을 만들고, html파일을 Server로 열면 '개발자도구-console'란에 출력된다

const myTag = document.getElementById('myNumber'); console.log(myTag);

document.getElementById( ); id가 존재O id의 요소를 반환 id가 존재X null

class 태그 선택은 document.getElementsByClassName( );

*class는 개수가 1개 이상이므로 -s가 붙는다

document.getElementsByClassName(' class 이름 ' );

위와 같이 입력하면 color-btn과 관련된 모든 class의 요소가 반환되며 {중괄호}안에 배열처럼 열거된다

그러나 배열의 split 등 함수는 사용할 수 없고 배열의 [index], .length나 for문 등은 사용할 수 있다

const myTags = document.getElementsByClassName('color-btn'); console.log(myTags); for( e of myTags){ console.log(e); }​

*document.getElementsByClass()의 for문의 사용

document.getElementsByClassName(); {중괄호}안 class의 요소들이 나열

그러나 배열 그 자체는 아니다 split 등 배열함수 사용X [index]와 .length, for 문 등 사용O

*유사배열이라고 한다, 포함관계 상관없이 html보기 순으로 가져온다

document.getElementsByClassName(); class가 존재O 유사 배열 split등 배열함수 X for,length,index O class가 한 개만 존재 변수명[0]으로 호출해야 보인다 class가 존재X HTMLCollection{ } //빈 유사배열

태그 이름으로 선택한다 document.getElementsByTagName( );

*Tag는 개수가 1개 이상이므로 -s가 붙는다

*codeit 자바스크립트 중급 강의를 참고하였습니다

document.getElementById( ); id가 존재O id의 요소를 반환 id가 존재X null

document.getElementsByClassName(); class가 존재O 유사 배열 split등 배열함수 X for,length,index O class가 한 개만 존재 변수명[0]으로 호출해야 보인다 class가 존재X HTMLCollection{ } //빈 유사배열

document.getElementsByTagName(); tag가 존재O 유사 배열 split등 배열함수 X for,length,index O tag가 존재X HTMLCollection{ } //빈 유사배열

from http://devyoseph.tistory.com/5 by ccl(A) rewrite - 2021-09-21 03:01:21