getElementById()
querySelector()
getElementsByClassName()
querySelectorAll()
getAttribute()
setAttribute()
hasAttribute()
removeAttribute()
textContent
innerHTML
createElement()
appendChild()
MDN 文件物件模型 (DOM)
MDN DOM概述
JavaScript入門系列：BOM和DOM筆記
BOM(Browser Object Model)
JS基礎：DOM(Document Object Model) & BOM(Browser Object Model)
getElementById('idname')：填入 idnamequerySelector()：一般名稱為 name， id 名稱為 #idname，class 名稱為 .classname，若有多個只會選取第 1個getElementsByClassName('classname')：Element 有 squerySelectorAll()：同上，一般名稱為 name， id 名稱為 #idname，class 名稱為 .classname
[]，要用 for 迴圈逐一讀取或取代，不能一次變更，單獨變更也需要指定選取第幾個.getAttribute('')：取得屬性的值.setAttribute('屬性名','屬性值')：設定某個屬性的值為多少，若一開始無此屬性就會新增.removeAttribute('')：移除指定的屬性.textContent：取得文字內容，使用 = 可以賦予(更新).innerHTML：取得文字內容外，還可以存取子屬性初始的 HTML
<body>
<a id="link">點我連結</a>
</body>
變更 DOM
let ele = document.querySelector('#link');
ele.textContent = '點我連結至 google';
// <a id="link">點我連結至 google</a>
ele.setAttribute('href' , 'https://www.google.com/');
// 新增 href 的值為 https://www.google.com/
// <a id="link" href="https://www.google.com/">點我連結至 google</a>
console.log(ele.getAttribute('href'));
// 顯示 https://www.google.com/
變更後的 HTML
<body>
<a id="link" href="https://www.google.com/">點我連結至 google</a>
</body>
DOM修改文字節點 - INNERTEXT或TEXTCONTENT傻傻分不清楚
再說明一下 DOM
iThome鐵人賽
看影片追技術