DOM屬性

常用 DOM 屬性

1. innerHTML:

   • 用於獲取或設定元素的 HTML 內容。
   • 可以直接插入 HTML 程式碼，適合處理複雜的 HTML 結構。

   element.innerHTML = '<p>New content</p>'; console.log(element.innerHTML);

2. innerText:

   • 用於獲取或設定元素的文字內容，只包括可見的文字。
   • 會觸發重排和重繪，效能較低。

   element.innerText = 'Visible text'; console.log(element.innerText);

3. outerHTML:

   • 用於獲取或設定元素及其所有後代節點的 HTML 內容。
   • 設定時會替換整個元素。

   element.outerHTML = '<div>Replaced element</div>'; console.log(element.outerHTML);

4. value:

   • 用於獲取或設定表單元素（如 <input>, <textarea>）的值。

   javascript

   複製程式碼

   const input = document.querySelector('input'); input.value = 'New value'; console.log(input.value);

5. src:

   • 用於獲取或設定 <img> 和 <iframe> 元素的源 URL。

   javascript

   複製程式碼

   const img = document.querySelector('img'); img.src = 'new-image.png'; console.log(img.src);

6. href:

   • 用於獲取或設定 <a> 元素的連結 URL。

   javascript

   複製程式碼

   const link = document.querySelector('a'); link.href = 'https://www.example.com'; console.log(link.href);

7. style:

   • 用於獲取或設定元素的行內樣式。

   javascript

   複製程式碼

   element.style.color = 'red'; console.log(element.style.color);

8. className:

   • 用於獲取或設定元素的 class 屬性。
   • 可以透過 classList 進行更細粒度的操作。

   javascript

   複製程式碼

   element.className = 'new-class'; console.log(element.className);

   javascript

   複製程式碼

   element.classList.add('another-class'); element.classList.remove('new-class'); console.log(element.classList.contains('another-class'));

9. id:

   • 用於獲取或設定元素的 id 屬性。

   javascript

   複製程式碼

   element.id = 'new-id'; console.log(element.id);

10. dataset:

    • 用於獲取或設定元素的自定義資料屬性（data-* 屬性）。

    javascript

    複製程式碼

    element.dataset.customData = 'customValue'; console.log(element.dataset.customData);

其他有用的屬性

• tagName:

  • 返回元素的標籤名（大寫）。

  javascript

  複製程式碼

  console.log(element.tagName); // e.g., "DIV"

• children:

  • 返回元素的子元素集合（不包括文字節點）。

  javascript

  複製程式碼

  const children = element.children; console.log(children.length);

• parentNode:

  • 返回元素的父節點。

  javascript

  複製程式碼

  const parent = element.parentNode; console.log(parent);

• nextSibling 和 previousSibling:

  • 返回元素的下一個或上一個兄弟節點（包括文字節點）。

  javascript

  複製程式碼

  const next = element.nextSibling; const previous = element.previousSibling; console.log(next, previous);

• nextElementSibling 和 previousElementSibling:

  • 返回元素的下一個或上一個兄弟元素（不包括文字節點）。

  javascript

  複製程式碼

  const nextElement = element.nextElementSibling; const previousElement = element.previousElementSibling; console.log(nextElement, previousElement);