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>
5.2 KiB
id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit
| id | title | category | status | verification_status | canonical_id | aliases | duplicate_of | source_trust_level | confidence_score | created_at | updated_at | review_reason | merge_history | tags | raw_sources | applied_in | github_commit | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| javascript-dom-methods | JavaScript DOM Methods | Frontend | draft | conceptual |
|
B | 0.88 | 2026-06-23 | 2026-06-23 |
|
|
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 —
documentrepresents the HTML document; methods likegetElementById()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>
<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):
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).