docs(10_Wiki): Dev 폴더 누락분 반영 — Topic_Programming으로 통합
이전 재구성 작업에서 Dev/ 폴더가 누락되었던 것을 반영. - Dev/Topic_Programming(중첩 폴더, 78개)은 Dev 자체 최상위 폴더들 (Architecture/Conventions/Engineering_Intelligence 등)과 완전 중복이라 제거. - Dev 최상위 엔지니어링 지식 폴더(Architecture/Conventions/Engineering_Intelligence/ Failure_Library/Generalized_Principles/Language/Pattern_Catalog/Platform_Guides/ Subsystems, 77개)는 이미 Topic_Programming/Topic_Programming에 더 최신 버전이 존재해 중복 제거(고유 콘텐츠 1개는 예외 처리하여 이동 보존). - Dev의 W3Schools 언어 튜토리얼 폴더(Topic_C/CPP/CSS/CSharp/HOWTO/HTML/Java/ JavaScript/PHP/Python/SQL/W3CSS, 1201개)는 전부 Topic_Programming 하위로 이동. - 에이전트 운영 상태(.astra/docs)는 그대로 유지, 콘텐츠 폴더만 정리. - Topic_Programming 최종 문서 수: 2784 → 3985.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,119 @@
|
||||
---
|
||||
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).
|
||||
Reference in New Issue
Block a user