Javascript document排行

在JavaScript中，document對象代表網頁的DOM（文檔對象模型）。它是訪問和操作網頁的所有元素的起點。以下是一些與document對象相關的常見操作：

  1. 查詢選擇器：

    • document.querySelector(selector)：選擇器字元串，返回第一個匹配的元素。
    • document.querySelectorAll(selector)：選擇器字元串，返回一個包含所有匹配元素的NodeList。

  2. DOM遍歷：

    • document.body：返回網頁的<body>元素。
    • document.head：返回網頁的<head>元素。
    • document.children：返回document對象的所有直接子節點。
    • document.firstChild：返回document的第一個子節點。
    • document.lastChild：返回document的最後一個子節點。
    • document.firstElementChild：返回document的第一個元素子節點。
    • document.lastElementChild：返回document的最後一個元素子節點。

  3. 事件處理：

    • document.addEventListener(eventType, handler, options)：在document上添加一個事件監聽器。
    • document.removeEventListener(eventType, handler, options)：從document上移除一個事件監聽器。

  4. 其他方法：

    • document.getElementById(id)：根據id屬性查找元素。
    • document.getElementsByClassName(class_name)：根據類名查找元素。
    • document.getElementsByTagName(tagName)：根據標籤名查找元素。
    • document.createElement(tagName)：創建一個新的元素。
    • document.write(text)：向網頁寫入文本（不建議使用，因為可能會破壞DOM）。
    • document.open() 和 document.close()：用於在伺服器端動態生成網頁時使用。

  5. DOM操作：

    • document.createElement(tagName)：創建一個新的元素。
    • document.createTextNode(text)：創建一個新的文本節點。
    • document.appendChild(newNode)：將一個節點添加到document的末尾。
    • document.replaceChild(newNode, oldNode)：用一個新節點替換document中的舊節點。
    • document.removeChild(child)：從document中移除一個節點。

  6. DOM Mutation Observers：

    • new MutationObserver(callback)：創建一個觀察器，用於監聽DOM的變化。

  7. 其他屬性：

    • document.URL：返回網頁的URL。
    • document.title：返回或設定網頁的標題。
    • document.cookie：返回或設定Cookie。

這些只是document對象的一部分功能。JavaScript的document對象提供了強大的功能來操作和修改網頁的內容和結構。