반응형
태그 속성 다루기
- 조회 시 사용: 태그.속성
- 수정시 사용: 태그.속성 = 값;
- 자바스크립트에서는 속성 이름에 하이픈을 쓸 수 없다
- aris-disabled 대신 ariaDisabled 로 써야 한다
- class 속성은 class 대신 className 을 사용
- 태그.className = '클래스1, 클래스2, ...';
- 새로운 클래스를 추가하거나 삭제하려면 태그.classList 객체를 사용
- 태그에 해당 클래스가 존재하는지 확인: 태그.classList.contains('클래스')
- 추가: 태그.classList.add('클래스1', '클래스2', ...)
- 수정: 태그.classList.replace('<기존 클래스>', '<수정 클래스>')
- 제거: 태그.classList.remove('클래스1', '클래스2', ...)
- style 속성을 사용해 자바스크립트에서 태그의 CSS 를 변경
- 태그.style.<CSS 속성> = 값;
- tr 태그는 몇 번째 줄인지 알려주는 rowIndex
- td 태그는 몇 번째 칸인지 알려주는 cellIndex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<input type="hidden" name="at" value="null" />
<script>
// 태그 속성 다루기
document.querySelector('input').type;
document.querySelector('input').name;
document.querySelector('input').value;
console.log(document.querySelector('tr').rowIndex); // 0
consloe.log(document.querySelectorAll('td')[2].cellIndex); // 2
</script>
</body>
</html>부모와 자식 태그 찾기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<h4>
form : HTML 에서 사용자에게 정보를 입력받아 서버로 정보를 전송하기 위한
양식 폼
</h4>
<form action="" method="get" id="form">
<input type="text" name="name" id="name" required />
<input type="email" name="email" id="email" required />
<button name="button" type="submit">구독</button>
</form>
<script>
console.log(document.querySelector('td').parentNode); // tr 태그 - 부모태그
console.log(document.querySelector('tr').children); // [td, td, td] - 자식태그
console.log(document.querySelector('table').children.children); // [td, td, td] - 자식의 자식 태그
console.log(document.querySelector('table').querySelectorAll('td')); // [td, td, td] - 자식의 자식 태그 찾는 다른 방법
const $form = document.querySelector('#form');
$form[0]; // <input type="text" name="name" id="name" required />
$form[1]; // <input type="email" name="email" id="email" required />
$form[2]; // <button name="button" type="submit">구독</button>
$form.name; // <input type="text" name="name" id="name" required />
$form.email; // <input type="email" name="email" id="email" required />
$form.button; // <button name="button" type="submit">구독</button>
</script>
</body>
</html>새로운 태그 만들기
- 다른 태그 내부에 만든 태그를 추가하려면 append( ) 나 appendChild( ) 메서드를 호출
- <부모 태그>.appendChild(<자식 태그>)
- <부모 태그>.append(<자식 태그1>, <자식 태그2>, ...)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<br />
<script>
const $button = document.createElement('button');
$button.classList.add('login');
$button.style.fontSize = '15px';
$button.textContent = '버튼';
document.body.append($button);
const $table = document.createElement('table');
document.body.append($table);
$table.border = 1;
for (let i = 0; i < 4; i++) {
const $tr = document.createElement('tr');
$table.append($tr);
for (let j = 0; j < 4; j++) {
const $td = document.createElement('td');
$td.textContent = '칸';
$tr.append($td);
}
}
const $table2 = document.createElement('table');
$table2.border = 1;
for (let i = 0; i < 4; i++) {
const $tr = document.createElement('tr');
$table2.append($tr);
for (let j = 0; j < 4; j++) {
const $td = document.createElement('td');
$td.textContent = '칸2';
$tr.append($td);
}
}
document.body.append($table2);
const $img = document.createElement('img');
const $fragment = document.createDocumentFragment();
$fragment.append($button, '텍스트', $img);
document.body.append($fragment); // button, 텍스트, img가 body에 추가됨
</script>
</body>
</html>반응형
'개발 이야기 > 개발 도서' 카테고리의 다른 글
| 제로초 자바스크립트 입문 <끝말잇기 1> (0) | 2024.03.15 |
|---|---|
| 제로초 자바스크립트 입문 <window 객체> (0) | 2024.03.14 |
| 제로초 자바스크립트 입문 <이벤트와 이벤트리스너> (0) | 2024.03.13 |
| 제로초 자바스크립트 입문 <HTML 파일 생성 및 DOM 사용하기> (0) | 2024.03.13 |
| 제로초 자바스크립트 입문 <프로미스와 async / await> (0) | 2024.03.12 |