다트의 dart:html 라이브러리에서 DOM 조작 방법은?
_____A1: `document.querySelector()` 또는 `document.getElementById()` 같은 메서드를 사용해 요소를 선택할 수 있습니다.
예:
```dart
import 'dart:html';
void main() {
var element = document.querySelector(' myElement'); // CSS 선택자 사용
var div = document.getElementById('myDiv'); // id로 선택
}
```
Q2: 선택한 요소에 텍스트를 추가하거나 변경하는 방법은?
A2: 요소의 `text` 속성을 사용합니다.
예:
```dart
element.text = '새 텍스트 내용';
```
Q3: HTML 요소 내부에 HTML 마크업을 삽입하려면?
A3: `innerHtml` 속성을 이용합니다.
예:
```dart
element.innerHtml = '빨간색 텍스트';
```
Q4: 새로운 DOM 요소를 생성하는 방법은?
A4: `Element` 생성자나 `document.createElement()` 메서드를 사용합니다.
예:
```dart
var newDiv = Element.tag('div');
// 또는
var newSpan = document.createElement('span');
```
Q5: 생성한 요소를 기존 DOM에 추가하려면?
A5: 부모 요소의 `append()`, `appendHtml()`, `insertBefore()` 등 메서드를 사용합니다.
예:
```dart
var container = document.querySelector(' container');
container.append(newDiv);
```
Q6: 요소의 속성을 읽거나 설정하는 방법은?
A6: `getAttribute()`와 `setAttribute()` 메서드를 사용합니다.
예:
```dart
var href = element.getAttribute('href');
element.setAttribute('class', 'highlight');
```
Q7: 특정 요소를 DOM에서 제거하려면?
예:
```dart
element.remove();
```
Q8: 요소에 CSS 클래스를 추가하거나 제거하는 방법은?
A8: `classes` 프로퍼티를 사용해 클래스를 조작합니다.
예:
```dart
element.classes.add('active');
element.classes.remove('hidden');
```
Q9: 이벤트 리스너를 등록하는 방법은?
A9: `on
예:
```dart
element.onClick.listen((event) {
print('클릭 발생!');
});
```
Q10: 다중 요소를 CSS 선택자로 한 번에 선택하는 방법은?
A10: `document.querySelectorAll()`을 사용하면 `List
예:
```dart
var items = document.querySelectorAll('.item');
for (var item in items) {
item.text = '업데이트 됨';
}
```
Q11: input, textarea 요소의 값을 얻거나 설정하는 방법은?
A11: 해당 요소를 `InputElement`나 `TextAreaElement`로 캐스팅한 후 `value` 속성을 사용합니다.
예:
```dart
var input = document.querySelector(' nameInput') as InputElement;
String text = input.value ?? '';
input.value = '새 값';
```
Q12: style 속성을 조작하여 인라인 스타일을 변경하는 방법은?
A12: `style` 속성의 프로퍼티를 변경합니다.
예:
```dart
element.style.color = 'blue';
element.style.setProperty('background-color', 'yellow');
```
---
요약하자면, `dart:html`은 JavaScript DOM API를 Dart 친화적으로 래핑하여 `document`에서 요소를 선택, 생성, 조작, 이벤트 등록 및 제거하는 모든 일반적인 DOM 작업을 지원합니다.
이 라이브러리를 사용하면 HTML 요소를 생성, 수정, 삭제하고, 이벤트를 처리하며, 스타일을 변경하는 등의 작업을 쉽게 수행할 수 있습니다.
아래에서는 `dart:html` 라이브러리를 사용하여 DOM을 조작하는 방법에 대해 자세히 설명하겠습니다.
1. 기본 설정 Dart 웹 애플리케이션을 시작하려면, Dart SDK가 설치되어 있어야 하며, HTML 파일과 Dart 파일을 준비해야 합니다.
HTML 파일에서 Dart 파일을 로드하려면 `