本筆記系統整理 Window 對象核心方法、定時器機制、DOM 元素選取大全、iframe 內嵌應用及外部 JS 引入規範，適合前端入門開發者快速查閱。
| 方法 | 用途 | 返回值 | 示例 |
|---|---|---|---|
alert(msg) | 信息提示 | undefined | window.alert("提示") |
prompt(msg, default) | 用戶輸入 | 字符串/用戶輸入，取消返回 null | var v = window.prompt("姓名", "張三") |
confirm(msg) | 確認對話框 | 布爾值 | if(window.confirm("確定?")) {...} |
window.open(url, name, features);
// url: 相對/絕對地址
// name: 窗口名（可作 target 目標）
// features: 逗號分隔的鍵值對
// width=400,height=300,left=500,top=300
// menubar=yes,toolbar=yes,location=yes,scrollbars=yes
// ...
window.open("https://www.baidu.com", "db", "width=400,height=300,left=500,top=300,menubar=yes,toolbar=1");
注意：現代瀏覽器攔截非用戶主動觸發的彈窗，location 欄強制顯示。
| 類型 | 創建 | 清除 | 比喻 | 典型場景 |
|---|---|---|---|---|
| 重複性 | var t = setInterval(fn, ms) | clearInterval(t) | 鬧鐘 | 輪詢、動畫幀、心跳 |
| 一次性 | var t = setTimeout(fn, ms) | clearTimeout(t) | 定時炸彈 | 延遲執行、防抖、超時控制 |
關鍵點：第一參數推薦傳函數引用 fn 而非字符串（避免 eval 風險、作用域混淆、性能損耗）。ms 单位為毫秒。
| 方法 | 返回 | 說明 |
|---|---|---|
document.getElementById(id) | Element/null | 唯一 ID，最快 |
document.getElementsByName(name) | HTMLCollection | 表單元素常用，即使只有 1 個也是集合 |
document.getElementsByTagName(tag) | HTMLCollection | 全文檢索，動態集合 |
element.getElementsByTagName(tag) | HTMLCollection | 局部範圍檢索，性能更好 |
document.body | Element | 直接引用 <body> |
document.documentElement | Element | 直接引用 <html> |
document.images / links / anchors / forms | HTMLCollection | 特定標簽快捷集合 |
event.target / event.srcElement | Element | 事件源對象（IE 兼容） |
this | Element | 事件處理函數中指向觸發元素 |
集合（HTMLCollection/NodeList）用法同數組：coll[0]、coll.length、for...of 遍歷。
<iframe src="page.html" width="400" height="300" frameborder="0"></iframe>
textarea，但功能完全不同：iframe 加載完整文檔，擁有獨立 window/document 上下文。postMessage。<script src="path/to/file.js"></script>
.js，內容純 JS 語法，禁止包含 <script> 標籤或 HTML。<script src="..."> 標籤內部不能再寫 JS 代碼，否則會被忽略。</body> 前，或使用 defer/async 屬性控制加載時機。兩層盒子：外層固定寬度（如 100px），內層寬度隨數據變化（如當前進度/總進度 × 100%）。CSS 過渡動畫可平滑變化。
—— 筆記完 ——
