반응형
// word-relay.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>끝말잇기</title>
</head>
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text" />
<button>입력</button>
<button class="hello">버튼2</button>
<button class="hello">버튼3</button>
<script>
// 형식
// document.querySelector('선택자')
const $input = document.querySelector('input');
console.log($input);
const $button = document.querySelector('button');
console.log($button);
const $$buttons = document.querySelectorAll('button');
console.log('$$button');
// document.querySelector('#<id 속성 값>')
const $order = document.querySelector('#order');
console.log($order);
// document.querySelector('.<class 속성 값>')
const $$buttons2 = document.querySelectorAll('.hello');
console.log($$buttons2);
// document.querySelector('선택자 내부선택자 내부선택자')
const $span = document.querySelector('div span');
console.log($span);
// 태그.textContent 태그 내부의 문자열을 가져옴
console.log($order.textContent);
const $div = document.querySelector('div');
console.log($div.textContent);
// 태그.innerHTML 태그 내부의 HTML 태그를 포함한 문자열을 가져옴
console.log($div.innerHTML);
// 태그.textContent = 값; 태그 내부의 문자열을 해당 값으로 설정함
$order.textContent = 2;
console.log(typeof $order.textContent);
// 태그.innerHTML = 값; 태그 내부의 태그를 해당 값으로 설정함
$div.innerHTML = '';
$button.innerHTML = '<b>굵게<b>';
// <입력태그>.value 입력창의 값을 가져옴
// <입력태그>.value = 값; 입력창에 값을 넣음
// <입력태그>.focus() 입력창을 하이라이트함
</script>
</body>
</html>
반응형
'개발 이야기 > 개발 도서' 카테고리의 다른 글
| 제로초 자바스크립트 입문 <다양한 DOM 속성> (0) | 2024.03.14 |
|---|---|
| 제로초 자바스크립트 입문 <이벤트와 이벤트리스너> (0) | 2024.03.13 |
| 제로초 자바스크립트 입문 <프로미스와 async / await> (0) | 2024.03.12 |
| 제로초 자바스크립트 입문 <호출 스택과 이벤트 루프> (0) | 2024.03.12 |
| 제로초 자바스크립트 입문 <스코프와 클로저> (0) | 2024.03.11 |