Study/Javascript

Javascript_01: 태그 연결하기

devyoseph 2021. 9. 21. 02:37
<script>

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

script / script src:

이 때 script src: 를 선택하면 자동으로 <script> 폼이 생성된다

<script src=""></script>

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <!--내용-->
 
  <script src="index.js"></script>
  
</body>
</html>

*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가 붙는다

 

 

CSS 선택자로 태그를 선택한다   document.querySelector(' ');

 

document.querySelector(' #id명 ');
document.querySelector(' .class명 ');

여러 클래스가 아닌 클래스 중 가장 첫 번째가 호출이 된다

document.querySelectorAll( ' .class명 ')

해당 클래스인 모든 요소가 유사배열인 NodeList에 나열된다

.querySelector
document.querySelector('#idname'); = document.getElementById('idname');
document.querySelector('.classname'); = document.getElementsByClassname('classname');
document.querySelectorAll('.classname'); = document.getElementsByClassname('classname');

 

const myTag = document.querySelector('.color-btn');
console.log(myTag);
const myTag2 = document.querySelectorAll('.color-btn');
console.log(myTag2);

 

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

<javascript연결하기 요약>

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{ } //빈 유사배열
.querySelector
document.querySelector('#idname'); = document.getElementById('idname');
document.querySelector('.classname'); = document.getElementsByClassname('classname');
document.querySelectorAll('.classname'); = document.getElementsByClassname('classname');

 

저작자표시

'Study > Javascript' 카테고리의 다른 글

Javascript_06: 스타일 접근하기 classList, className  (0) 2021.09.22
Javascript_05: 속성 다루기 .getAttribute() .setAttribute() .removeAttribute()  (0) 2021.09.22
Javascript_04: 요소노드 속성 변경(자바스크립트에서 HTML을 변경), innerHTML(), outerHTML(), textContent(), createElement()  (0) 2021.09.22
Javascript_03: DOM(Document Object Model)의 이해  (0) 2021.09.22
Javascript_02: 이벤트(Event)와 버튼  (0) 2021.09.21

'Study/Javascript'의 다른글

  • 현재글Javascript_01: 태그 연결하기

관련글

티스토리툴바