koriweb
9609c04755
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
120 lines
5.2 KiB
Markdown
120 lines
5.2 KiB
Markdown
---
|
|
id: javascript-dom-methods
|
|
title: "JavaScript DOM Methods"
|
|
category: "Frontend"
|
|
status: "draft"
|
|
verification_status: "conceptual"
|
|
canonical_id: ""
|
|
aliases: ["DOM API", "DOM methods", "DOM properties", "HTML DOM API", "DOM Application Programming Interface"]
|
|
duplicate_of: ""
|
|
source_trust_level: "B"
|
|
confidence_score: 0.88
|
|
created_at: 2026-06-23
|
|
updated_at: 2026-06-23
|
|
review_reason: ""
|
|
merge_history: []
|
|
tags: ["javascript", "js", "web", "frontend", "w3schools", "dom"]
|
|
raw_sources: ["https://www.w3schools.com/js/js_htmldom_methods.asp"]
|
|
applied_in: []
|
|
github_commit: ""
|
|
---
|
|
|
|
# [[JavaScript DOM Methods]]
|
|
|
|
## 🎯 한 줄 통찰 (One-line insight)
|
|
The DOM API is a set of methods (actions) and properties (values) that let JavaScript change the content, structure, and style of any HTML element. [S1]
|
|
|
|
## 🧠 핵심 개념 (Core concepts)
|
|
- **The DOM API** — the DOM API (Application Programming Interface) is a set of methods and properties that allow JavaScript to change the content, structure, and style of any HTML elements. [S1]
|
|
- **Method vs property** — an API method is an action you can do on an HTML element; an API property is a value you can access on an HTML element. [S1]
|
|
- **JavaScript is the language** — JavaScript is the programming language that operates the DOM API. [S1]
|
|
- **document is the entry point** — `document` represents the HTML document; methods like `getElementById()` are called on it to retrieve elements. [S1]
|
|
|
|
## 🧩 추출된 패턴 (Extracted patterns)
|
|
- **Select with a method, mutate with a property** — call a document method to get an element, then assign to an element property (e.g. `innerHTML`). [S1]
|
|
- **Categorized capabilities** — DOM methods group into selecting, accessing content, accessing/changing attributes, manipulating structure, and adding event handlers. [S1]
|
|
|
|
## 📖 세부 내용 (Details)
|
|
**HTML DOM API** [S1]
|
|
The DOM API (Application Programming Interface) is a set of methods and properties that allow JavaScript to change the content, structure, and style of any HTML elements. An API method is an action that you can do on an HTML element, while an API property is a value that you can access on an HTML element. [S1]
|
|
|
|
**Example** [S1]
|
|
```html
|
|
<html>
|
|
<body>
|
|
|
|
<p id="demo"></p>
|
|
|
|
<script>
|
|
// Access a paragraph Element
|
|
const myPara = document.getElementById("demo");
|
|
|
|
// Change the content of the Element
|
|
myPara.innerHTML = "Hello World!";
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
**Example Explained** — `document` represents the HTML document; `getElementById()` is a document method; `myPara` retrieves the element; `innerHTML` is an element property that can be modified. [S1]
|
|
|
|
**HTML DOM API Abilities** [S1]
|
|
The DOM API enables JavaScript to: find and select elements, change element content and attributes, add/remove/modify elements, change CSS styles, and add event listeners. [S1]
|
|
|
|
**Selecting HTML Elements** [S1]
|
|
|
|
| Method | Description |
|
|
|--------|-------------|
|
|
| `document.getElementById(id)` | Find element by id |
|
|
| `document.getElementsByTagName(name)` | Find elements by tag name |
|
|
| `document.getElementsByClassName(name)` | Find elements by class name |
|
|
| `document.querySelector(selector)` | Find first matching CSS selector |
|
|
| `document.querySelectorAll(selector)` | Find all matching CSS selectors |
|
|
|
|
**Accessing Element Content** [S1]
|
|
|
|
| Property | Description |
|
|
|----------|-------------|
|
|
| `element.innerHTML` | HTML content |
|
|
| `element.textContent` | Text content |
|
|
|
|
**Manipulating Structure** [S1]
|
|
|
|
| Method | Description |
|
|
|--------|-------------|
|
|
| `document.createElement()` | Create new element |
|
|
| `document.removeChild()` | Remove element |
|
|
| `document.appendChild()` | Add element |
|
|
| `document.replaceChild()` | Replace element |
|
|
|
|
## 🛠️ 적용 사례 (Applied in summary)
|
|
The page's `#demo` paragraph example — retrieved with `getElementById()` and updated via `innerHTML` — is the canonical applied use. No external project/commit applications found in the source.
|
|
|
|
## 💻 코드 패턴 (Code patterns)
|
|
Select then mutate (language: JavaScript):
|
|
```javascript
|
|
const myPara = document.getElementById("demo");
|
|
myPara.innerHTML = "Hello World!";
|
|
```
|
|
|
|
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
|
No contradictions found in the source.
|
|
|
|
## ✅ 검증 상태 및 신뢰도
|
|
- **상태:** draft
|
|
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
|
|
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
|
- **신뢰 점수:** 0.88
|
|
- **중복 검사 결과:** 신규 생성 (New discovery)
|
|
|
|
## 🔗 지식 그래프 (Knowledge Graph)
|
|
- **상위/루트:** [[JavaScript Tutorial]]
|
|
- **관련 개념:** [[JavaScript HTML DOM]], [[JavaScript DOM Elements]], [[JavaScript DOM Changing HTML]], [[JavaScript DOM Event Listener]]
|
|
- **참조 맥락:** The catalog of methods/properties referenced whenever selecting, reading, or restructuring DOM nodes.
|
|
|
|
## 📚 출처 (Sources)
|
|
- [S1] W3Schools — JavaScript DOM Methods — https://www.w3schools.com/js/js_htmldom_methods.asp
|
|
|
|
## 📝 변경 이력 (Change history)
|
|
- 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript DOM Methods" page (Astra wiki-curation, P-Reinforce v3.1 format).
|