JS로 HTML을 다루는 법_(1)
HTML 요소에 접근하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 맘대로 프로그래밍 언어 순위</title>
</head>
<body>
<h2 id="title">내 맘대로 프로그래밍 언어 순위!</h2>
<ol id="list">
<li id="javaScript" class="language">JavaScript</li>
<li id="python" class="language">Python</li>
<li id="java" class="language">Java</li>
<li id="c" class="language">C</li>
<li id="ruby" class="language">Ruby</li>
</ol>
<script src="index.js"></script>
</body>
</html>
document.getElementsByTagName
- HTML 태그 이름으로 태그 선택 => tag에 해당하는 태그 모음(HMTL Collection)
const element = document.getElementsByTagName('li');
console.log(element);
// li태그 요소 전체가 HTML Collection의 유사배열 형태로 출력
document.getElementById
- HTML id 속성으로 태그 선택 => id에 해당하는 태그 하나
- 존재하지 않는 id 값을 입력할 경우 : null 반환
const js = document.getElementById('javaScript');
console.log(js);
// id 값으로 javaScript를 가진 태그 하나를 출력
document.getElementsByClassName
- HTML class 속성으로 태그 선택 => class에 해당하는 태그 모음(HTML Collection)
const list = document.getElementsByClassName('language');
console.log(list);
// class 값으로 language를 가진 모든 태그를 출력
document.querySelectorAll
- css 선택자로 태그 선택 (태그, id, class) => css 선택자에 해당하는 태그 모음(NodeList)
- id인 경우
'#id'
- class인 경우
'.class'
const queryList = document.querySelectorAll('.language');
console.log(queryList);
// language라는 class를 가진 모든 태그 출력
document.querySelector
- css 선택자로 태그 선택 => css 선택자에 해당하는 태그 중 가장 첫번째 태그 하나
- 존재하지 않는 요소 or 선택자 입력할 경우: null 반환
const li = document.querySelector('li');
const class_js = document.querySelector('.language');
console.log(li); // li 태그 중 첫 번째 요소 JS 출력
console.log(class_js); // language 클래스를 갖는 태그 중 첫 번째 요소 JS 출력
유사 배열
- 배열과 유사한 객체
- 숫자 형태의 인덱싱 가능
- length 속성이 있음
- 배열의 기본 메소드 사용 가능
- Array.isArray(유사배열)의 리턴값은 false
Author And Source
이 문제에 관하여(JS로 HTML을 다루는 법_(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@zero_mountain/JS로-HTML을-다루는-법1
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 맘대로 프로그래밍 언어 순위</title>
</head>
<body>
<h2 id="title">내 맘대로 프로그래밍 언어 순위!</h2>
<ol id="list">
<li id="javaScript" class="language">JavaScript</li>
<li id="python" class="language">Python</li>
<li id="java" class="language">Java</li>
<li id="c" class="language">C</li>
<li id="ruby" class="language">Ruby</li>
</ol>
<script src="index.js"></script>
</body>
</html>const element = document.getElementsByTagName('li');
console.log(element);
// li태그 요소 전체가 HTML Collection의 유사배열 형태로 출력const js = document.getElementById('javaScript');
console.log(js);
// id 값으로 javaScript를 가진 태그 하나를 출력const list = document.getElementsByClassName('language');
console.log(list);
// class 값으로 language를 가진 모든 태그를 출력'#id''.class'const queryList = document.querySelectorAll('.language');
console.log(queryList);
// language라는 class를 가진 모든 태그 출력const li = document.querySelector('li');
const class_js = document.querySelector('.language');
console.log(li); // li 태그 중 첫 번째 요소 JS 출력
console.log(class_js); // language 클래스를 갖는 태그 중 첫 번째 요소 JS 출력Author And Source
이 문제에 관하여(JS로 HTML을 다루는 법_(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@zero_mountain/JS로-HTML을-다루는-법1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
